Condividi tramite

Procedura: Capovolgere un oggetto UIElement orizzontalmente o verticalmente

  • Articolo

In questo esempio viene illustrato come usare un ScaleTransform per capovolgere un UIElement orizzontalmente o verticalmente. In questo esempio, un controllo Button (un tipo di UIElement) viene capovolto applicando un ScaleTransform alla relativa proprietà RenderTransform.

Illustrazione per invertire un pulsante

L'illustrazione seguente mostra il pulsante per capovolgere.

pulsante A senza trasformazione
UiElement da capovolgere

Di seguito viene illustrato il codice che crea il pulsante.

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

Illustrazione per capovolgere un pulsante orizzontalmente

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

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

un pulsante capovolto orizzontalmente attorno a (0,0)
Il pulsante dopo l'applicazione di ScaleTransform

Illustrazione per ribaltare un pulsante nella sua posizione

Come si può vedere dalla figura precedente, il pulsante è stato capovolto, ma è stato spostato anche. Questo perché il pulsante è stato capovolto dall'angolo superiore sinistro. Per capovolgere il pulsante, è necessario applicare il ScaleTransform al suo centro, non all'angolo. Un modo semplice per applicare il ScaleTransform al centro dei pulsanti 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>

Un pulsante capovolto orizzontalmente attorno al suo centro
Il pulsante con RenderTransformOrigin 0.5, 0.5

Illustrazione per capovolgere un pulsante verticalmente

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

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

un pulsante ribaltato verticalmente rispetto al suo centro
Il pulsante capovolto verticalmente

Vedere anche