Procedura: capovolgere un oggetto UIElement orizzontalmente o verticalmente

In questo esempio viene illustrato come utilizzare ScaleTransform per capovolgere UIElement orizzontalmente o verticalmente. In questo esempio un controllo Button (un tipo di UIElement) viene capovolto mediante l'applicazione di ScaleTransform alla relativa proprietà RenderTransform.

Esempio

Nella figura riportata di seguito viene illustrato il pulsante da capovolgere.

UIElement da capovolgere

Di seguito viene illustrato il codice tramite cui viene creato il pulsante.

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

Per capovolgere il pulsante orizzontalmente, creare ScaleTransform e impostarne la proprietà ScaleX su -1. Applicare ScaleTransform alla proprietà RenderTransform del pulsante.

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

Pulsante dopo l'applicazione di ScaleTransform

Nella figura precedente si nota che il pulsante è stato capovolto, ma anche spostato. Questo risultato è dovuto al fatto che il pulsante è stato capovolto dall'angolo superiore sinistro. Per capovolgere il pulsante senza spostarlo, applicare ScaleTransform al centro, non all'angolo. Un modo semplice per applicare ScaleTransform al centro del pulsante consiste nell'impostare la proprietà RenderTransformOrigin del pulsante su 0.5, 0.5.

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

Pulsante con proprietà RenderTransformOrigin di 0.5, 0.5

Per capovolgere il pulsante verticalmente, impostare la proprietà ScaleY dell'oggetto ScaleTransform, anziché la proprietà ScaleX.

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

Pulsante capovolto verticalmente

Vedere anche

Concetti

Cenni preliminari sulle trasformazioni