Icone Vettoriali in WPF

WPF è un sistema per realizzare interfacce grafiche vettoriali. Basato su un modello dichiarativo prevede una separazione di ruoli tra designer della UI e programmatore così come avviene per i siti web. Purtroppo oggi il mercato nella maggioranza dei casi non è disposto a pagare la presenza di un designer. C’è da dire anche che molti designer si occupano più della presentazione che dell’usabilità di una applicazione e, in tal caso, non avere un designer è una buona cosa. 🙂

Comunque per dare un colpo alla botte e uno al cerchio, in casi di mancanza di fondi per il designer, si può ricorrere ad alcuni trucchi per avere una interfaccia utente abbastanza al passo con i tempi. Quelli che ho trovato più utili sono pochi: si cerca di mantenere l’interfaccia semplice, si utilizzano i colori aziendali (senza esagerare), ci si integra con il look&feel del S.O. (ovviamente Vista🙂 ), si usano pochissime animazioni e si usano elementi vettoriali al posto di elementi raster. Nell’ultimo caso mi riferisco soprattutto a quelle icone che stanno nei pulsanti o in altri elementi. Si devono però utilizzare icone altrettanto semplici senza troppi fronzoli e colori.

Il punto è: dove trovare icone (e altre immagini) vettoriali?

I Windows Meta File (WMF) sono una risposta. E’ possibile trovare parecchi file esistenti e programmi che generano immagini anche in formato WMF. Ad esempio molte clip arts presenti sul sito di Office sono disponibili in formato WMF. Anche PowerPoint può generare un file WMF. E, soprattutto, molti programmi inseriscono immagini vettoriali nella clipboard in formato WMF.

Una volta in possesso del file si può sfruttare Paste2Xaml, un tool di conversione da WMF a XAML. Con questo tool si può importare il file e generare l’equivalente XAML (di solito una serie di poligoni). Senza spendere denaro utilizzando poi XamlPad si possono effettuare dei semplici ritocchi (XamlPad è fornito con l’SDK di Windows). Infine si può inserire (parte di) questo XAML in un file contenente risorse come una risorsa appunto. La magia consiste nell’utilizzare  un VisualBrush:

<VisualBrush x:Key="MyIcon">
    <VisualBrush.Visual>
        <Canvas>
            <Polygon Points="10 10 10 90 90 90 10 10"
                     Fill="LigthOrange"/>
        </Canvas>
    </VisualBrush.Visual>
</VisualBrush>

Questo produce un triangolo arancio. Il fatto di definirla come risorsa permette di utilizzarla poi in altri oggetti. Creata la risorsa è possibile inserirla in un elemento grafico utilizzandola come Brush. Ad esempio un pulsante potrebbe essere così definito:

<Button Width="200" Height="50">
    <StackPanel Orientation="Horizontal">
        <Rectangle Fill="{StaticResource MyIcon}"
                   Width="40" Height="40"/>
        <TextBlock>Triangle</TextBlock>
    </StackPanel>
</Button>

Quello che compare è questo:

image

Paste2Xaml è solo uno dei tool disponibili su WPF-Graphics creati da Andrej Benedik. Sullo stesso sito potete trovare anche convertitori da SVG e 3DS. Se avete voglia di sbizzarrirvi potete utilizzare diversi programmi gratuiti per generare contenuti da dare in pasto a questi tool. Ma questo sicuramente non aiuterà a diminuire i costi!😉

1 comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: