Vue d'ensemble des transformations

Article
08/10/2011

Cette rubrique décrit comment utiliser les classes Transform 2-D pour faire pivoter, mettre à l'échelle, déplacer (appliquer une translation) et incliner des objets FrameworkElement.

Cette rubrique comprend les sections suivantes.

Qu'est-ce qu'une transformation ?
Classes de transformation
Propriétés de transformation courantes
Transformations et systèmes de coordonnées
Transformation d'un FrameworkElement
Exemple : faire pivoter un FrameworkElement de 45 degrés
Animation de transformations
Fonctionnalités Freezable
Rubriques connexes

Qu'est-ce qu'une transformation ?

Un Transform définit la manière de mapper, ou transformer, des points d'un espace de coordonnées à un autre. Ce mappage est décrit par une Matrix de transformation, c'est-à-dire une collection de trois lignes avec trois colonnes de valeurs Double.

Remarque
Windows Presentation Foundation (WPF) utilise des matrices ligne-champ.Les vecteurs sont exprimés sous la forme ligne-vecteurs, et non colonne-vecteurs.

Le tableau suivant montre la structure d'une matrice WPF.

Matrice de transformation 2D

M11

Valeur par défaut : 1.0

M12

Valeur par défaut : 0.0

0.0

M21

Valeur par défaut : 0.0

M22

Valeur par défaut : 1.0

0.0

OffsetX

Valeur par défaut : 0.0

OffsetY

Valeur par défaut : 0.0

1.0

En manipulant des valeurs de matrice, vous pouvez faire pivoter, mettre à l'échelle, incliner et déplacer (appliquer une translation) un objet. Par exemple, si vous remplacez la valeur de la troisième ligne de la première colonne (la valeur OffsetX) par 100, vous pouvez l'utiliser pour déplacer un objet de 100 unités sur l'axe x. Si vous remplacez la valeur de la deuxième ligne de la deuxième colonne par 3, vous pouvez l'utiliser pour étirer un objet à trois fois sa hauteur actuelle. Si vous modifiez les deux valeurs, vous déplacez l'objet de 100 unités le long de l'axe X et étirez sa hauteur selon un facteur de 3. Étant donné que Windows Presentation Foundation (WPF) prend uniquement en charge les transformations affines, les valeurs dans la colonne de droite sont toujours 0, 0, 1.

Bien que Windows Presentation Foundation (WPF) vous permette de manipuler directement des valeurs de matrice, il fournit également plusieurs classes Transform qui vous permettent de transformer un objet sans connaître la configuration de la structure de la matrice sous-jacente. Par exemple, la classe ScaleTransform vous permet de mettre un objet à l'échelle en définissant ses propriétés ScaleX et ScaleY, au lieu de manipuler une matrice de transformation. La classe RotateTransform vous permet également de faire pivoter un objet en définissant simplement sa propriété Angle.

Classes de transformation

Pour les opérations de transformation courantes, Windows Presentation Foundation (WPF) fournit les classes Transform 2-D suivantes :

Classe	Description	Exemple
RotateTransform	Fait pivoter un élément selon l'Angle spécifié.	Comment : faire pivoter un objet
ScaleTransform	Met à l'échelle un élément selon les valeurs ScaleX et ScaleY spécifiées.	Comment : mettre à l'échelle un élément
SkewTransform	Incline un élément selon les valeurs AngleX et AngleY spécifiées.	Comment : incliner un élément
TranslateTransform	Déplace (applique une translation) un élément selon les valeurs X et Y spécifiées.	Comment : traduire un élément

Pour créer des transformations plus complexes, Windows Presentation Foundation (WPF) fournit les deux classes suivantes :

Classe	Description	Exemple
TransformGroup	Regroupe plusieurs objets TransformGroup en un seul Transform, que vous pouvez ensuite appliquer pour transformer des propriétés.	Comment : appliquer plusieurs transformations à un objet
MatrixTransform	Crée des transformations personnalisées qui ne sont pas fournies par les autres classes Transform. Lorsque vous utilisez un MatrixTransform, vous manipulez directement une matrice.	Comment : utiliser un MatrixTransform pour créer des transformations personnalisées

Windows Presentation Foundation (WPF) fournit également des transformations 3-D. Pour plus d'informations, consultez la classe Transform3D.

Propriétés de transformation courantes

L'une des manières de transformer un objet est de déclarer le type Transform approprié et de l'appliquer à la propriété de transformation de l'objet. Les différents types d'objets ont différents types de propriétés de transformation. Le tableau suivant répertorie plusieurs types Windows Presentation Foundation (WPF) et leurs propriétés de transformation les plus souvent utilisés.

Type	Propriétés de transformation
Brush	Transform, RelativeTransform
ContainerVisual	Transform
DrawingGroup	Transform
FrameworkElement	RenderTransform, LayoutTransform
Geometry	Transform
TextEffect	Transform
UIElement	RenderTransform

Transformations et systèmes de coordonnées

Lorsque vous transformez un objet, vous ne transformez pas uniquement l'objet, vous transformez également l'espace de coordonnées dans lequel cet objet existe. Par défaut, une transformation est centrée à l'origine du système de coordonnées de l'objet cible : (0,0). La seule exception est TranslateTransform ; un TranslateTransform n'a pas de propriétés de centre à définir parce que l'effet de translation est le même indépendamment du centre.

