Procedura: specificare l'origine di una trasformazione utilizzando valori relativi

Aggiornamento: novembre 2007

In questo esempio viene illustrato come utilizzare valori relativi per specificare l'origine di una proprietà RenderTransform applicata a FrameworkElement.

Quando si utilizza la proprietà RenderTransform per ruotare, ridimensionare o inclinare un oggetto FrameworkElement, per impostazione predefinita la trasformazione viene applicata all'angolo superiore sinistro dell'elemento. Se si desidera eseguire la rotazione, il ridimensionamento o l'inclinazione dal centro dell'elemento, è possibile compensare impostando il centro della trasformazione sul centro dell'elemento. Tuttavia, questa soluzione richiede di conoscere le dimensioni dell'elemento. Per applicare una trasformazione al centro di un elemento in modo più semplice, è possibile impostare la relativa proprietà RenderTransformOrigin su (0,5, 0,5), anziché impostare un valore centrale sulla trasformazione stessa.

Esempio

Nell'esempio seguente viene utilizzato un oggetto RotateTransform per ruotare un oggetto Button di 45 gradi in senso orario. Poiché nell'esempio non viene specificato un centro, il pulsante ruota intorno al punto (0, 0), che corrisponde all'angolo superiore sinistro. L'oggetto RotateTransform viene applicato alla proprietà RenderTransform.

Nell'immagine seguente è illustrato il risultato della trasformazione per l'esempio che segue.

Rotazione di 45 gradi in senso orario tramite la proprietà RenderTransform

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Anche nell'esempio seguente viene utilizzato un oggetto RotateTransform per ruotare un oggetto Button di 45 gradi in senso orario, ma in questo caso la proprietà RenderTransformOrigin del pulsante a è impostata su (0,5, 0,5). Di conseguenza, la rotazione viene applicata al centro del pulsante anziché all'angolo superiore sinistro.

Nell'immagine seguente è illustrato il risultato della trasformazione per l'esempio che segue.

Rotazione di 45 gradi tramite la proprietà RenderTransform con RenderTransformOrigin di (0,5, 0,5)

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Per ulteriori informazioni sulla trasformazione di oggetti FrameworkElement, vedere Cenni preliminari sulle trasformazioni.

Vedere anche

Concetti

Cenni preliminari sulle trasformazioni

Riferimenti

Transform

Altre risorse

Procedure relative alle trasformazioni