Procedura: capovolgere un oggetto UIElement orizzontalmente o verticalmenteHow to: Flip a UIElement Horizontally or Vertically

In questo esempio viene illustrato come utilizzare un ScaleTransform scorrere un UIElement orizzontalmente o verticalmente.This example shows how to use a ScaleTransform to flip a UIElement horizontally or vertically. In questo esempio, un Button controllo (un tipo di UIElement) viene capovolta applicando un ScaleTransform al relativo RenderTransform proprietà.In this example, a Button control (a type of UIElement) is flipped by applying a ScaleTransform to its RenderTransform property.

EsempioExample

Nella figura seguente viene illustrato il pulsante da capovolgere.The following illustration shows the button to flip.

Un pulsante senza trasformazioniA button with no transform
UIElement da capovolgereThe UIElement to flip

Di seguito viene illustrato il codice che crea il pulsante.The following shows the code that creates the button.

<Button Content="Flip me!" Padding="5">
</Button>

EsempioExample

Per invertire il pulsante orizzontalmente, creare un ScaleTransform e impostare il relativo ScaleX proprietà su -1.To flip the button horizontally, create a ScaleTransform and set its ScaleX property to -1. Applicare il ScaleTransform al pulsante RenderTransform proprietà.Apply the ScaleTransform to the button's RenderTransform property.

<Button Content="Flip me!" Padding="5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

Pulsante capovolto orizzontalmente (0,0)A button flipped horizontally about (0,0)
Pulsante dopo l'applicazione di ScaleTransformThe button after applying the ScaleTransform

EsempioExample

Come si vede nella figura precedente, il pulsante è stato capovolta, ma anche spostato.As you can see from the previous illustration, the button was flipped, but it was also moved. Ciò avviene perché il pulsante è stato capovolto dall'angolo superiore sinistro.That's because the button was flipped from its top left corner. Per invertire il pulsante sul posto, si desidera applicare il ScaleTransform al centro, non all'angolo.To flip the button in place, you want to apply the ScaleTransform to its center, not its corner. Un modo semplice per applicare il ScaleTransform ai pulsanti center consiste nell'impostare il pulsante RenderTransformOrigin proprietà su 0,5, 0,5.An easy way to apply the ScaleTransform to the buttons center is to set the button's RenderTransformOrigin property to 0.5, 0.5.

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleX="-1" />
  </Button.RenderTransform>
</Button>

Pulsante capovolto orizzontalmente rispetto al proprio centroA button flipped horizontally about its center
Il pulsante con RenderTransformOrigin pari a 0,5, 0,5The button with a RenderTransformOrigin of 0.5, 0.5

EsempioExample

Per capovolgere verticalmente il pulsante, impostare il ScaleTransform dell'oggetto ScaleY proprietà invece della relativa ScaleX proprietà.To flip the button vertically, set the ScaleTransform object's ScaleY property instead of its ScaleX property.

<Button Content="Flip me!" Padding="5"
  RenderTransformOrigin="0.5,0.5">
  <Button.RenderTransform>
    <ScaleTransform ScaleY="-1" />
  </Button.RenderTransform>
</Button>

Pulsante capovolto verticalmente rispetto al proprio centroA button flipped vertically about its center
Pulsante capovolto verticalmenteThe vertically flipped button

Vedere ancheSee Also

Cenni preliminari sulle trasformazioniTransforms Overview