Effets de perspective 3D pour une interface utilisateur en XAML3-D perspective effects for XAML UI

Vous pouvez appliquer des effets 3D au contenu de vos applications Windows Runtime à l’aide de transformations de perspective.You can apply 3-D effects to content in your Windows Runtime apps using perspective transforms. Par exemple, vous pouvez donner l’illusion qu’un objet est tourné vers vous ou vers l’arrière, comme illustré ici.For example, you can create the illusion that an object is rotated toward or away from you, as shown here.

Image avec transformation de perspective

Une autre utilisation courante des transformations de perspective consiste à organiser les objets les uns par rapport aux autres de manière à créer un effet 3D, comme ci-dessous.Another common usage for perspective transforms is to arrange objects in relation to one another to create a 3-D effect, as here.

Empilement d’objets pour créer un effet 3D

Outre créer des effets 3D statiques, vous pouvez animer les propriétés des transformations de perspective pour créer des effets 3D mobiles.Besides creating static 3-D effects, you can animate the perspective transform properties to create moving 3-D effects.

Les champs d’application des transformations de perspective ne se limitent pas aux images ; vous pouvez appliquer ces effets à n’importe quel objet UIElement, y compris aux contrôles.You just saw perspective transforms applied to images, but you can apply these effects to any UIElement, including controls. Par exemple, vous pouvez appliquer un effet 3D à la totalité d’un conteneur de contrôles tel que celui-ci :For example, you can apply a 3-D effect to an entire container of controls like this:

Effet 3D appliqué à un conteneur d’éléments

Voici le code XAML utilisé pour créer cet exemple :Here is the XAML code used to create this sample:

<StackPanel Margin="35" Background="Gray">    
    <StackPanel.Projection>        
        <PlaneProjection RotationX="-35" RotationY="-35" RotationZ="15"  />    
    </StackPanel.Projection>    
    <TextBlock Margin="10">Type Something Below</TextBlock>    
    <TextBox Margin="10"></TextBox>    
    <Button Margin="10" Content="Click" Width="100" />
</StackPanel>

Ici, nous mettons l’accent sur les propriétés de l’objet PlaneProjection qui permet de faire pivoter des objets et de les déplacer dans un espace 3D.Here we focus on the properties of PlaneProjection which is used to rotate and move objects in 3-D space. L’exemple suivant vous permet d’expérimenter ces propriétés et de voir leur impact sur un objet.The next sample allows you to experiment with these properties and see their effect on an object.

Classe PlaneProjectionPlaneProjection class

Vous pouvez appliquer des effets 3D à n’importe quel objet UIElement, en définissant sa propriété Projection à l’aide d’un objet PlaneProjection.You can apply 3D effects can to any UIElement, by setting the UIElement's Projection property using a PlaneProjection. L’objet PlaneProjection définit le rendu de la transformation dans l’espace.The PlaneProjection defines how the transform is rendered in space. L’exemple suivant illustre un cas simple.The next example shows a simple case.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35"   />
    </Image.Projection>
</Image>

Cette figure montre le rendu de l’image obtenue.This figure shows what the image renders as. Les axes X, Y et Z sont illustrés par des lignes rouges.The x-axis, y-axis, and z-axis are shown as red lines. L’image est pivotée de 35 degrés vers l’arrière autour de l’axe X à l’aide de la propriété RotationX.The image is rotated backward 35 degrees around the x-axis using the RotationX property.

Rotation X moins 35 degrés

La propriété RotationY applique une rotation autour de l’axe Y du centre de rotation.The RotationY property rotates around the y-axis of the center of rotation.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35"   />
    </Image.Projection>
</Image>

Rotation Y moins 35 degrés

La propriété RotationZ applique une rotation autour de l’axe Z du centre de rotation (ligne perpendiculaire au plan de l’objet).The RotationZ property rotates around the z-axis of the center of rotation (a line that is perpendicular to the plane of the object).

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationZ="-45"/>
    </Image.Projection>
</Image>

Rotation Z moins 45 degrés

