Esportare in XAML con Expression Design

Se dovete creare grafica vettoriale complessa potete usare Expression Design, un altro strumento della famiglia Expression. Questo software permette di disegnare grafica vettoriale in 2D: rettangoli, circonferenze, testo, ellissi, disegno a mano libera, etc. etc. Il tutto sfruttando le potenzialità di WPF, quindi effetti grafici come gradienti, drop shadows, emboss, mosaic e chi ne ha più ne metta.

Per esempio, oggi pomeriggio, prima di andare in ospedale, ho ridisegnato il logo VivendoByte che qualche mese avevo creato con Corel Draw 12 proprio con Expression Design. Ecco qual’è il vantaggio: potete esportare l’immagine vettoriale che avete creato in codice XAML, e quindi importabile per esempio in Expression Blend.

Ecco qui sotto uno screensho del logo visto con Kaxaml:

Nella parte superiore si vede il logo, nella parte inferiore il codice XAML corrispondente. L’esportazione da Expression Design è piuttosto semplice: basta andare sul menù File e poi cliccare su Export. Appare una dialog box dove potete settare alcune impostazioni:

Potete decidere se esportare in un Canvas, in un ResourceDictionary oppure in formato Silverlight (che si occupa di eliminare tutti i componenti non supportati, per esempio il BitmapEffect che ho impostato per l’ombra azzurrina che si vede nella scritta “vivendoByte.net” nello screenshot di prima. Mentre giocate con gli option button, date un’occhiata all’anteprima che vedete sulla sinistra, perchè è piuttosto fedele al risultato finale. Dopo aver impostato il tutto, fate click sul pulsante Export ed il gioco è fatto: avete ottenuto uno XAML da importare dove volete voi.

Se siete scrupolosi, date un’occhiata allo XAML con lo strumento che preferite. Io ho usato Kaxaml perchè è veloce, rapido e…non crasha. Vi accorgerete che l’ “intelligenza” applicata da Expression Design è scarsa. Ma non potrebbe essere altrimenti: un software è pur sempre un software. Ma siccome noi siamo umani, possiamo ottimizzare moltissimo lo XAML.

Per esempio, il logo VivendoByte è formato tra le altre cose da 5 semicerchi, tutti colorati con un gradiente che va da un azzurro (#FF75C5F0) al bianco (#FFFFFFFF). Nello XAML il gradiente è espresso con un blocco come questo:

1 <LinearGradientBrush StartPoint="0.5,-0.140754" EndPoint="0.5,1.61357">
2     <LinearGradientBrush.GradientStops>
3         <GradientStop Color="#FF75C5F0" Offset="0"/>
4         <GradientStop Color="#FFFFFFFF" Offset="1"/>
5     </LinearGradientBrush.GradientStops>
6 </LinearGradientBrush>

Queste 6 linee di codice XAML sono ripetute per 5 volte, una per ciascun semicerchio. A mano, possiamo inserire questo LinearGradientBrush in una risorsa del Canvas, dandogli ovviamente un nome tramite x:Key.

1 <Canvas.Resources>
2     <LinearGradientBrush x:Key="Arco" StartPoint="0.5,-0.140754" EndPoint="0.5,1.61357">
3         <LinearGradientBrush.GradientStops>
4             <GradientStop Color="#FF75C5F0" Offset="0"/>
5             <GradientStop Color="#FFFFFFFF" Offset="1"/>
6         </LinearGradientBrush.GradientStops>
7     </LinearGradientBrush>
8 </Canvas.Resources>

A questo punto, troviamo nello XAML la definizione dei 5 semicerchi, fatta con oggetti di tipo Path. La cambiamo da così:

<Path x:Name="Path_17" Width="64.5164" Height="34.749" Canvas.Left="175.463" Canvas.Top="84.1736" Stretch="Fill" StrokeThickness="5" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 177.963,116.423C 177.963,99.9927 191.287,86.6736 207.722,86.6736C 224.157,86.6736 237.48,99.9927 237.48,116.423">
    <Path.Fill>
        <LinearGradientBrush StartPoint="0.5,-0.140754" EndPoint="0.5,1.61357">
            <LinearGradientBrush.GradientStops>
                <GradientStop Color="#FF75C5F0" Offset="0"/>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
            </LinearGradientBrush.GradientStops>
        </LinearGradientBrush>
    </Path.Fill>
</Path>

a così:

<Path x:Name="Path_17" Fill="{StaticResource Arco}" Width="64.5164" Height="34.749" Canvas.Left="175.463" Canvas.Top="84.1736" Stretch="Fill" StrokeThickness="5" StrokeLineJoin="Round" Stroke="#FFFF7D00" Data="F1 M 177.963,116.423C 177.963,99.9927 191.287,86.6736 207.722,86.6736C 224.157,86.6736 237.48,99.9927 237.48,116.423" />

La proprietà Fill fa riferimento alla risorsa denominata Arco. Il codice è molto più compatto ed efficiente; ma il vero vantaggio è che quel tipo di gradiente è definito una volta sola, all’inizio fra le risorse del Canvas, e quindi se volessimo cambiarlo dovremmo farlo in un punto solo. Lo svantaggio è che se dovessimo riesportare da Expression Design l’immagine vettoriale, dovremmo riottimizzare lo XAML, quindi…fatelo solo quando siete sicuri di aver finito!!!

Technorati Tags: XAML wpf Expression Design

Send to Kindle