Vue d’ensemble des transformationsTransforms overview

Apprenez à utiliser les transformations dans l’API Windows Runtime, en changeant le système de coordonnées relatives des éléments dans l’interface utilisateur.Learn how to use transforms in the Windows Runtime API, by changing the relative coordinate systems of elements in the UI. Cela permet de modifier l’apparence d’éléments XAML, par exemple avec la mise à l’échelle, la rotation ou la transformation de la position dans l’espace x-y.This can be used to adjust the appearance of individual XAML elements, such as scaling, rotating, or transforming the position in x-y space.

Qu’est-ce qu’une transformation ?What is a transform?

Une transformation définit la façon de mapper, ou transformer, les points d’un espace de coordonnées vers un autre espace de coordonnées.A transform defines how to map, or transform, points from one coordinate space to another coordinate space. Quand une transformation est appliquée à un élément d’interface utilisateur, elle modifie le rendu de cet élément d’interface utilisateur à l’écran.When a transform is applied to a UI element, it changes how that UI element is rendered to the screen as part of the UI.

On distingue quatre catégories de transformations : translation, rotation, mise à l’échelle et inclinaison.Think of transforms in four broad classifications: translation, rotation, scaling and skew (or shear). Pour pouvoir utiliser les API graphiques pour modifier l’apparence des éléments d’interface utilisateur, il est généralement plus facile de créer des transformations qui ne définissent qu’une seule opération à la fois.For the purposes of using graphics APIs to change the appearance of UI elements, it's usually easiest to create transforms that define only one operation at a time. Ainsi, Windows Runtime définit une classe discrète pour chacune de ces catégories de transformation :So the Windows Runtime defines a discrete class for each of these transform classifications:

Parmi elles, vous utiliserez sans doute plus souvent TranslateTransform et ScaleTransform dans vos scénario d’interface utilisateur.Of these, you're likely to use TranslateTransform and ScaleTransform most often for UI scenarios.

Vous pouvez combiner les transformations. Cette opération est prise en charge par deux classes Windows Runtime : CompositeTransform et TransformGroup.You can combine transforms, and there are two Windows Runtime classes that support this: CompositeTransform and TransformGroup. Dans CompositeTransform, les transformations sont appliquées dans l’ordre suivant : mise à l’échelle, inclinaison, rotation, translation.In a CompositeTransform, transforms are applied in this order: scale, skew, rotate, translate. Si vous voulez que les transformations soient appliquées dans un autre ordre, utilisez TransformGroup au lieu de CompositeTransform.Use TransformGroup instead of CompositeTransform if you want the transforms applied in a different order. Pour plus d’informations, voir CompositeTransform.For more info, see CompositeTransform.

Transformations et dispositionTransforms and layout

Dans une disposition XAML, les transformations sont appliquées après la passe de disposition. Ainsi, les calculs relatifs à l’espace disponible et les autres décisions relatives à la mise en page ont été effectués avant l’application des transformations.In XAML layout, transforms are applied after the layout pass is complete, so available space calculations and other layout decisions have been made before the transforms are applied. La disposition étant prioritaire, vous aurez parfois des résultats inattendus si vous transformez des éléments situés dans une cellule Grid ou tout conteneur de disposition similaire qui alloue de l’espace durant la disposition.Because layout comes first, you'll sometimes get unexpected results if you transform elements that are in a Grid cell or similar layout container that allocates space during layout. L’élément transformé peut paraître tronqué ou masqué, car il essaie de figurer dans une zone où n’ont pas été calculées les dimensions postérieures à la transformation durant la répartition de l’espace dans son conteneur parent.The transformed element may appear truncated or obscured because it's trying to draw into an area that didn't calculate the post-transform dimensions when dividing space within its parent container. Vous devrez peut-être tester les résultats des transformations et modifier certains paramètres.You may need to experiment with the transform results and adjust some settings. Par exemple, au lieu de vous fier à la disposition adaptative et au redimensionnement proportionnel, vous devrez peut-être modifier les propriétés Center ou déclarer des mesures de pixels fixes pour l’espace de disposition pour vous assurer que le parent alloue suffisamment d’espace.For example, instead of relying on adaptive layout and star sizing, you may need to change the Center properties or declare fixed pixel measurements for layout space to make sure the parent allots enough space.

