Effets de perspective 3D pour l’interface utilisateur XAML

Vous pouvez appliquer des effets 3D au contenu de vos applications Windows Runtime à l’aide de transformations de perspective. Par exemple, vous pouvez créer l’illusion qu’un objet est pivoté vers vous ou loin de vous, comme illustré ici.

Une autre utilisation courante des transformations de perspective consiste à organiser les objets par rapport à l’autre pour créer un effet 3D, comme ici.

Outre la création d’effets 3D statiques, vous pouvez animer les propriétés de transformation de perspective pour créer des effets 3D mobiles.

Vous venez de voir les transformations de perspective appliquées aux images, mais vous pouvez appliquer ces effets à n’importe quel UIElement, y compris les contrôles. Par exemple, vous pouvez appliquer un effet 3D à un conteneur entier de contrôles comme suit :

Voici le code XAML utilisé pour créer cet exemple :

<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 nous concentrons sur les propriétés de PlaneProjection qui est utilisée pour faire pivoter et déplacer des objets dans l’espace 3D. L’exemple suivant vous permet d’expérimenter ces propriétés et de voir leur effet sur un objet.

Classe PlaneProjection

Vous pouvez appliquer des effets 3D à n’importe quel élément UIElement, en définissant la propriété Projection d’UIElement à l’aide d’un PlaneProjection. PlaneProjection définit le rendu de la transformation dans l’espace. L’exemple suivant montre un cas simple.

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

Cette figure montre à quoi ressemble l’image une fois rendue. L’axe x, l’axe y et l’axe z sont affichés sous forme de lignes rouges. L’image est pivotée vers l’arrière de 35 degrés autour de l’axe x à l’aide de la propriété RotationX .

La propriété RotationY tourne autour de l’axe y du centre de rotation.

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

La propriété RotationZ tourne autour de l’axe z du centre de rotation (ligne perpendiculaire au plan de l’objet).

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

Les propriétés de rotation peuvent spécifier une valeur positive ou négative pour effectuer une rotation dans un sens ou dans l’autre. Le nombre absolu peut être supérieur à 360, ce qui fait pivoter l’objet plusieurs rotations complètes.

Vous pouvez déplacer le centre de rotation à l’aide des propriétés CenterOfRotationX, CenterOfRotationY et CenterOfRotationZ . Par défaut, les axes de rotation s’exécutent directement via le centre de l’objet, ce qui entraîne la rotation de l’objet autour de son centre. Mais si vous déplacez le centre de rotation vers le bord externe de l’objet, il tourne autour de ce bord. Les valeurs par défaut pour CenterOfRotationX et CenterOfRotationY sont 0.5 et la valeur par défaut pour CenterOfRotationZ est 0. Pour CenterOfRotationX et CenterOfRotationY, les valeurs comprises entre 0 et 1 définissent le point de pivot à un emplacement quelconque dans l’objet. La valeur 0 indique un bord d’objet et 1 indique le bord opposé. Les valeurs en dehors de cette plage sont autorisées et déplacent le centre de rotation en conséquence. Étant donné que l’axe z du centre de rotation est dessiné à travers 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.

CenterOfRotationX déplace le centre de rotation le long de l’axe x parallèle à l’objet tandis que CenterOfRotationY déplace le centre ou la rotation le long de l’axe y de l’objet. Les illustrations suivantes illustrent l’utilisation de différentes valeurs pour CenterOfRotationY.

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

CenterOfRotationY = « 0.5 » (par défaut)

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

CenterOfRotationY = « 0.1 »

Notez comment l’image pivote autour du centre lorsque la propriété CenterOfRotationY est définie sur la valeur par défaut de 0,5 et pivote près du bord supérieur lorsqu’elle est définie sur 0,1. Vous voyez un comportement similaire lors de la modification de la propriété CenterOfRotationX pour déplacer l’emplacement où la propriété RotationY fait pivoter l’objet.

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

CenterOfRotationX = « 0.5 » (par défaut)

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

CenterOfRotationX = « 0,9 » (bord droit)

