Oggetti per le trasformazioni
In XAML è possibile modificare l'aspetto di molti oggetti attraverso i transformers quali:
- RotateTransform: rotazioni;
- ScaleTransform: ingrandimenti e riduzioni;
- SkewTransform: distorsioni;
- TranslateTransform: scostamenti;
- MatrixTransform: trasformazioni personalizzate.
Agli oggetti Shape,TextBlock, Image, ecc. è possibile applicare una trasformazione utilizzando la proprietà RenderTransform attraverso la nota sintassi delle Property Element:
<Canvas x:Name="Transformers">
<Rectangle Width="150" Height="100" Fill="Green" RenderTransformOrigin="0.5,0.5" Canvas.Left="20" Canvas.Top="32">
<Rectangle.RenderTransform>
<RotateTransform Angle="20"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
In questo esempio il rettangolo è ruotato di 20 gradi attraverso l'oggetto RotateTransform, è importante notare come i valori delle Attached Properties Canvas.Left e Canvas.Top si riferiscano alla posizione dell'oggetto precedente alla rotazione.
La proprietà RenderTransformOrigin imposta il punto di origine della trasformazione, essa accetta due valori che rappresentano una posizione percentuale relativa rispetto all'oggetto stesso: il valore 0.5,0.5 indica che il punto di origine si trova a metà della larghezza ed a metà dell'altezza. Tale valore può eccedere l'unità (100%) o essere negativo qualora il punto sia fuori dal perimetro dell'oggetto.
ScaleTransform e SkewTransform seguono gli stessi principi di RotateTransform, gestendo rispettivamente grandezza percentuale e distorsione angolare di un oggetto, TranslateTransform è molto utile per scostare un oggetto senza modificare le sue coordinate, TranslateTransform è indispensabile nel caso della gestione della posizione di un riempimento Brush.
<Ellipse Width="180" Height="180" Canvas.Left="150" Canvas.Top="250">
<Ellipse.Fill>
<RadialGradientBrush>
<RadialGradientBrush.Transform>
<TranslateTransform X="-50" Y="-50"/>
</RadialGradientBrush.Transform>
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFB12D2D" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
Con oggetti di tipo Geometry è possibile utilizzare la proprietà RelativeTransform , essa consente l'inserimento di valori di trasformazione percentuali relativi alla grandezza dell'oggetto stesso, usando RelativeTransform il codice dell'esempio precedente diventerebbe così:
<Ellipse Width="180" Height="180" Canvas.Left="150" Canvas.Top="250">
<Ellipse.Fill>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TranslateTransform X="-0.3" Y="-0.3"/>
</RadialGradientBrush.RelativeTransform >
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFB12D2D" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
L'oggetto MatrixTransform consente di combinare e personalizzare gli effetti dei precedenti transformers attraverso l'inserimento di valori in una matrice 3x3.
<Rectangle Width="150" Height="100" Stroke="#FF000000" RadiusX="10" RadiusY="10">
<Rectangle.RenderTransform>
<MatrixTransform>
<MatrixTransform.Matrix>
<Matrix M11="1" M12="-1" M21="1" M22="1" OffsetX="0" OffsetY="0" />
</MatrixTransform.Matrix>
</MatrixTransform>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FF2D45B1" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
MatrixTransform è l'unico oggetto di trasformazione che è utilizzabile attraverso un Type Converter con sintassi corrispondente a RenderTransform="M11, M12, M21, M22, OffsetX, OffsetY" , lo stesso risultato del codice precedente può essere riprodotto con il più sintetico RenderTransform="1,-1,1,1,0,0".
Attenzione: Questo articolo contiene un allegato
Contenuti dell'articolo
- Pagina 1
- Pagina 2
- Pagina 3
- Pagina 5
Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.
Difficoltà
Stampa 
Download
10annidi.ASPItalia.com: iscriviti alla competizione e vinci fantastici premi ogni mese!
