Vue d’ensemble des transformations

Découvrez comment utiliser des transformations dans l’API Windows Runtime en modifiant les systèmes de coordonnées relatifs d’éléments de l’interface utilisateur. Cela peut être utilisé pour ajuster l’apparence d’éléments XAML individuels, tels que la mise à l’échelle, la rotation ou la transformation de la position dans l’espace x-y.

Qu’est-ce qu’une transformation ?

Une transformation définit comment mapper ou transformer des points d’un espace de coordonnées à un autre espace de coordonnées. Lorsqu’une transformation est appliquée à un élément d’interface utilisateur, elle modifie la façon dont cet élément d’interface utilisateur est rendu à l’écran dans le cadre de l’interface utilisateur.

Considérez les transformations en quatre classifications générales : translation, rotation, mise à l’échelle et cisaillement. Pour les besoins de l’utilisation d’API graphiques pour modifier l’apparence des éléments d’interface utilisateur, il est généralement plus simple de créer des transformations qui définissent une seule opération à la fois. Par conséquent, Windows Runtime définit une classe discrète pour chacune de ces classifications de transformation :

• TranslateTransform : traduit un élément dans l’espace x-y, en définissant des valeurs pour X et Y.
• ScaleTransform : met à l’échelle la transformation en fonction d’un point central, en définissant des valeurs pour CenterX, CenterY, ScaleX et ScaleY.
• RotateTransform : fait pivoter dans l’espace x-y, en définissant des valeurs pour Angle, CenterX et CenterY.
• SkewTransform: inclinant ou cisaillement dans l'espace x-y, en définissant des valeurs pour AngleX, AngleY, CenterX et CenterY.

Parmi ceux-ci, vous êtes susceptible d’utiliser TranslateTransform et ScaleTransform le plus souvent pour les scénarios d’interface utilisateur.

Vous pouvez combiner des transformations et il existe deux classes Windows Runtime qui prennent en charge ceci : CompositeTransform et TransformGroup. Dans un CompositeTransform, les transformations sont appliquées dans cet ordre : mise à l’échelle, asymétrie, rotation, translation. Utilisez TransformGroup au lieu de CompositeTransform si vous souhaitez que les transformations soient appliquées dans un ordre différent. Pour plus d’informations, consultez CompositeTransform.

Transformations et disposition

Dans la disposition XAML, les transformations sont appliquées une fois la passe de disposition terminée, de sorte que les calculs d’espace disponibles et d’autres décisions de disposition ont été pris avant l’application des transformations. Étant donné que la disposition est en premier lieu, vous obtiendrez parfois des résultats inattendus si vous transformez des éléments qui se trouvent dans une cellule Grid ou un conteneur de disposition similaire qui alloue de l’espace pendant la disposition. L’élément transformé peut apparaître tronqué ou masqué, car il tente de dessiner dans une zone qui n’a pas calculé les dimensions post-transformation lors de la division de l’espace dans son conteneur parent. Vous devrez peut-être expérimenter les résultats de la transformation et ajuster certains paramètres. Par exemple, au lieu de compter sur une disposition adaptative et un dimensionnement étoilé, vous devrez peut-être modifier les propriétés Center ou déclarer des mesures de pixel fixes pour l’espace de disposition afin de vous assurer que l'allocation d'espace par l'objet parent est suffisante.

note de migration : Windows Presentation Foundation (WPF) a une propriété LayoutTransform qui applique des transformations avant le passage de disposition. Toutefois, le code XAML de Windows Runtime n'est pas compatible avec une propriété LayoutTransform. (Microsoft Silverlight n’a pas non plus cette propriété.)

Application d’une transformation à un élément d’interface utilisateur

Lorsque vous appliquez une transformation à un objet, vous le faites généralement pour définir la propriété UIElement.RenderTransform. La définition de cette propriété ne modifie pas littéralement l'objet pixel par pixel. Ce que fait réellement la propriété est l’application de la transformation dans l’espace de coordonnées local dans lequel cet objet existe. Ensuite, la logique de rendu et l'opération (post-disposition) rendent les espaces de coordonnées combinés, donnant l'impression que l'objet a changé d'apparence et potentiellement de position de disposition (si TranslateTransform est appliqué).