Remarque concernant la migration : WPF (Windows Presentation Foundation) contenait une propriété LayoutTransform qui appliquait les transformations avant la passe de disposition.Migration note: Windows Presentation Foundation (WPF) had a LayoutTransform property that applied transforms prior to the layout pass. Toutefois, Windows Runtime XAML ne prend pas en charge la propriété LayoutTransform.But Windows Runtime XAML doesn't support a LayoutTransform property. (Microsoft Silverlight ne disposait pas non plus de cette propriété.)(Microsoft Silverlight didn't have this property either.)

En guise d’alternative, le kit de ressources Communauté Windows fournit LayoutTransformControl, qui applique des transformations de matrice sur n’importe quel FrameworkElement de votre application.As an alternative, the Windows Community Toolkit provides the LayoutTransformControl that applies Matrix transformations on any FrameworkElement of your application.

Application d’une transformation à un élément d’interface utilisateurApplying a transform to a UI element

Quand vous appliquez une transformation à un objet, vous avez généralement pour but de définir la propriété UIElement.RenderTransform.When you apply a transform to an object, you typically do so to set the property UIElement.RenderTransform. La définition de cette propriété ne change pas littéralement l’objet pixel par pixel.Setting this property does not literally change the object pixel by pixel. En fait, la propriété applique la transformation dans l’espace de coordonnées local où existe cet objet.What the property really does is apply the transform within the local coordinate space in which that object exists. Ensuite, la logique et l’opération de rendu (postérieures à la disposition) affichent les espaces de coordonnées combinés, ce qui donne l’impression que l’objet a changé d’apparence et éventuellement de disposition (si TranslateTransform a été appliqué).Then the rendering logic and operation (post-layout) renders the combined coordinate spaces, making it look like the object has changed appearance and also potentially its layout position (if TranslateTransform was applied).

Par défaut, chaque transformation d’affichage est centrée au point d’origine du système de coordonnées local de l’objet cible, (0,0).By default, each render transform is centered at the origin of the target object's local coordinate system—its (0,0). La seule exception est TranslateTransform, qui n’a aucune propriété de centrage à définir, car l’effet de translation est le même quel que soit son centre.The only exception is a TranslateTransform, which has no center properties to set because the translation effect is the same regardless of where it is centered. Mais les autres transformations ont chacune des propriétés qui définissent les valeurs CenterX et CenterY.But the other transforms each have properties that set CenterX and CenterY values.

Chaque fois que vous utilisez des transformations avec UIElement.RenderTransform, rappelez-vous qu’il existe une autre propriété pour UIElement qui a une influence sur le comportement de la transformation : RenderTransformOrigin.Whenever you use transforms with UIElement.RenderTransform, remember that there's another property on UIElement that affects how the transform behaves: RenderTransformOrigin. RenderTransformOrigin déclare si l’ensemble de la transformation doit s’appliquer au point par défaut (0,0) d’un élément ou à un autre point d’origine dans l’espace de coordonnées relatif de cet élément.What RenderTransformOrigin declares is whether the whole transform should apply to the default (0,0) point of an element or to some other origin point within the relative coordinate space of that element. Pour les éléments classiques, (0,0) place la transformation dans le coin supérieur gauche.For typical elements, (0,0) places the transform to the top left corner. Selon l’effet souhaité, vous pouvez choisir de changer RenderTransformOrigin au lieu de modifier les valeurs CenterX et CenterY des transformations.Depending on what effect you want, you might choose to change RenderTransformOrigin rather than adjusting the CenterX and CenterY values on transforms. Notez que si vous appliquez à la fois les valeurs RenderTransformOrigin et CenterX / CenterY, les résultats peuvent être assez déroutants, surtout si vous animez l’une des valeurs.Note that if you apply both RenderTransformOrigin and CenterX / CenterY values, the results can be pretty confusing, especially if you're animating any of the values.

