Elementi di grafica con XAML

In un articolo precedente abbiamo visto come installare Silverlight e far girare un primo semplice progetto. In questo articolo cerchiamo di approfondire ancora dedicandoci alla realizzazione di elementi grafici.

Cominciamo considerando l'elemento Canvas, ovvero la "tela" sulla quale posizioniamo grafica e testi. Canvas fornisce il più classico dei sistemi di coordinate per la collocazione degli oggetti: possiamo assegnare ad ogni elemento gli attributi:

• Canvas.Left: distanza dal lato sinistro dell'area Canvas
• Canvas.Top: distanza dal lato superiore dell'area Canvas

È anche possibile annidare più elementi canvas e posizionarli uno dentro l'altro.

Disegnare figure piane vettoriali

È possibile disegnare sulla tela di Silverlight utilizzando elementi di grafica vettoriale: in grafica vettoriale un'immagine è descritta attraverso un insieme di punti (vettori) e formule matematiche in maniera tale che possa essere modificata, ingrandita, spostata senza alcun deterioramento. Questo a differenza delle immagini dette "raster" (ad esempio le foto) che sono rappresentate da mappe di pixel.

Abbiamo a disposizione alcuni elementi per definire le figure fondamentali:

• <Ellipse>: elisse. Ne possiamo definire le dimensioni, in termini di ampiezza del diametro verticale ed orizzontale, o attraverso gli attributi Height ed Width (ovviamente se assegnamo lo stesso valore ai due parametri otteniamo un cerchio).
• <Rectangle>: rettangolo, anche con gli angoli arrotondati, programmati attraverso RadiusX e RadiusY.
• <Line>: per disegnare una linea è necessario fissare un punto di partenza con le coordinate x1 e y1 sino a concludere con le coordinate x2 e y2.

È possibile anche disegnare figure più complesse:

• <Polyline>: linea spezzata, è una figura geometrica composta da diversi segmenti collegati tra loro. È considerata una linea aperta e non è possibile colorarne l'area. I vertici sono definiti utilizzando l'attributo Points ed inserendo le coppie di coordinate separate da spazi (x1,y1 x2,y2 ... xn,yn).
• <Poligon>: come suggerisce il nome, consente di creare un poligono, indicandone i punti come coppie di coordinate separate da spazi. Il poligono è una forma chiusa, quindi possiamo colorarne l'area.

• <Path> ci consente di disegnare figure geometriche piane complesse, come archi o "Curve di Bézier" utilizzando l'attributo Data.

Nell'attributo "Data" possiamo definire e concatenare moltissimi tipi di segmenti e forme, con una sorta di mini-linguaggio. Nel caso mostrato abbiamo definito il punto iniziale con la lettera 'M', che sta per "Move to" ovvero "assumi la posizione...", poi abbiamo fatto sviluppare una curva di Bézier cubica, utilizzando la lettera 'C' (per facilitare la comprensione abbiamo evidenziato i punti di controllo).

Possiamo trovare tutte le opzioni di <Path> su msdn.

Trasformazioni delle figure

Come ci si può aspettare sono applicabili le classiche manipolazioni quali rotazioni, traslazioni, ingrandimenti e riduzioni. Con XAML possiamo definire tutto nell'elemento RenderTransform, al quale indichiamo il tipo e i parametri della trasformazione con semplici elementi figli.

È pure possibile applicare più trasformazioni in una volta, utilizzando la proprietà TransformGroup

Riempimenti

Come abbiamo accennato possiamo colorare l'area ricoperta dalle figure, per impostare il colore di riempimento utilizziamo l'attributo Fill. Inoltre possiamo tracciare il perimetro dell'oggetto, impostando il colore della linea con l'attributo stroke e lo spessore con l'attributo StrokeThickness.

Possiamo elaborare i nostri riempimenti anche utilizzando i "pennelli". Esistono diversi tipi di marcatori "brush" (pennello appunto), ciascuno con una particolare funzionalità, ne esaminiamo alcuni.