Par défaut, chaque transformation de rendu est centrée à l’origine du système de coordonnées local de l’objet cible , son (0,0). La seule exception est une TranslateTransform, qui n’a aucune propriété centrale à définir, car l’effet de traduction est le même, quel que soit l’emplacement où il est centré. Mais les autres transformations ont chacune des propriétés qui définissent les valeurs de CenterX et CenterY.

Chaque fois que vous utilisez des transformations avec UIElement.RenderTransform, n’oubliez pas qu’il existe une autre propriété sur UIElement qui affecte le comportement de la transformation : RenderTransformOrigin. Ce que RenderTransformOrigin déclare est que la transformation entière 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. Pour les éléments classiques, (0,0) place la transformation en haut à gauche. Selon l’effet souhaité, vous pouvez choisir de modifier RenderTransformOrigin plutôt que d’ajuster les valeurs CenterX et CenterY sur les transformations. Notez que si vous appliquez à la fois les valeurs RenderTransformOrigin et CenterX / CenterY , les résultats peuvent être assez confus, en particulier si vous animez l’une des valeurs.

Aux fins de la détection des collisions, un objet auquel une transformation est appliquée continue de répondre aux entrées d'une manière conforme à son apparence visuelle dans le plan x-y. Par exemple, si vous avez utilisé un TranslateTransform pour déplacer un rectangle de 400 pixels latéralement dans l’interface utilisateur, Rectangle répond aux événements PointerPressed lorsque l’utilisateur appuie sur le point où le Rectangle apparaît visuellement. Vous n’obtiendrez pas de faux événements si l’utilisateur appuie sur la zone où le rectangle était avant d’être traduit. Pour toutes les considérations relatives à l'indice-z, qui affectent les tests de détection, l'application d'une transformation n'a aucun effet ; l'indice-z qui détermine quel élément gère les événements d'entrée pour un point dans l'espace x-y est toujours évalué en utilisant l'ordre des enfants tel qu'il est déclaré dans un conteneur. Cet ordre est généralement le même que l’ordre dans lequel vous déclarez les éléments en XAML, bien que pour les éléments enfants d’un objet Canvas , vous pouvez ajuster l’ordre en appliquant la propriété jointe Canvas.ZIndex aux éléments enfants.

Autres propriétés de transformation

• Brush.Transform, Brush.RelativeTransform: ils influencent la façon dont un Pinceau utilise l’espace de coordonnées dans la zone que le pinceau est appliqué pour définir des propriétés visuelles telles que les premier plan et les arrière-plans. 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 pour peindre des zones avec un ImageBrush ou LinearGradientBrush.
• Geometry.Transform : vous pouvez utiliser cette propriété pour appliquer une transformation à une géométrie avant d’utiliser cette géométrie pour une valeur de propriété Path.Data .

Animer une transformation

Transformer des objets peuvent être animés. Pour animer une transformation, appliquez une animation d’un type compatible à la propriété que vous souhaitez animer. Cela signifie généralement que vous utilisez DoubleAnimation ou des objets DoubleAnimationUsingKeyFrames pour définir l’animation, car toutes les propriétés de transformation sont de type Double. Les animations qui affectent une transformation utilisée pour un UIElement.RenderTransform valeur ne sont pas considérées comme dépendantes, même si elles ont une durée différente de zéro. Pour plus d’informations sur les animations dépendantes, consultez animations scénarisées.

Si vous animez des propriétés pour produire un effet similaire à une transformation en termes d’apparence visuelle nette( par exemple, animer la largeur et la hauteur d’un FrameworkElement plutôt que d’appliquer un TranslateTransform), ces animations sont presque toujours traitées comme des animations dépendantes. Vous devrez activer les animations et il peut y avoir des problèmes de performances significatifs avec l’animation, en particulier si vous essayez de prendre en charge l’interaction utilisateur pendant que cet objet est animé. Pour cette raison, il est préférable d’utiliser une transformation et de l’animer plutôt que d’animer une autre propriété où l’animation serait traitée comme une animation dépendante.

Pour cibler la transformation, il doit y avoir une transformation existante en tant que valeur de RenderTransform. Vous placez généralement un élément pour le type de transformation approprié dans le code XAML initial, parfois sans propriétés définies sur cette transformation.

Vous utilisez généralement une technique de ciblage indirect pour appliquer des animations aux propriétés d’une transformation. Pour plus d’informations sur la syntaxe de ciblage indirect, consultez animations storyboardées etsyntaxe de chemin de propriété .