Pour les besoins des tests de positionnement, un objet auquel une transformation est appliquée continue de répondre à l’entrée d’une manière attendue qui est cohérente avec son apparence visuelle dans l’espace x-y.For hit-testing purposes, an object to which a transform is applied continues to respond to input in an expected way that's consistent to its visual appearance in x-y space. Par exemple, si vous avez utilisé TranslateTransform pour déplacer un objet Rectangle de 400 pixels latéralement dans l’interface utilisateur, Rectangle répond aux événements PointerPressed quand l’utilisateur appuie à l’emplacement où Rectangle apparaît visuellement.For example, if you've used a TranslateTransform to move a Rectangle 400 pixels laterally in the UI, that Rectangle responds to PointerPressed events when the user presses the point where the Rectangle appears visually. Vous n’obtiendrez pas de faux événements si l’utilisateur appuie dans la zone où Rectangle se trouvait avant sa translation.You won't get false events if the user presses the area where the Rectangle was before being translated. En ce qui concerne les aspects relatifs à l’index Z qui affectent les tests de positionnement, l’application d’une transformation ne fait aucune différence. L’index Z, qui détermine l’élément qui gère les événements d’entrée pour un point de l’espace x-y, est toujours évalué en fonction de l’ordre enfant déclaré dans un conteneur.For any z-index considerations that affect hit testing, applying a transform makes no difference; the z-index that governs which element handles input events for a point in x-y space is still evaluated using the child order as declared in a container. Cet ordre est généralement le même que celui dans lequel vous déclarez les éléments en XAML. Toutefois, pour les éléments enfants d’un objet Canvas, vous pouvez modifier l’ordre en appliquant la propriété jointe Canvas.ZIndex aux éléments enfants.That order is usually the same as the order in which you declare the elements in XAML, although for child elements of a Canvas object you can adjust the order by applying the Canvas.ZIndex attached property to child elements.

Autres propriétés de transformationOther transform properties

  • Brush.Transform, Brush.RelativeTransform : Ces propriétés influencent la façon dont un élément Brush utilise l’espace de coordonnées dans la zone où le Brush est appliqué afin de définir des propriétés visuelles comme les premiers plans et les arrière-plans.Brush.Transform, Brush.RelativeTransform: These influence how a Brush uses coordinate space within the area that the Brush is applied to set visual properties such as foregrounds and backgrounds. Ces transformations ne sont pas pertinentes pour les pinceaux les plus courants (qui définissent généralement des couleurs unies avec SolidColorBrush), mais peuvent parfois être utiles quand vous peignez une zone avec un objet ImageBrush ou LinearGradientBrush.These transforms aren't relevant for the most common brushes (which are typically setting solid colors with SolidColorBrush) but might be occasionally useful when painting areas with an ImageBrush or LinearGradientBrush.
  • Geometry.Transform : Vous pouvez utiliser cette propriété pour appliquer une transformation à une figure géométrique avant d’utiliser cette dernière pour une valeur de propriété Path.Data.Geometry.Transform: You might use this property to apply a transform to a geometry prior to using that geometry for a Path.Data property value.

Animation d’une transformationAnimating a transform