Les propriétés de rotation peuvent spécifier une valeur positive ou négative afin que la rotation soit effectuée dans l’un ou l’autre sens.The rotation properties can specify a positive or negative value to rotate in either direction. La valeur absolue peut être supérieure à 360, ce qui fait pivoter l’objet de plus d’une rotation complète.The absolute number can be greater than 360, which rotates the object more than one full rotation.

Vous pouvez déplacer le centre de rotation à l’aide des propriétés CenterOfRotationX, CenterOfRotationY et CenterOfRotationZ.You can move the center of rotation by using the CenterOfRotationX, CenterOfRotationY, and CenterOfRotationZ properties. Par défaut, les axes de rotation passent directement par le centre de l’objet, obligeant celui-ci à pivoter autour de son centre.By default, the axes of rotation run directly through the center of the object, causing the object to rotate around its center. Toutefois, si vous déplacez le centre de rotation vers le bord externe de l’objet, celui-ci pivotera autour de ce bord.But if you move the center of rotation to the outer edge of the object, it will rotate around that edge. La valeur par défaut des propriétésCenterOfRotationX et CenterOfRotationY est 0,5, tandis que la valeur par défaut de la propriété CenterOfRotationZ est 0.The default values for CenterOfRotationX and CenterOfRotationY are 0.5, and the default value for CenterOfRotationZ is 0. Dans le cas des propriétés CenterOfRotationX et CenterOfRotationY, les valeurs comprises entre 0 et 1 définissent le point pivot à un emplacement dans l’objet.For CenterOfRotationX and CenterOfRotationY, values between 0 and 1 set the pivot point at some location within the object. La valeur 0 désigne un bord de l’objet, tandis que la valeur 1 représente le bord opposé.A value of 0 denotes one object edge and 1 denotes the opposite edge. Les valeurs en dehors de cette plage sont autorisées et entraînent le déplacement du centre de rotation.Values outside of this range are allowed and will move the center of rotation accordingly. Étant donné que l’axe Z du centre de rotation passe par le plan de l’objet, vous pouvez déplacer le centre de rotation derrière l’objet, à l’aide d’un nombre négatif, et devant l’objet (vers vous), à l’aide d’un nombre positif.Because the z-axis of the center of rotation is drawn through the plane of the object, you can move the center of rotation behind the object using a negative number and in front of the object (toward you) using a positive number.

La propriété CenterOfRotationX déplace le centre de rotation le long de la parallèle de l’axe X de l’objet, tandis que la propriété CenterOfRotationY déplace le centre de rotation le long de l’axe Y de l’objet.CenterOfRotationX moves the center of rotation along the x-axis parallel to the object while CenterOfRotationY moves the center or rotation along the y-axis of the object. Les illustrations suivantes montrent l’utilisation de différentes valeurs pour la propriété CenterOfRotationY.The next illustrations demonstrate using different values for CenterOfRotationY.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35" CenterOfRotationY="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationY = "0.5" (par défaut)CenterOfRotationY = "0.5" (default)

CenterOfRotationY égal à 0.5

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationX="-35" CenterOfRotationY="0.1"/>
    </Image.Projection>
</Image>

CenterOfRotationY = "0.1"CenterOfRotationY = "0.1"

CenterOfRotationY égal à 0.1

Comme vous pouvez le constater, l’image pivote autour du centre lorsque la propriété CenterOfRotationY est définie sur la valeur par défaut 0.5, et proche du bord supérieur lorsqu’elle est définie sur 0.1.Notice how the image rotates around the center when the CenterOfRotationY property is set to the default value of 0.5 and rotates near the upper edge when set to 0.1. Vous pouvez observer un comportement similaire si vous modifiez la propriété CenterOfRotationX de manière à opérer un déplacement vers l’endroit où la propriété RotationY fait pivoter l’objet.You see similar behavior when changing the CenterOfRotationX property to move where the RotationY property rotates the object.

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35" CenterOfRotationX="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationX = "0.5" (par défaut)CenterOfRotationX = "0.5" (default)

