Realizzazione grafica delle applicazioni
Silverlight: realizzazione della grafica
Silverlight fornisce l'opportunità di disegnare forme grafiche bidimensionali (2D) nelle applicazioni. Oggetti grafici di questo tipo sono più che adeguati per la maggior parte delle interfacce grafiche e delle applicazioni, in particolar modo per quelle aziendali. Tuttavia Silverlight al momento non fornisce l'opportunità di creare oggetti grafici più elaborati, come quelli tridimensionali (3D), poiché Silverlight è stato concepito per essere cross-platform e cross-browser, senza appoggiarsi ad hardware o sistemi operativi particolari.
Gli elementi grafici
Disegnare in Silverlight può esser eseguito attraverso l'utilizzo di elementi grafici quali l'ellisse o un rettangolo. Tutti gli elementi grafici in silverlight estendono il tipo Shape. Di conseguenza, tutti gli oggetti di tipo Shape in Silverlight hanno alcune funzionalità in comune come le seguenti:
- Stroke: definisce il profilo di una forma;
- StrokeThickness: definisce lo spessore del profilo di una forma;
- Fill: definisce il riempimento dello spazio interno di una forma.
Gli oggetti Shape possono esser posizionati sulla canvas di Silverlight attraverso le proprietà Canvas.Top e Canvas.Left.
Linee
Per disegnare delle linee, si usa l'oggetto Line. Una linea può esser facilmente disegnata sulla canvas attraverso Blend e può esser creata direttamente in XAML usando Visual Studio 2008. Una linea viene definita per mezzo di due punti. Ciascun punto è composto da una combinazione di due coordinate X-Y.
Il codice sottostante disegna una linea diagonale rossa dai punti di coordinate 10, 10 a 100, 100.
Il risultato viene mostrato nell'immagine qui sotto.
Fig 1: disegno di una linea
Ellissi
Un oggetto Ellipse viene usato per disegnare oggetti rotondi in Silverlight. Le caratteristiche circolari di un ellisse vengono definite specificando l'altezza e la larghezza dell'ellisse. Il codice seguente crea un ellisse riempito con un gradiente blu e un contorno pari a 3.
<Ellipse Width="226" Height="124" Stroke="#FF000000" StrokeThickness="3" Canvas.Left="8" Canvas.Top="8"> <Ellipse.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"><GradientStop Color="#FFD9EAF0" Offset="0"/><GradientStop Color="#FF126D8E" Offset="1"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse>
qualche volta quando si utilizza un tool di design come Blend, potrebbe risultare molto difficile disegnare un cerchio perfetto. Per creare un cerchio con un ellisse in Silverlight, assicuratevi che l'altezza e la larghezza siano identici fra loro. Per creare un cerchio in Blend, nel ridimensionamento dell'ellisse, tenete premuto il tasto Shift. Il codice sottostante crea un cerchio con un diametro di 100px, un profilo pari a 3 di colore giallo e un riempimento verde.
<Ellipse Width="100" Height="100" Stroke="#FFEAEC19" StrokeThickness="3" Canvas.Left="262" Canvas.Top="113"> <Ellipse.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"><GradientStop Color="#FFD9EAF0" Offset="0"/><GradientStop Color="#FF247016" Offset="1"/> </LinearGradientBrush> </Ellipse.Fill> </Ellipse>
Il risultato delle definizioni dell'ellisse e del cerchio visti in precedenza viene mostrato nell'immagine sottostante.
Fig 2: disegnare ellissi
Rettangoli
La classe Rectangle viene usata per disegnare rettangoli in Silverlight. Il codice sottostante illustra la creazione di due rettangoli, uno più largo e di colore blu (sullo sfondo) e uno più piccolo e arancione, in primo piano.
<Rectangle Width="240" Height="120" Stroke="#FF000000" Canvas.Left="40" Canvas.Top="40"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"><GradientStop Color="#FF000000" Offset="0"/><GradientStop Color="#FF6867D2" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill></Rectangle><Rectangle Width="72" Height="72"Stroke="#FFF28C12" Canvas.Left="200" Canvas.Top="80"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"><GradientStop Color="#FFF28C12" Offset="0"/><GradientStop Color="#FFFFFFFF" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>
Proprio come per gli ellissi, quando si ridimensiona un rettangolo in Blend, se volete disegnare un quadrato o mantenere le proporzioni correnti del rettangolo, tenete premuto il tasto Shift. Il risultato del codice presentato poco fa è mostrato nella figura seguente.
Fig 3: disegnare rettangoli
Paths e Geometry
L'oggetto Path estende l'oggetto Shape ma non ha alcuna forma definita: infatti tale oggetto accetta una definizione indiretta o astratta di un oggetto Shape per definire come il Path dev'essere creato. La classe Geometry viene usata per definire come un oggetto Shape deve essere creato. Questa classe è astratta e quindi non può essere istanziata direttamente ma si deve istanziare una delle sue sottoclassi.
La classe Path può essere usata per definire semplici forme come linee, ellissi e rettangoli nella stessa maniera in cui lo fanno le rispettive classi. Ad ogni modo la classe PathGeometry viene usata per creare forme più complesse. Creare oggetti Path può esser piuttosto difficile inserendo a mano le coordinare direttamente nel fil XAML. Quando si ua un tool di design come Blend, i Path vengono creati come combinazione di elementi più semplici oppure a mano libera usando come tool la penna. Il codice sottostante mostra svariati elementi Path che sono stati resi in Blend disegnano un omino a mano.
<Path Width="36.943" Height="40" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Canvas.Left="80" Canvas.Top="24" Data="M98,41 C94.367387,42.623083 91.686629,43.473339 88,44 88,44.666667 88,45.333333 88,46 87,46 86,46 85,46 85,46.666667 85,47.333333 85,48 84,48 83,48 82,48 82,62.686511 69.161892,80 102,80 113.81515,80 126.94836,63.615905 98,41 z"/> <Path Width="30" Height="76" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Canvas.Left="76.472" Canvas.Top="61" Data="M99,78 C99.621745,91.056649 101.88843,103.66122 103,117 103.49483,122.93794 105,127.98987 105,134 105,144.96507 85,133.97906 85,148 80.579426,148 79.654844,149.9753 76,153"/> <Path Width="19" Height="14" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Canvas.Left="102.472" Canvas.Top="123" Data="M102,140 C109.69438,144.23843 113.25082,146.41746 120,153"/> <Path Width="43" Height="4" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Canvas.Left="77.472" Canvas.Top="87" Data="M77,104 C91.163884,104.69658 105.26923,106.05954 119,107"/>
Il risultato del codice appena visto viene mostrato nell'immagine sottostante.
Fig 4: uso delle classi Path e Geometry
Ci sono molti tipi di geometrie che possono essere utilizzati con un Path, ad esempio LineGeometry, RectangleGeometry, EllipseGeometry e PathGeometry. PathGeometry può compilare forme complesse da segmenti multipli di Path. Tali segmenti includono archi, linee e altre variazioni.
Pennelli
I pennelli vengono usati per disegnare spazi contenuti da un profilo o un bordo. Ad esempio, un pennello può essere usato per disegnare lo spazio interno di un rettangolo. Infatti, nei rettangoli presentati negli esempi precedenti, un pennello a gradiente viene usato per disegnare lo spazio interno dei rettangoli, proprio come viene mostrato nel codice qui sotto.
<Rectangle Width="72" Height="72" Stroke="#FFF28C12" Canvas.Left="200" Canvas.Top="80"> <Rectangle.Fill> <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5"><GradientStop Color="#FFF28C12" Offset="0"/><GradientStop Color="#FFFFFFFF" Offset="1"/> </LinearGradientBrush> </Rectangle.Fill> </Rectangle>
I pennelli possono essere usati per disegnare colori solidi, gradienti, immagini e anche video. L'abilità di disegnare con oggetti video è disponibile solo in pochi tool (Expression Blend supporta immagini e video ma solo per WPF, non per le applicazioni Silverlight).
Ad ogni modo è piuttosto facile creare un riempimento di immagine come mostrato qui sotto.
<Ellipse Width="184" Height="184" Stroke="#FFD89623" StrokeThickness="3" Canvas.Left="8" Canvas.Top="8"> <Ellipse.Fill> <ImageBrush ImageSource="gingerbread.jpg" /> </Ellipse.Fill> </Ellipse>
Il risultato del codice presentato poco fa è rappresentato nella figura seguente.
Fig 5: figure complesse
Per disegnare usando il video, è richiesto del lavoro in più. Prima di tutto un oggetto VideoBrush non può eseguire video direttamente ma utilizza un'altra sorgente come un oggetto MediaElement. Nell'esempio sottostante, un video viene eseguito in primo piano. TextBlock.ForeGround utilizza un oggetto VideoBrush che a sua volta utilizza la sorgente video di un oggetto MediaElement.
<MediaElement Source="SteveBreastonCardinalsPuntReturn.wmv" Opacity="0" x:Name="CardVideo" /> <TextBlock Width="360" Height="96" Canvas.Left="64" Canvas.Top="32" TextWrapping="Wrap"><TextBlock.Foreground> <VideoBrush SourceName="CardVideo" /></TextBlock.Foreground><Run FontFamily="Segoe UI" FontSize="60" Text="Webucator"/> </TextBlock>
Il risultato del codice soprastante viene raffigurato qui di seguito.
Fig 6: esecuzione di un video testuale
Transformazioni
Gli oggetti Transformation vengono usati per trasfromare oggetti Shape. Alcune trasformazioni sono le rotazioni, le scalature, le traslazioni, ecc.
Il codice sottostante mostra come applicare una rotazione di 45 gradi di un TextBlock.
<TextBlock RenderTransformOrigin="0.5,0.5" Width="320"Height="80" Canvas.Left="80" Canvas.Top="104" TextWrapping="Wrap"> <TextBlock.RenderTransform> <TransformGroup><ScaleTransform ScaleX="1" ScaleY="1"/><SkewTransform AngleX="0" AngleY="0"/><RotateTransform Angle="45"/><TranslateTransform X="0" Y="0"/> </TransformGroup> </TextBlock.RenderTransform> <Run FontFamily="Segoe UI" FontSize="48" Text="Webucator"/></TextBlock>
Il risultato è il seguente.
Fig 7: applicazione di trasformazioni agli oggetti