Utilisez CenterOfRotationZ pour placer le centre de rotation au-dessus ou en dessous du plan de l’objet. De cette façon, vous pouvez faire pivoter l’objet autour du point analogue à une planète en orbite autour d’une étoile.

Positionnement d’un objet

Jusqu’à présent, vous avez appris à faire pivoter un objet dans l’espace. Vous pouvez positionner ces objets pivotés dans l’espace par rapport à l’autre à l’aide de ces propriétés :

• LocalOffsetX déplace un objet le long de l’axe x du plan d’un objet pivoté.
• LocalOffsetY déplace un objet le long de l’axe y du plan d’un objet pivoté.
• LocalOffsetZ déplace un objet le long de l’axe z du plan d’un objet pivoté.
• GlobalOffsetX déplace un objet le long de l’axe x aligné sur l’écran.
• GlobalOffsetY déplace un objet le long de l’axe y aligné sur l’écran.
• GlobalOffsetZ déplace un objet le long de l’axe z aligné sur l’écran.

Décalage local

Les propriétés LocalOffsetX, LocalOffsetY et LocalOffsetZ traduisent un objet le long de l’axe respectif du plan de l’objet après sa rotation. Par conséquent, la rotation de l’objet détermine la direction dans laquelle l’objet est déplacé. Pour illustrer ce concept, l’exemple suivant anime LocalOffsetX de 0 à 400 et RotationY de 0 à 65 degrés.

Notez dans l’exemple précédent que l’objet se déplace le long de son propre axe x. Au début de l’animation, lorsque la valeur 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 lorsque l’objet tourne vers vous, l’objet se déplace le long de l’axe x du plan de l’objet vers vous. En revanche, si vous avez animé la propriété RotationY à -65 degrés, l’objet s’éloigne de vous.

LocalOffsetY fonctionne de la même façon que LocalOffsetX, sauf qu’il se déplace le long de l’axe vertical, de sorte que la modification de RotationX affecte la direction localOffsetY déplace l’objet. Dans l’exemple suivant, LocalOffsetY est animé de 0 à 400 et rotationX de 0 à 65 degrés.

LocalOffsetZ déplace l’objet perpendiculairement à son plan, comme si un vecteur était tracé directement à travers son centre, depuis l’arrière de l’objet vers vous. Pour illustrer le fonctionnement de LocalOffsetZ , l’exemple suivant anime LocalOffsetZ de 0 à 400 et RotationX de 0 à 65 degrés.

Au début de l’animation, lorsque la valeur RotationX est proche de zéro (parallèle à l’écran), l’objet se déplace directement vers vous, mais lorsque le visage de l’objet pivote vers le bas, l’objet se déplace vers le bas.

Décalage global

Les propriétés GlobalOffsetX, GlobalOffsetY et GlobalOffsetZ traduisent l’objet le long des axes par rapport à l’écran. Autrement dit, contrairement aux propriétés de décalage local, l’axe que l’objet déplace le long est indépendant de toute rotation appliquée à l’objet. 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.

L’exemple suivant anime GlobalOffsetX de 0 à 400 et RotationY de 0 à 65 degrés.

Notez que dans cet exemple, l’objet ne change pas de cours à mesure qu’il pivote. Cela est dû au fait que l’objet est déplacé le long de l’axe x de l’écran sans tenir compte de sa rotation.

Scénarios semi-3D plus complexes

Vous pouvez utiliser les types Matrix3DProjection et Matrix3D pour des scénarios semi-3D plus complexes que possible avec PlaneProjection. Matrix3DProjection vous fournit une matrice de transformation 3D complète à appliquer à n’importe quel UIElement, afin que vous puissiez appliquer des matrices de transformation de modèle arbitraires et des matrices de perspective aux éléments. N’oubliez pas que ces API sont minimales et, par conséquent, si vous les utilisez, vous devez écrire le code qui crée correctement les matrices de transformation 3D. En raison de cela, il est plus facile d’utiliser PlaneProjection pour les scénarios 3D simples.