Les styles par défaut pour les contrôles définissent parfois des animations de transformations dans le cadre de leur comportement d’état visuel. Par exemple, les états visuels de ProgressRing utilisent des valeurs RotateTransform animées pour « tourner » les points de l’anneau.

Voici un exemple simple d’animation d’une transformation. Dans ce cas, il anime l'Angle d’un RotateTransform pour faire tourner un rectangle en place autour de son centre visuel. Cet exemple nomme le RotateTransform de sorte qu’il n’a pas besoin de ciblage d’animation indirecte, mais vous pouvez également laisser la transformation sans nom, nommer l’élément auquel la transformation est appliquée et utiliser le ciblage indirect tel que (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 cadres de coordonnées de référence au moment de l’exécution

UIElement a une méthode nommée TransformToVisual, qui peut générer un Transform qui établit une corrélation entre les systèmes de référence de coordonnées pour deux éléments d’interface utilisateur. Vous pouvez l’utiliser pour comparer un élément au cadre de référence de coordonnées par défaut de l’application si vous transmettez le visuel racine comme premier paramètre. Cela peut être utile si vous avez capturé un événement d’entrée à partir d’un autre élément, ou si vous essayez de prédire le comportement de disposition sans demander réellement une passe de disposition.

Description mathématique d’une transformation

Une transformation peut être décrite en termes de matrice de transformation. Une matrice 3×3 est utilisée pour décrire les transformations dans un plan x-y à deux dimensions. Les matrices de transformation affine peuvent être multipliées pour effectuer un ensemble de transformations linéaires telles que la rotation et le cisaillement, suivies de la 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 de la description mathématique.

La description mathématique d’une transformation peut vous être utile si vous avez un arrière-plan mathématique ou une connaissance des techniques de programmation graphique qui utilisent également des matrices pour décrire les transformations de l’espace de coordonnées. Il existe une classe dérivée de transformation qui vous permet d’exprimer une transformation directement en termes de sa matrice 3×3 : MatrixTransform. MatrixTransform a une propriété Matrix, qui contient une structure qui a six propriétés : M11, M12, M21, M22, OffsetX et 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.

Toute transformation que vous pouvez décrire avec un TranslateTransform , un ScaleTransform , un RotateTransform ou un SkewTransform peut être décrite de manière équivalente par un MatrixTransform avec une valeur Matrix . Toutefois, vous utilisez généralement TranslateTransform et les autres, car les propriétés de ces classes de transformation sont plus faciles à conceptualiser que de définir les composants vectoriels dans une matrice. Il est également plus facile d’animer les propriétés discrètes des transformations ; Une matrice est en fait une structure et non un DependencyObject, de sorte qu’elle ne peut pas prendre en charge les valeurs individuelles animées.

Certains outils de conception XAML qui vous permettent d’appliquer des opérations de transformation sérialisent les résultats en tant que MatrixTransform. Dans ce cas, il est préférable d’utiliser à nouveau le même outil de conception pour modifier l’effet de transformation et sérialiser à nouveau le code XAML, plutôt que d’essayer de manipuler les valeurs de matrice vous-même directement dans le code XAML.

transformations 3D

Dans Windows 10, XAML a introduit une nouvelle propriété , UIElement.Transform3D, qui peut être utilisée pour créer des effets 3D avec l’interface utilisateur. Pour ce faire, utilisez PerspectiveTransform3D pour ajouter une perspective 3D partagée ou une « caméra » à votre scène, puis utilisez CompositeTransform3D pour transformer un élément dans l’espace 3D, comme vous utiliseriez CompositeTransform. Consultez UIElement.Transform3D pour une discussion sur la façon d’implémenter des transformations 3D.

Pour des effets 3D plus simples qui s’appliquent uniquement à un seul objet, la propriété UIElement.Projection peut être utilisée. L’utilisation d’un PlaneProjection comme valeur pour cette propriété équivaut à appliquer une transformation de perspective fixe et une ou plusieurs transformations 3D à l’élément. Ce type de transformation est décrit plus en détail dans les effets de perspective 3D pour l’interface utilisateur XAML.

rubriques connexes

• UIElement.Transform3D
• effets de perspective 3D pour de l'interface utilisateur XAML
• Transforme