CenterOfRotationX égal 0.5

<Image Source="kid.png">
    <Image.Projection>
        <PlaneProjection RotationY="-35" CenterOfRotationX="0.5" />
    </Image.Projection>
</Image>

CenterOfRotationX = "0.9" (bord droit)CenterOfRotationX = "0.9" (right-hand edge)

CenterOfRotationX égal à 0.9

Utilisez la propriété CenterOfRotationZ pour placer le centre de rotation au-dessus ou au-dessous du plan de l’objet.Use the CenterOfRotationZ to place the center of rotation above or below the plane of the object. Ainsi, vous pouvez faire pivoter l’objet autour du point, à l’image d’une planète en orbite autour d’une étoile.This way, you can rotate the object around the point analogous to a planet orbiting around a star.

Positionnement d’un objetPositioning an object

À ce stade, vous avez appris comment faire pivoter un objet dans l’espace.So far, you learned how to rotate an object in space. Vous pouvez positionner ces objets pivotés dans l’espace les uns par rapport aux autres à l’aide des propriétés suivantes :You can position these rotated objects in space relative to one another by using these properties:

  • La propriété LocalOffsetX déplace un objet le long de l’axe X du plan d’un objet pivoté.LocalOffsetX moves an object along the x-axis of the plane of a rotated object.
  • La propriété LocalOffsetY déplace un objet le long de l’axe Y du plan d’un objet pivoté.LocalOffsetY moves an object along the y-axis of the plane of a rotated object.
  • La propriété LocalOffsetZ déplace un objet le long de l’axe Z du plan d’un objet pivoté.LocalOffsetZ moves an object along the z-axis of the plane of a rotated object.
  • La propriété GlobalOffsetX déplace un objet le long de l’axe X par rapport à l’écran.GlobalOffsetX moves an object along the screen-aligned x-axis.
  • La propriété GlobalOffsetY déplace un objet le long de l’axe Y par rapport à l’écran.GlobalOffsetY moves an object along the screen-aligned y-axis.
  • La propriété GlobalOffsetZ déplace un objet le long de l’axe Z par rapport à l’écran.GlobalOffsetZ moves an object along the screen-aligned z-axis.

Décalage localLocal offset

Les propriétés LocalOffsetX, LocalOffsetY et LocalOffsetZ déplacent un objet le long de l’axe respectif du plan de l’objet une fois que celui-ci a subi une rotation.The LocalOffsetX, LocalOffsetY, and LocalOffsetZ properties translate an object along the respective axis of the plane of the object after it has been rotated. Par conséquent, la rotation de l’objet détermine la direction du déplacement de l’objet.Therefore, the rotation of the object determines the direction that the object is translated. Pour illustrer ce concept, l’exemple suivant anime la propriété LocalOffsetX de 0 à 400 degrés et la propriété RotationY de 0 à 65 degrés.To demonstrate this concept, the next sample animates LocalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

Dans l’exemple précédent, l’objet se déplace le long de son axe X.Notice in the preceding sample that the object is moving along its own x-axis. Au tout début de l’animation, lorsque la valeur de la propriété RotationY est proche de zéro (parallèle à l’écran), l’objet se déplace le long de l’écran dans le sens X, mais à mesure que l’objet pivote vers vous, il se déplace le long de l’axe X du plan de l’objet en votre direction.At the very beginning of the animation, when the RotationY value is near zero (parallel to the screen), the object moves along the screen in the x direction, but as the object rotates toward you, the object moves along the x-axis of the plane of the object toward you. À l’opposé, si vous animez la propriété RotationY avec une ampleur de -65 degrés, l’objet dessine une courbe en s’éloignant de vous.On the other hand, if you animated the RotationY property to -65 degrees, the object would curve away from you.