L'exemple suivant utilise une classe RotateTransform pour faire pivoter un élément Rectangle (type d'objet FrameworkElement) de 45 degrés par rapport à son centre par défaut (0, 0). L'illustration suivante présente l'effet de la rotation.

Élément Rectangle tourné à 45 degrés par rapport au point (0,0)

FrameworkElement pivoté de 45 degrés autour de (0,0)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Par défaut, l'élément pivote par rapport à son angle supérieur gauche, (0, 0). Les classes RotateTransform, ScaleTransform et SkewTransform fournissent les propriétés CenterX et CenterY qui vous permettent de spécifier le point au niveau duquel la transformation est appliquée.

L'exemple suivant utilise également un RotateTransform pour faire pivoter un élément Rectangle de 45 degrés ; cependant, cette fois, les propriétés CenterX et CenterY sont définies de sorte que le centre de RotateTransform ait la valeur (25, 25). L'illustration suivante présente l'effet de la rotation.

Élément Rectangle tourné à 45 degrés par rapport au point (25,25)

Geometry pivoté de 45 degrés autour de (25, 25)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Transformation d'un FrameworkElement

Pour appliquer des transformations à un FrameworkElement, créez un Transform et appliquez-le à l'une des deux propriétés fournies par la classe FrameworkElement :

LayoutTransform - Transformation appliquée avant la passe de disposition. Après que la transformation a été appliquée, le système de disposition traite la taille et la position transformées de l'élément.
RenderTransform - Transformation modifiant l'apparence de l'élément mais ne s'appliquant qu'une fois la passe de disposition terminée. En utilisant la propriété RenderTransform au lieu de la propriété LayoutTransform, vous pouvez obtenir des avantages de performance.

Quelle propriété faut-il utiliser ? Étant donné les avantages de performance qu'elle fournit, utilisez le plus possible la propriété RenderTransform, surtout lorsque vous utilisez des objets Transform animés. Utilisez la propriété LayoutTransform pour mettre à l'échelle, faire pivoter ou incliner un élément. Pour ajuster la taille transformée de l'élément, vous aurez besoin du parent de l'élément. Notez que, lorsqu'ils sont utilisés avec la propriété LayoutTransform, les objets TranslateTransform semblent n'avoir aucun effet sur les éléments. Cela est dû au fait que le système de disposition renvoie l'élément translaté à sa position d'origine lors de son traitement.

Pour plus d'informations sur la disposition dans Windows Presentation Foundation (WPF), consultez la vue d'ensemble Système de disposition.

Exemple : faire pivoter un FrameworkElement de 45 degrés

L'exemple suivant utilise un RotateTransform pour faire pivoter un bouton de 45 degrés dans le sens horaire. Le bouton est contenu dans un StackPanel qui comporte deux autres boutons.

Par défaut, un RotateTransform pivote par rapport au point (0, 0). Étant donné que l'exemple ne spécifie pas de valeur 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 affiche le résultat de la transformation.

Rotation de 45 degrés dans le sens des aiguilles d'une montre, à partir de l'angle supérieur gauche

Bouton transformé à l'aide de 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 bouton de 45 degrés dans le sens horaire, mais il définit également le RenderTransformOrigin du bouton à (0.5, 0.5). La valeur de la propriété RenderTransformOrigin est en rapport avec la taille du bouton. Par conséquent, la rotation est appliquée au centre du bouton, plutôt qu'à l'angle supérieur gauche. L'illustration suivante affiche le résultat de la transformation.

Rotation de 45 degrés dans le sens des aiguilles d'une montre, par rapport au centre

Bouton transformé autour de son centre

<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>

L'exemple suivant utilise la propriété LayoutTransform au lieu de la propriété RenderTransform pour faire pivoter le bouton. Dans ce cas, la transformation affecte la disposition du bouton, ce qui déclenche une passe entière par le système de disposition. Par conséquent, le bouton pivote, puis est repositionné car sa taille a été modifiée. L'illustration suivante affiche le résultat de la transformation.

LayoutTransform utilisé pour faire pivoter le bouton

Bouton transformé à l'aide de LayoutTransform

<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.LayoutTransform>
        <RotateTransform Angle="45"  />
      </Button.LayoutTransform>
    </Button>   
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Animation de transformations

Étant donné qu'elles héritent de la classe Animatable, les classes Transform peuvent être animées. Pour animer un Transform, appliquez l'animation d'un type compatible à la propriété que vous souhaitez animer.

L'exemple suivant utilise un Storyboard et un DoubleAnimation avec un RotateTransform pour faire tourner un Button sur place lorsque vous cliquez dessus.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>



    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

Pour l'exemple complet, consultez Transformations 2D, exemple. Pour plus d'informations sur les animations, consultez Vue d'ensemble de l'animation.

Fonctionnalités Freezable

Comme elle hérite de la classe Freezable, la classe Transform fournit plusieurs fonctionnalités spéciales : les objets Transform peuvent être déclarés comme ressources, partagés entre de nombreux objets, clonés, configurés en lecture seule pour améliorer les performances et rendus thread-safe. Pour plus d'informations sur les différentes fonctionnalités fournies par les objets Freezable, consultez Vue d'ensemble des objets Freezable.