Comment : retourner un UIElement horizontalement ou verticalement

Cet exemple explique comment utiliser ScaleTransform pour retourner un UIElement horizontalement ou verticalement. Dans cet exemple, un contrôle Button (un type de UIElement) est retourné en appliquant un ScaleTransform à sa propriété RenderTransform.

Exemple

L'illustration suivante indique le bouton à retourner.

UIElement à retourner

Le code ci-dessous permet de créer le bouton.

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

Pour retourner le bouton horizontalement, créez un ScaleTransform et affectez la valeur -1 à sa propriété ScaleX. Appliquez ScaleTransform à la propriété RenderTransform du bouton.

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

Bouton après l'application de ScaleTransform

Comme vous pouvez le constater dans l'illustration ci-dessus, le bouton a été retourné, mais il a également été déplacé, car il a été retourné à partir de son coin supérieur gauche. Pour retourner le bouton, vous souhaitez appliquer ScaleTransform à son centre plutôt qu'à son coin. Pour appliquer ScaleTransform au centre du bouton, la méthode la plus simple consiste à définir la propriété RenderTransformOrigin du bouton sur 0.5, 0.5.

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

Bouton avec un RenderTransformOrigin de 0.5, 0.5

Pour retourner le bouton verticalement, définissez la propriété ScaleY de l'objet ScaleTransform au lieu de sa propriété ScaleX.

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

Bouton retourné verticalement

Voir aussi

Concepts

Vue d'ensemble des transformations