Esportare da Expression Design in un ResourceDictionary ed usarlo in Blend

Un’altra modalità con cui è possibile esportare un’immagine da Expression Design è quello di generare un file XAML contenente al suo interno un ResourceDictionary. Lo scopo è quello di avere un file XAML che potete riutilizzare in più progetti. Oppure all’interno dello stesso progetto potete far riferimento alla stessa immagine, perchè questa viene inserita fra le risorse globali definite all’interno della stessa applicazione. Vediamo in pratica come fare.

Esportare un progetto Expression Design in un file XAML
Apriamo Expression Design, poi apriamo il file .design che contiene il nostro progetto. Andiamo sotto il menù File e poi clicchiamo sulla voce Export. Dopo aver scelto la locazione ed il file del file XAML da generare, appare una dialog box che ci permette di impostare alcuni valori:

In questa dialog box, attiviamo l’option button relativa a Resource dictionary. La cosa interessante è che possiamo decidere come deve essere esportato il contenuto del nostro progetto:

1. Document: significa che il ResourceDictionary conterrà un solo oggetto relativo al documento nella sua interessa. Il mio logo VivendoByte di cui vi ho parlato l’altra volta viene esportato in un unico oggetto DrawingBrush con x:Key =”VivendoByteLogo_design”.
2. Layers: se nel progetto avete definito più layers, nel ResourceDictionary vengono inseriti tanti oggetti quanti sono i layers, ciascuno con un sua Key per poterli referenziare singolarmente
3. Objects: nel ResourceDictionary vengono inseriti tanti oggetti quanti ne compaiono nel progetto. Anche in questo caso, ogni oggetto ha una propria Key univoca

Nel mio caso, ho deciso di esportare il tutto come unico Document. Lo XAML in forma abbreviata appare più o meno così:

<?xml version="1.0" encoding="utf-8"?>
<ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DrawingBrush x:Key="VivendoByteLogo_design">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <DrawingGroup.Children>
                ...
                ...
                ...
                </DrawingGroup.Children>
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>
</ResourceDictionary>

All’interno del blocco <DrawingGroup.Children></DrawingGroup.Children> vengono inseriti tutti gli elementi necessari per disegnare in formato vettoriale l’immagine grafica disegnata con Expression Design.

Lo scopo di tutto questo è quello di importare il ResourceDictionary all’interno di un progetto Expression Blend, in modo tale da poter inserire l’immagine – in questo caso il mio logo – nelle Window del progetto. Possiamo farlo senza mettere mano al codice XAML? Certo che sì: questa volta Blend non crasha e fa tutto come si deve. Come? Stiamo per scoprirlo.

Importiamo in un progetto Expression Blend il ResourceDictionary

Apriamo Expression Blend, poi apriamo o creiamo il progetto sul quale vogliamo lavorare. Poi clicchiamo con il destro sul nome del progetto e clicchiamo sulla voce Add Existing Item e andiamo a selezionare il file XAML che abbiamo creato al passaggio precedente. Questa operazione fa essenzialmente due cose fondamentali:

1. aggiunge il file XAML al progetto Blend: banale
2. modifica automaticamente il file App.xaml, aggiungendo fra le risorse disponibili globalmente nell’applicazione il ResourceDictionary appena aggiunto al progetto. Il file App.xaml appare come segue:

<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="StudioConIlLibro.App" StartupUri="Window3.xaml">
    <Application.Resources>
        <!-- Resources scoped at the Application level should be defined here. -->
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="VivendoByteLogo.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

A questo punto, la faccenda è abbastanza semplice. Basta aprire una Window, o crearne una nuova, per vedere fra le risorse diverse cose interessanti. Se espandiamo il nodo relativo al file App.xaml, Blend ci dice che abbiamo definito un collegamento al file VivendoByteLogo.xaml. Se espandiamo quest’ultimo invece, appare la nostra immagine: Blend ci dice qual’è la sua Key, e ci fa vedere l’anteprima dell’immagine. Possiamo regolarne alcune proprietà, come il Tile Mode e lo Stretch.

Per inserire l’immagine su una Window è sufficiente farne un bel drag’n’drop. Dipendentemente dall’oggetto sul quale rilasciate il pulsante, Blend vi chiede a quale proprietà volete associare il DrawingBrush. Questa è davvero una cosa carina, funzionale e intuitiva da usare. Per esempio, se trascinate l’immagine su un semplice Button, potete selezionare Background, BorderBrush, Foreground o OpacityMack. Potete inoltre decidere se creare da zero un nuovo oggetto Rectangle fillato al suo interno con l’immagine vettoriale. Lo XAML generato è banale ed efficiente:

<Rectangle
   HorizontalAlignment="Left" Width="100"
   Fill="{DynamicResource VivendoByteLogo_design}"
   Stroke="#FF000000"/>

Questo è l’esempio di un oggetto Rectangle. Se avessimo deciso di usare l’immagine su un Button la proprietà bindata sarebbe stata ad esempio Background e così via.

Technorati Tags: blend wpf XAML resources

Send to Kindle