Les objets Transform peuvent être animés.Transform objects can be animated. Pour animer un élément Transform, appliquez à la propriété que vous souhaitez animer une animation d’un type compatible.To animate a Transform, apply an animation of a compatible type to the property you want to animate. Cela signifie généralement que vous utilisez des objets DoubleAnimation ou DoubleAnimationUsingKeyFrames pour définir l’animation, car toutes les propriétés de transformation sont de type Double.This typically means you're using DoubleAnimation or DoubleAnimationUsingKeyFrames objects to define the animation, because all of the transform properties are of type Double. Les animations qui affectent une transformation utilisée pour une valeur UIElement.RenderTransform ne sont pas considérées comme étant des animations dépendantes, même si elles ont une durée non nulle.Animations that affect a transform that's used for a UIElement.RenderTransform value are not considered to be dependent animations, even if they have a nonzero duration. Pour plus d’informations sur les animations dépendantes, voir Animations dans une table de montage séquentiel.For more info about dependent animations, see Storyboarded animations.

Si vous animez des propriétés pour produire un effet comparable à une transformation en termes d’aspect visuel (par exemple l’animation de Width et Height pour un élément FrameworkElement au lieu de l’application d’un élément TranslateTransform), ces animations sont presque toujours traitées comme des animations dépendantes.If you animate properties to produce an effect similar to a transform in terms of the net visual appearance—for example, animating the Width and Height of a FrameworkElement rather than applying a TranslateTransform—such animations are almost always treated as dependent animations. Vous devez activer les animations. En outre, l’animation peut entraîner des problèmes de performances importants, surtout si vous essayez de prendre en charge l’interaction de l’utilisateur pendant l’animation de l’objet.You'd have to enable the animations and there could be significant performance issues with the animation, especially if you're trying to support user interaction while that object is being animated. C’est pourquoi il est préférable d’utiliser une transformation et de l’animer plutôt que d’animer toute autre propriété où l’animation serait traitée comme une animation dépendante.For that reason it's preferable to use a transform and animate it rather than animating any other property where the animation would be treated as a dependent animation.

Pour cibler la transformation, Transform doit exister en tant que valeur de RenderTransform.To target the transform, there must be an existing Transform as the value for RenderTransform. Généralement, vous devez placer un élément pour le type de transformation approprié dans le code XAML initial, parfois sans propriétés définies pour cette transformation.You typically put an element for the appropriate transform type in the initial XAML, sometimes with no properties set on that transform.

En principe, vous devez utiliser une technique de ciblage indirect pour appliquer des animations aux propriétés d’une transformation.You typically use an indirect targeting technique to apply animations to the properties of a transform. Pour plus d’informations sur la syntaxe du ciblage indirect, voir Animations dans une table de montage séquentiel et Syntaxe du chemin de propriété.For more info about indirect targeting syntax, see Storyboarded animations and Property-path syntax.

Les styles par défaut des contrôles définissent parfois les animations des transformations dans le cadre du comportement de leur état visuel.Default styles for controls sometimes define animations of transforms as part of their visual-state behavior. Par exemple, les états visuels de ProgressRing utilisent des valeurs RotateTransform animées pour « faire tourner » les points de l’anneau.For example, the visual states for ProgressRing use animated RotateTransform values to "spin" the dots in the ring.

Voici un exemple simple d’animation d’une transformation.Here's a simple example of how to animate a transform. Dans le cas présent, il s’agit d’animer l’élément Angle d’un objet RotateTransform pour faire tourner un Rectangle sur place autour de son centre visuel.In this case, it's animating the Angle of a RotateTransform to spin a Rectangle in place around its visual center. Comme cet exemple nomme RotateTransform, le ciblage d’animation indirect n’est pas nécessaire. Toutefois, vous pouvez omettre de nommer la transformation, nommer l’élément auquel la transformation s’applique et utiliser le ciblage indirect tel que (UIElement.RenderTransform).(RotateTransform.Angle).This example names the RotateTransform so doesn't need indirect animation targeting, but you could alternatively leave the transform unnamed, name the element that the transform's applied to, and use indirect targeting such as (UIElement.RenderTransform).(RotateTransform.Angle).

