Procedura: ridimensionare un elemento

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

Per l'esempio completo, vedere Esempio di trasformazioni bidimensionali (la pagina potrebbe essere in inglese).

Vedere anche

Riferimenti

Transform

ScaleTransform

Concetti

Cenni preliminari sulle trasformazioni

Altre risorse

Procedure relative alle trasformazioni