Condividi tramite

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

  • Articolo

In questo esempio viene illustrato come utilizzare valori relativi per specificare l'origine di un RenderTransform oggetto applicato a un oggetto FrameworkElement.

Quando si ruota, si ridimensiona o si asimmetria un FrameworkElement utilizzando la RenderTransform proprietà , l'impostazione predefinita applica la trasformazione all'angolo superiore sinistro dell'elemento. Se si desidera ruotare, ridimensionare o inclinare dal centro dell'elemento, è possibile compensare impostando il centro della trasformazione sul centro dell'elemento. Tuttavia, questa soluzione prevede che si conoscano le dimensioni dell'elemento. Un modo più semplice per applicare una trasformazione al centro di un elemento consiste nell'impostare la relativa RenderTransformOrigin proprietà 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 valore Button di 45 gradi in senso orario. Poiché l'esempio non specifica un centro, il pulsante ruota intorno al punto (0, 0), ovvero l'angolo superiore sinistro. L'oggetto RotateTransform viene applicato alla RenderTransform proprietà .

La figura seguente mostra il risultato della trasformazione per l'esempio che segue.

A button transformed using RenderTransform
Rotazione in senso orario di 45 gradi usando 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>

Nell'esempio seguente viene inoltre utilizzato un oggetto RotateTransform per ruotare un Button valore di 45 gradi in senso orario. In questo esempio viene tuttavia impostato su RenderTransformOrigin (0,5, 0,5). Di conseguenza, la rotazione viene applicata al centro del pulsante anziché all'angolo superiore sinistro.

La figura seguente mostra il risultato della trasformazione per l'esempio che segue.

A button transformed about its center
Rotazione di 45 gradi usando la proprietà RenderTransform con RenderTransformOrigin del valore 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 altre informazioni sulla trasformazione di FrameworkElement oggetti, vedere Cenni preliminari sulle trasformazioni.

Vedi anche