<StackPanel Margin="15">
  <StackPanel.Resources>
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
       Storyboard.TargetName="myTransform"
       Storyboard.TargetProperty="Angle"
       From="0" To="360" Duration="0:0:5" 
       RepeatBehavior="Forever" />
    </Storyboard>
  </StackPanel.Resources>
  <Rectangle Width="50" Height="50" Fill="RoyalBlue"
   PointerPressed="StartAnimation">
    <Rectangle.RenderTransform>
      <RotateTransform x:Name="myTransform" Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</StackPanel>
void StartAnimation (object sender, RoutedEventArgs e) {
    myStoryboard.Begin();
}

Prise en compte des systèmes de coordonnées de référence au moment de l’exécutionAccounting for coordinate frames of reference at run time

UIElement contient une méthode nommée TransformToVisual, qui peut générer un Transform qui met en corrélation les systèmes de coordonnées de référence pour deux éléments d’interface utilisateur.UIElement has a method named TransformToVisual, which can generate a Transform that correlates the coordinate frames of reference for two UI elements. Vous pouvez l’utiliser pour comparer un élément au système de coordonnées de référence par défaut de l’application, si vous passez l’élément visuel racine comme premier paramètre.You can use this to compare an element to the app's default coordinate frame of reference if you pass the root visual as the first parameter. Cela peut être utile si vous avez capturé l’événement d’entrée d’un élément distinct, ou si vous essayez de prévoir le comportement de disposition sans demander de passe de disposition.This can be useful if you've captured an input event from a different element, or if you are trying to predict layout behavior without actually requesting a layout pass.

Les données d’événement obtenues à partir des événements de pointeur permettent d’accéder à une méthode GetCurrentPoint, où vous pouvez spécifier un paramètre relativeTo afin de remplacer le système de coordonnées de référence par un élément spécifique au lieu de l’élément par défaut de l’application.Event data obtained from pointer events provides access to a GetCurrentPoint method, where you can specify a relativeTo parameter to change the coordinate frame of reference to a specific element rather than the app default. Cette approche permet d’appliquer une transformation par translation de manière interne et de transformer automatiquement les données de coordonnées x-y au moment de la création de l’objet PointerPoint renvoyé.This approach simply applies a translate transform internally and transforms the x-y coordinate data for you when it creates the returned PointerPoint object.

Description mathématique d’une transformationDescribing a transform mathematically

Une transformation peut être décrite en termes de matrice de transformation.A transform can be described in terms of a transformation matrix. Une matrice 3x3 permet de décrire les transformations dans un plan x-y en deux dimensions.A 3×3 matrix is used to describe the transformations in a two-dimensional, x-y plane. Les matrices de transformations affines peuvent être multipliées pour former un nombre quelconque de transformations linéaires, par exemple la rotation et l’inclinaison, puis la translation.Affine transformation matrices can be multiplied to form any number of linear transformations, such as rotation and skew (shear), followed by translation. La dernière colonne d’une matrice de transformation affine est égale à (0, 0, 1). Vous devez donc spécifier uniquement les membres des deux premières colonnes dans la description mathématique.The final column of an affine transformation matrix is equal to (0, 0, 1), so you need to specify only the members of the first two columns in the mathematical description.

La description mathématique d’une transformation peut vous être utile si vous avez des connaissances en mathématiques ou que vous êtes habitué aux techniques de programmation graphique qui utilisent également des matrices pour décrire les transformations de l’espace de coordonnées.The mathematical description of a transform might be useful to you if you have a mathematical background or a familiarity with graphics-programming techniques that also use matrices to describe transformations of coordinate space. Il existe une classe dérivée de Transform qui vous permet d’exprimer une transformation directement à partir de sa matrice 3x3 : MatrixTransform.There's a Transform-derived class that enables you to express a transformation directly in terms of its 3×3 matrix: MatrixTransform. MatrixTransform a une propriété Matrix, qui renferme une structure à six propriétés : M11, M12, M21, M22, OffsetX et OffsetY.MatrixTransform has a Matrix property, which holds a structure that has six properties: M11, M12, M21, M22, OffsetX and OffsetY. Chaque propriété Matrix utilise une valeur Double et correspond aux six valeurs pertinentes (colonnes 1 et 2) d’une matrice de transformation affine.Each Matrix property uses a Double value and corresponds to the six relevant values (columns 1 and 2) of an affine transformation matrix.

