Lavora con noi

ASP.Net

Siti tematici

Pagine:

RSS

Elementi di grafica con XAML

di: Luigi Corrias 19 Settembre 2007

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

Figura 1. Sistema di coordinate

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

Canvas annidati

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:

Definire le figure di base

Figura 2. Le classiche forme

<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.