Procedura: ridimensionare un elemento
Aggiornamento: novembre 2007
In questo esempio viene illustrato come utilizzare ScaleTransform per ridimensionare un elemento.
Utilizzare le proprietà ScaleX e ScaleY per ridimensionare l'elemento in base al fattore specificato. Ad esempio un valore di ScaleX pari a 1,5 estendel'elemento fino al 150% della larghezza originale. Un valore di ScaleY pari a 0,5 riduce l'altezza di un elemento del 50%.
Utilizzare le proprietà CenterX e CenterY per specificare il punto centrale dell'operazione di ridimensionamento. Per impostazione predefinita, ScaleTransform viene centrato in corrispondenza del punto (0,0) che corrisponde all'angolo superiore sinistro del rettangolo. Ne consegue che l'elemento viene spostato e appare più grande, poiché quando si applica Transform viene modificato lo spazio delle coordinate in cui risiede l'oggetto.
Nell'esempio riportato di seguito viene utilizzato ScaleTransform per raddoppiare le dimensioni di un oggetto Rectangle 50 x 50. ScaleTransform ha un valore pari a 0 (impostazione predefinita) sia per CenterX, sia per CenterY.
Esempio
<!-- Scales a rectangle by 200% from a center of (0,0).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2" />
</Rectangle.RenderTransform>
</Rectangle>
In genere, CenterX e CenterY vengono impostati sul centro dell'oggetto ridimensionato: (Width/2, Height/2).
Nell'esempio riportato di seguito viene illustrato un altro oggetto Rectangle con le dimensioni raddoppiate, benché ScaleTransform presenti un valore di 25 per CenterX e CenterY, che corrisponde al centro del rettangolo.
<!-- Scales a rectangle by 200% from a center of (25,25).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2" />
</Rectangle.RenderTransform>
</Rectangle>
Nella figura riportata di seguito viene illustrata la differenza tra le due operazioni ScaleTransform. La linea punteggiata indica la dimensione e la posizione del rettangolo prima del ridimensionamento.
Due operazioni ScaleTransform con valori ScaleX e ScaleY identici, ma con centri diversi
.gif)
Per l'esempio completo, vedere Esempio di trasformazioni bidimensionali.
Vedere anche
Concetti
Cenni preliminari sulle trasformazioni