M11M11 M12M12 00
M21M21 M22M22 00
OffsetXOffsetX OffsetYOffsetY 11

Toute transformation que vous pouvez décrire avec un objet TranslateTransform, ScaleTransform, RotateTransform ou SkewTransform peut également être décrite par un objet MatrixTransform avec une valeur Matrix.Any transform that you could describe with a TranslateTransform, ScaleTransform, RotateTransform, or SkewTransform object could be described equally by a MatrixTransform with a Matrix value. Mais en général, vous n’utilisez que TranslateTransform et les autres, car il est plus facile de conceptualiser les propriétés de ces classes de transformation que de définir les composants de vecteur dans Matrix.But you typically just use TranslateTransform and the others because the properties on those transform classes are easier to conceptualize than setting the vector components in a Matrix. Il est également plus facile d’animer les propriétés discrètes des transformations. Matrix est en fait une structure, et non un objet DependencyObject ; c’est pourquoi il ne peut pas prendre en charge des valeurs individuelles animées.It's also easier to animate the discrete properties of transforms; a Matrix is actually a structure and not a DependencyObject, so it can't support animated individual values.

Certains outils de conception XAML qui vous permettent d’appliquer des opérations de transformation sérialisent les résultats en tant que MatrixTransform.Some XAML design tools that enable you to apply transformation operations will serialize the results as a MatrixTransform. Dans ce cas, il est peut-être préférable de réutiliser le même outil de conception pour changer l’effet de transformation et resérialiser le code XAML, au lieu d’essayer de manipuler les valeurs de Matrix vous-même directement dans le code XAML.In this case it may be best to use the same design tool again to change the transformation effect and serialize the XAML again, rather than trying to manipulate the Matrix values yourself directly in the XAML.

Transformations 3D3-D transforms

Dans Windows 10, XAML a introduit une nouvelle propriété, UIElement.Transform3D, qui peut être utilisée pour créer des effets 3D dans l’interface utilisateur.In Windows 10, XAML introduced a new property, UIElement.Transform3D, that can be used to create 3D effects with UI. Pour ce faire, utilisez PerspectiveTransform3D pour ajouter une perspective 3D partagée ou « caméra » à votre scène, puis utilisez CompositeTransform3D pour transformer un élément au sein d’un espace en 3D, comme si vous utilisiez CompositeTransform.To do this, use PerspectiveTransform3D to add a shared 3D perspective or "camera" to your scene, and then use CompositeTransform3D to transform an element in 3D space, like you would use CompositeTransform. Pour plus d’informations sur comment implémenter des transformations 3D, voir UIElement.Transform3D.See UIElement.Transform3D for a discussion of how to implement 3D transforms.

La propriété UIElement.Projection peut être utilisée pour des effets 3D plus simples s’appliquant à un objet unique.For simpler 3D effects that only apply to a single object, the UIElement.Projection property can be used. L’utilisation de PlaneProjection en tant que valeur de cette propriété revient à appliquer une transformation de perspective fixe et une ou plusieurs transformations 3D à l’élément.Using a PlaneProjection as the value for this property is equivalent to applying a fixed perspective transform and one or more 3D transforms to the element. Ce type de transformation est décrit de manière plus détaillée dans Effets de perspective 3D pour une interface utilisateur en XAML.This type of transform is described in more detail in 3-D perspective effects for XAML UI.

Rubriques connexesRelated topics