Il più semplice è SolidColorBrush, con il quale otteniamo il riempimento con colore solido, ovvero senza sfumature.

Risulta sicuramente più interessante poter sfumare da un colore verso l'altro. Per farlo esaminiamo altri due marcatori: LinearGradientBrush e RadialGradientBrush.

LinearGradientBrush

Serve per ottenere una sfumatura, tra diversi colori, sviluppata su una linea diagonale. Inseriamo i colori che fanno parte della sfumatura utilizzando il l'elemento <GradientStop>. L'attributo offset prende valori su una scala da 0 a 1 e ci consente di stabilire il punto preciso in cui il gradiente si sofferma sul colore indicato.

Per orientare l'inclinazione della linea sulla quale sfuma il colore, utilizziamo le proprietà StartPoint e EndPoint di LinearGradientBrush e definiamo le coordinate di partenza e di arrivo della linea: anche questi parametri sono coefficienti che assumono valori tra 0 e 1.

RadialGradientBrush

I colori in questo caso sfumano attraverso un irraggiamento circolare che è impostato attraverso le proprietà GradientOrigin dal quale partono le sfumature e Center, RadiusX, e RadiusY che determinano le dimensioni del cerchio o dell'ellissi.

Applicare gradienti al testo

È possibile applicare anche al testo riempimenti particolari come dei gradienti. Per farlo utilizziamo la proprietà Foreground.

Maschere di clipping e trasparenza

La manipolazione delle figure con XAML è molto potente e consente di definire elementi semplici ma anche di modificarli in modo avanzato. Esaminiamo alcune delle applicazioni possibili.

Possiamo voler definire una figura ma visualizzarne solo una porzione, in questo caso possiamo descrivere una maschera di clipping, ovvero un'area di ritaglio, semplicemente definendo al suo interno una ulteriore forma. Ad esempio se vogliamo disegnare solo uno spicchio di un disco possiamo definire l'ellissi e ritagliarla con un rettangolo.

Inoltre è possibile definire la trasparenza, o l'opacità di un oggetto. Ci serviamo dell'attributo Opacity che può essere impostato su valori nell'intervallo tra 0.0 a 1.0, dove 0 determina la totale trasparenza della figura mentre 1 la rende completamente opaca.

È possibile impostare anche maschere per determinare le trasparenze. Utilizzando l'elemento OpacityMask, ad esempio, possiamo impostare la progressiva comparsa di un elemento dell'interfaccia utente.

La codifica usata per i colori in questo caso prevede 8 cifre esadecimali invece delle classiche 6, le prime due sono riservate alla rappresentazione dell'indice di opacità.

Immagini ed elementi multimediali

Tra le caratteristiche più potenti di XAML c'è la gestione di contenuti multimediali. È possibile inserire video e audio, utilizzando il marcatore <MediaElement>, ed il relativo attributo Source all'interno del consueto Canvas;

È possibile alzare o abbassare il volume attraverso l'attributo Volume, (valori tra 0 e 1, predefinito 0.5), o smorzarlo completamente, con l'attributo IsMuted impostato a true.

Un elemento multimediale condivide la scena con tutti gli altri elementi e si possono sovrapporre a grafici, immagini o testi.

Un modo interessante per sfruttare un video può essere quello di incastonarlo in altre forme. Possiamo ottenere questo effetto creando un MediaElement e utilizzandolo come pennello. Il marcatore che fa al caso nostro è <VideoBrush>. Basta assegnare alla proprietà SourceName il nome che abbiamo dato al <MediaElement>.

Nel nostro caso facciamo un esempio di un video in un testo, il testo relativo al video viene formattato attraverso il tipico elemento <TextBlock>

Con il giusto intreccio di marcatori XAML e un po' di JavaScript possiamo realizzare veri e propri player multimediali, con le classiche funzioni PLAY,STOP,PAUSE etc.