La propriété LocalOffsetY fonctionne de façon similaire à la propriété LocalOffsetX, à la différence qu’elle opère un déplacement le long de l’axe vertical, si bien que la modification de la propriété RotationX a une incidence sur la direction dans laquelle la propriété LocalOffsetY déplace l’objet.LocalOffsetY works similarly to LocalOffsetX, except that it moves along the vertical axis, so changing RotationX affects the direction LocalOffsetY moves the object. Dans l’exemple suivant, la propriété LocalOffsetY est animée de 0 à 400 degrés, tandis que la propriété RotationX est animée de 0 à 65 degrés.In the next sample, LocalOffsetY is animated from 0 to 400 and RotationX from 0 to 65 degrees.

La propriété LocalOffsetZ déplace l’objet perpendiculairement à son plan comme si un vecteur était dessiné directement au centre, de l’arrière de l’objet vers vous.LocalOffsetZ translates the object perpendicular to the plane of the object as though a vector was drawn directly through the center from behind the object out toward you. Pour illustrer le fonctionnement de la propriété LocalOffsetZ, l’exemple suivant anime la propriété LocalOffsetZ entre 0 et 400 degrés et la propriété RotationX entre 0 et 65 degrés.To demonstrate how LocalOffsetZ works, the next sample animates LocalOffsetZ from 0 to 400 and RotationX from 0 to 65 degrees.

Au début de l’animation, lorsque la valeur de la propriété RotationX est proche de zéro (parallèle à l’écran), l’objet se déplace directement vers vous, mais à mesure que la face de l’objet pivote vers le bas, celui-ci se déplace vers le bas.At the beginning of the animation, when the RotationX value is near zero (parallel to the screen), the object moves directly out toward you, but as the face of the object rotates down, the object moves down instead.

Décalage globalGlobal offset

Les propriétés GlobalOffsetX, GlobalOffsetY et GlobalOffsetZ déplacent l’objet le long d’axes par rapport à l’écran.The GlobalOffsetX, GlobalOffsetY, and GlobalOffsetZ properties translate the object along axes relative to the screen. En d’autres termes, à la différence des propriétés de décalage local, l’axe de déplacement de l’objet est indépendant de la rotation appliquée à celui-ci.That is, unlike the local offset properties, the axis the object moves along is independent of any rotation applied to the object. Ces propriétés sont utiles lorsque vous souhaitez simplement déplacer l’objet le long de l’axe X, Y ou Z de l’écran sans vous soucier de la rotation appliquée à l’objet.These properties are useful when you want to simply move the object along the x-, y-, or z-axis of the screen without worrying about the rotation applied to the object.

Dans l’exemple suivant, la propriété GlobalOffsetX est animée de 0 à 400 degrés, tandis que la propriété RotationY est animée de 0 à 65 degrés.The next sample animates GlobalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

Dans cet exemple, l’objet ne change pas de course à mesure qu’il pivote.Notice in this sample that the object does not change course as it rotates. En effet, l’objet est déplacé le long de l’axe X de l’écran indépendamment de sa rotation.That is because the object is being moved along the x-axis of the screen without regard to its rotation.

Scénarios semi-3D complexesMore complex semi-3D scenarios

Vous pouvez utiliser les types Matrix3DProjection et Matrix3D dans le cadre de scénarios 3D partiels plus complexes que permet l’objet PlaneProjection.You can use the Matrix3DProjection and Matrix3D types for more complex semi-3D scenarios than are possible with the PlaneProjection. L’objet Matrix3DProjection met à votre disposition une matrice de transformation 3D complète que vous pouvez appliquer à n’importe quel objet UIElement, ce qui vous permet d’appliquer aux éléments des matrices de perspective et des matrices de transformation de modèle arbitraires.Matrix3DProjection provides you with a complete 3D transform matrix to apply to any UIElement, so that you can apply arbitrary model transformation matrices and perspective matrices to elements. Gardez à l’esprit que ces API sont minimales ; par conséquent, si vous les utilisez, vous devez écrire le code qui crée correctement les matrices de transformation 3D.Keep in mind that these API are minimal and therefore if you use them, you will need to write the code that correctly creates the 3D transform matrices. Il est donc plus facile d’utiliser l’objet PlaneProjection pour des scénarios 3D simples.Because of this, it is easier to use PlaneProjection for simple 3D scenarios.