Vue d'ensemble des transformations
Mise à jour : novembre 2007
Cette rubrique décrit comment utiliser les classes Transform 2D 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.
.gif "Remarque") Remarque : |
|---|
Comme Microsoft, 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
|
Valeur par défaut : 1.0 |
Valeur par défaut : 0.0 |
0.0 |
|
Valeur par défaut : 0.0 |
Valeur par défaut : 1.0 |
0.0 |
|
Valeur par défaut : 0.0 |
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 sur l'axe x et vous multipliez sa hauteur par 3. Étant donné que Windows Presentation Foundation (WPF) prend uniquement en charge les transformations affines, les valeurs de la colonne de droite sont toujours 0, 0 et 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 2D suivantes :
Classe |
Description |
Exemple |
Illustration |
|---|---|---|---|
Fait pivoter un élément selon l'Angle spécifié. |
|
||
Met à l'échelle un élément selon les valeurs ScaleX et ScaleY spécifiées. |
|
||
Incline un élément selon les valeurs AngleX et AngleY spécifiées. |
|
||
Déplace (applique une translation) un élément selon les valeurs X et Y spécifiées. |
|
.png)
.png)
.png)
.png)
Pour créer des transformations plus complexes, Windows Presentation Foundation (WPF) fournit les deux classes suivantes :
Classe |
Description |
Exemple |
|---|---|---|
Regroupe plusieurs objets TransformGroup en un seul Transform, que vous pouvez ensuite appliquer pour transformer des propriétés. |
||
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 3D. 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 |
|---|---|
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). Seule exception : TranslateTransform ; un TranslateTransform n'a pas de propriété de centre à définir car l'effet de translation est le même quel que soit l'endroit où il est centré.
L'exemple suivant utilise un RotateTransform pour faire pivoter un élément Rectangle, un type de FrameworkElement, de 45 degrés par rapport à son centre par défaut, soit (0,0). L'illustration suivante montre l'effet de la rotation.
Élément Rectangle tourné à 45 degrés par rapport au point (0,0)
.png)
<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, la rotation de l'élément s'effectue dans l'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 auquel la transformation est appliquée.
L'exemple suivant utilise également 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 montre l'effet de la rotation.
Élément Rectangle tourné à 45 degrés par rapport au point (25,25)
.png)
<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 des aiguilles d'une montre. Le bouton est contenu dans un StackPanel doté de 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 pour le centre, le bouton pivote par rapport au point (0,0), soit l'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
.png)
<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 à 45 degrés dans le sens des aiguilles d'une montre, mais il donne également la valeur (0.5,0.5) au RenderTransformOrigin du bouton. La valeur de la propriété RenderTransformOrigin est relative à 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
.png)
<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
.png)
<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.