Comment : spécifier l'origine d'une transformation à l'aide de valeurs relatives

Mise à jour : novembre 2007

Cet exemple montre comment utiliser des valeurs relatives pour spécifier l'origine d'un RenderTransform appliqué à un FrameworkElement.

Lorsque vous faites pivoter, mettez à l'échelle ou inclinez un FrameworkElement en utilisant la propriété RenderTransform, le paramètre par défaut applique la transformation à l'angle supérieur gauche de l'élément. Si vous souhaitez faire pivoter, mettre à l'échelle ou appliquer une inclinaison à partir du centre de l'élément, vous pouvez compenser en affectant au centre de la transformation le centre de l'élément. Toutefois, cette solution requiert que vous connaissiez la taille de l'élément. Une façon plus simple d'appliquer une transformation au centre d'un élément consiste à affecter à sa propriété RenderTransformOrigin les valeurs (0.5, 0.5), au lieu de définir une valeur de centre sur la transformation elle-même.

Exemple

L'exemple suivant utilise un RotateTransform pour faire pivoter un Button à 45 degrés dans le sens des aiguilles d'une montre. Étant donné que l'exemple ne spécifie pas de centre, le bouton pivote par rapport au point (0, 0), qui est son angle supérieur gauche. Le RotateTransform est appliqué à la propriété RenderTransform.

L'illustration suivante montre le résultat de la transformation pour l'exemple qui suit.

Rotation de 45 degrés dans le sens des aiguilles d'une montre à l'aide de la propriété 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>

L'exemple suivant utilise également un RotateTransform pour faire pivoter un Button à 45 degrés dans le sens des aiguilles d'une montre ; toutefois, cet exemple affecte au RenderTransformOrigin du bouton les valeurs (0.5, 0.5). Par conséquent, la rotation est appliquée au centre du bouton, au lieu de l'angle supérieur gauche.

L'illustration suivante montre le résultat de la transformation pour l'exemple qui suit.

Rotation de 45 degrés à l'aide de la propriété RenderTransform avec un RenderTransformOrigin de (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>

Pour plus d'informations sur la transformation d'objets FrameworkElement, consultez Vue d'ensemble des transformations.

Voir aussi

Concepts

Vue d'ensemble des transformations

Référence

Transform

Autres ressources

Rubriques Comment relatives aux transformations