3D-Perspektiveneffekte für XAML-UI3-D perspective effects for XAML UI

Mithilfe der perspektivischen Transformation können Sie 3D-Effekte auf Inhalte in Ihren Windows-Runtime-Apps anwenden.You can apply 3-D effects to content in your Windows Runtime apps using perspective transforms. Sie können z. B. wie hier gezeigt die Illusion schaffen, dass sich ein Objekt auf Sie zu oder von Ihnen wegbewegt.For example, you can create the illusion that an object is rotated toward or away from you, as shown here.

Bild mit perspektivischer Transformation

Eine weitere häufige Anwendung von perspektivischen Transformationen besteht in der Anordnung von Objekten relativ zueinander, wodurch wie hier ein 3D-Effekt erzeugt wird.Another common usage for perspective transforms is to arrange objects in relation to one another to create a 3-D effect, as here.

Stapeln von Objekten zum Erzeugen eines 3D-Effekts

Neben dem Erzeugen von statischen 3D-Effekten können Sie die Eigenschaften der perspektivischen Transformation animieren, um 3D-Bewegungseffekte zu erzielen.Besides creating static 3-D effects, you can animate the perspective transform properties to create moving 3-D effects.

Sie haben sich soeben damit vertraut gemacht, wie perspektivische Transformationen auf Bilder angewendet werden. Sie können diese Effekte jedoch auf jedes UIElement anwenden, einschließlich von Steuerelementen.You just saw perspective transforms applied to images, but you can apply these effects to any UIElement, including controls. Sie können beispielsweise wie folgt einen 3D-Effekt auf einen ganzen Container von Steuerelementen anwenden:For example, you can apply a 3-D effect to an entire container of controls like this:

Auf einen Container von Elementen angewendeter 3D-Effekt

Dieses Beispiel wurde mit folgendem XAML-Code erstellt: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>

Wenden Sie sich nun den Eigenschaften von PlaneProjection zu. Damit werden Objekte im 3D-Raum gedreht und bewegt.Here we focus on the properties of PlaneProjection which is used to rotate and move objects in 3-D space. Im folgenden Beispiel können Sie mit den Eigenschaften experimentieren und feststellen, wie sie sich auf ein Objekt auswirken.The next sample allows you to experiment with these properties and see their effect on an object.

PlaneProjection-KlassePlaneProjection class

Sie können 3D-Effekte auf jedes UIElement anwenden. Dazu legen Sie die Projection-Eigenschaft für das UIElement mit einer PlaneProjection fest.You can apply 3D effects can to any UIElement, by setting the UIElement's Projection property using a PlaneProjection. Die PlaneProjection definiert, wie die Transformation im Raum gerendert wird.The PlaneProjection defines how the transform is rendered in space. Im nächsten Beispiel wird ein einfacher Fall veranschaulicht.The next example shows a simple case.

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

Die Abbildung zeigt, wie das Bild gerendert wird.This figure shows what the image renders as. Die X-Achse, die Y-Achse und die Z-Achse sind als rote Linien dargestellt.The x-axis, y-axis, and z-axis are shown as red lines. Das Bild wird mit der RotationX-Eigenschaft um 35 Grad um die X-Achse rückwärts gedreht.The image is rotated backward 35 degrees around the x-axis using the RotationX property.

RotateX minus 35 Grad

Die RotationY-Eigenschaft führt eine Drehung um die Y-Achse des Drehmittelpunkts aus.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>

RotateY minus 35 Grad

Die RotationZ-Eigenschaft führt eine Drehung um die Z-Achse des Drehmittelpunkts aus (eine Linie, die eine Senkrechte zur Objektfläche darstellt).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>

RotateZ minus 45 Grad

Für die Drehungseigenschaften kann ein positiver oder negativer Wert für die Drehung in beiden Richtungen angegeben werden.The rotation properties can specify a positive or negative value to rotate in either direction. Die absolute Zahl kann größer als 360 sein, wodurch das Objekt um mehr als eine volle Drehung gedreht wird.The absolute number can be greater than 360, which rotates the object more than one full rotation.

Sie können den Drehmittelpunkt mithilfe der Eigenschaften CenterOfRotationX, CenterOfRotationY und CenterOfRotationZ verschieben.You can move the center of rotation by using the CenterOfRotationX, CenterOfRotationY, and CenterOfRotationZ properties. Standardmäßig verläuft die Drehachse direkt durch den Objektmittelpunkt, wodurch das Objekt um seinen Mittelpunkt gedreht wird.By default, the axes of rotation run directly through the center of the object, causing the object to rotate around its center. Wenn Sie jedoch den Drehmittelpunkt an den Rand des Objekts verschieben, wird das Objekt um den betreffenden Rand gedreht.But if you move the center of rotation to the outer edge of the object, it will rotate around that edge. Der Standardwert für CenterOfRotationX und CenterOfRotationY ist 0,5, und der Standardwert für CenterOfRotationZ ist 0.The default values for CenterOfRotationX and CenterOfRotationY are 0.5, and the default value for CenterOfRotationZ is 0. Für CenterOfRotationX und CenterOfRotationY wird der Drehpunkt mit Werten zwischen 0 und 1 auf eine bestimmte Position auf dem Objekt festgelegt.For CenterOfRotationX and CenterOfRotationY, values between 0 and 1 set the pivot point at some location within the object. Durch den Wert "0" wird ein Rand des Objekts angegeben, während mit dem Wert "1" der gegenüberliegende Rand angegeben wird.A value of 0 denotes one object edge and 1 denotes the opposite edge. Werte außerhalb dieses Bereichs sind zulässig, und der Drehmittelpunkt wird entsprechend verschoben.Values outside of this range are allowed and will move the center of rotation accordingly. Da die Z-Achse des Drehmittelpunkts durch die Fläche des Objekts gezeichnet wird, können Sie den Drehmittelpunkt mit einer negativen Zahl hinter das Objekt und mit einer positiven Zahl vor das Objekt (auf den Betrachter zu) verschieben.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.

CenterOfRotationX verschiebt den Drehmittelpunkt entlang der X-Achse parallel zum Objekt, während CenterOfRotationY den Drehmittelpunkt entlang der Y-Achse des Objekts verschiebt.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. In der folgenden Abbildung wird die Auswirkung von verschiedenen Werten für CenterOfRotationY veranschaulicht.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" (Standardeinstellung)CenterOfRotationY = "0.5" (default)

CenterOfRotationY ist "0,5"

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

CenterOfRotationY = "0,1"CenterOfRotationY = "0.1"

CenterOfRotationY ist "0,1"

Beachten Sie, wie das Bild um den Mittelpunkt gedreht wird, wenn die CenterOfRotationY-Eigenschaft auf den Standardwert "0,5" festgelegt ist. Es wird nahe seinem oberen Rand gedreht, wenn die Eigenschaft auf "0,1" festgelegt ist.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. Ein ähnliches Verhalten ist zu beobachten, wenn die CenterOfRotationX-Eigenschaft geändert wird, um eine Verschiebung zu bewirken, wobei das Objekt durch die RotationY-Eigenschaft gedreht wird.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" (Standardeinstellung)CenterOfRotationX = "0.5" (default)

CenterOfRotationX ist "0,5"

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

CenterOfRotationX = "0,9" (rechter Rand)CenterOfRotationX = "0.9" (right-hand edge)

CenterOfRotationX ist "0,9"

Platzieren Sie den Drehmittelpunkt mithilfe von CenterOfRotationZ über bzw. unter der Fläche des Objekts.Use the CenterOfRotationZ to place the center of rotation above or below the plane of the object. Auf diese Weise können Sie das Objekt wie einen Planeten auf seiner Umlaufbahn um einen Stern um den betreffenden Punkt drehen.This way, you can rotate the object around the point analogous to a planet orbiting around a star.

Positionieren eines ObjektsPositioning an object

Sie haben nun erfahren, wie Sie ein Objekt im Raum drehen können.So far, you learned how to rotate an object in space. Mit den folgenden Eigenschaften können Sie diese gedrehten Objekte relativ zueinander im Raum positionieren:You can position these rotated objects in space relative to one another by using these properties:

  • LocalOffsetX verschiebt ein Objekt entlang der X-Achse der Fläche eines gedrehten Objekts.LocalOffsetX moves an object along the x-axis of the plane of a rotated object.
  • LocalOffsetY verschiebt ein Objekt entlang der Y-Achse der Fläche eines gedrehten Objekts.LocalOffsetY moves an object along the y-axis of the plane of a rotated object.
  • LocalOffsetZ verschiebt ein Objekt entlang der Z-Achse der Fläche eines gedrehten Objekts.LocalOffsetZ moves an object along the z-axis of the plane of a rotated object.
  • GlobalOffsetX verschiebt ein Objekt entlang der am Bildschirm ausgerichteten X-Achse.GlobalOffsetX moves an object along the screen-aligned x-axis.
  • GlobalOffsetY verschiebt ein Objekt entlang der am Bildschirm ausgerichteten Y-Achse.GlobalOffsetY moves an object along the screen-aligned y-axis.
  • GlobalOffsetZ verschiebt ein Objekt entlang der am Bildschirm ausgerichteten Z-Achse.GlobalOffsetZ moves an object along the screen-aligned z-axis.

Lokaler VersatzLocal offset

Die Eigenschaften LocalOffsetX, LocalOffsetY und LocalOffsetZ versetzen ein Objekt entlang der entsprechenden Achse der Fläche des Objekts, nachdem dieses gedreht wurde.The LocalOffsetX, LocalOffsetY, and LocalOffsetZ properties translate an object along the respective axis of the plane of the object after it has been rotated. Daher bestimmt die Drehung des Objekts die Richtung, in die das Objekt versetzt wird.Therefore, the rotation of the object determines the direction that the object is translated. Zum Verdeutlichen dieses Konzepts wird im folgenden Beispiel LocalOffsetX von 0 bis 400 Grad animiert, und RotationY wird von 0 bis 65 Grad animiert.To demonstrate this concept, the next sample animates LocalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

Im vorigen Beispiel ist zu beobachten, dass das Objekt entlang seiner eigenen X-Achse verschoben wird.Notice in the preceding sample that the object is moving along its own x-axis. Das Objekt wird gleich zu Beginn der Animation, wenn der Wert von RotationY nahe null liegt (d. h. parallel zum Bildschirm), entlang des Bildschirms in der X-Richtung verschoben. Während das Objekt jedoch in Richtung des Betrachters gedreht wird, erfolgt eine Verschiebung entlang der X-Achse der Objektfläche in Richtung Betrachter.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. Wenn Sie die RotationY-Eigenschaft jedoch mit einem Wert von -65 Grad animiert haben, wird das Objekt in einer Kurvenbewegung vom Betrachter weg gedreht.On the other hand, if you animated the RotationY property to -65 degrees, the object would curve away from you.

LocalOffsetY funktioniert ähnlich wie LocalOffsetX, die Bewegung erfolgt jedoch entlang der vertikalen Achse. Eine Änderung von RotationX wirkt sich daher auf die Richtung aus, in der LocalOffsetY das Objekt verschiebt.LocalOffsetY works similarly to LocalOffsetX, except that it moves along the vertical axis, so changing RotationX affects the direction LocalOffsetY moves the object. Im nächsten Beispiel wird LocalOffsetY von 0 bis 400 Grad animiert, und RotationX wird von 0 bis 65 Grad animiert.In the next sample, LocalOffsetY is animated from 0 to 400 and RotationX from 0 to 65 degrees.

LocalOffsetZ versetzt das Objekt senkrecht zur Fläche des Objekts, als ob durch den Mittelpunkt an der Objektrückseite ein Vektor direkt in Richtung des Betrachters gezeichnet würde.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. Zum Veranschaulichen der Funktionsweise von LocalOffsetZ wird im folgenden Beispiel LocalOffsetZ von 0 bis 400 Grad animiert, und RotationX wird von 0 bis 65 Grad animiert.To demonstrate how LocalOffsetZ works, the next sample animates LocalOffsetZ from 0 to 400 and RotationX from 0 to 65 degrees.

Das Objekt bewegt sich zu Beginn der Animation, wenn der Wert von RotationX nahe null liegt (d. h. parallel zum Bildschirm), direkt in Richtung des Betrachters, mit der Abwärtsdrehung des Objekts wird dieses jedoch nach unten verschoben.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.

Globaler VersatzGlobal offset

Die Eigenschaften GlobalOffsetX, GlobalOffsetY und GlobalOffsetZ versetzen das Objekt entlang der Achsen relativ zum Bildschirm.The GlobalOffsetX, GlobalOffsetY, and GlobalOffsetZ properties translate the object along axes relative to the screen. Anders als bei den Eigenschaften für den lokalen Versatz ist daher die Achse, entlang der das Objekt verschoben wird, unabhängig von der auf das Objekt angewendeten Drehung.That is, unlike the local offset properties, the axis the object moves along is independent of any rotation applied to the object. Diese Eigenschaften sind hilfreich, wenn Sie das Objekt lediglich entlang der X-, Y- oder Z-Achse des Bildschirms verschieben möchten und eine Drehung des Objekts keine Rolle spielt.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.

Im nächsten Beispiel wird GlobalOffsetX von 0 bis 400 Grad animiert, und RotationY wird von 0 bis 65 Grad animiert.The next sample animates GlobalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.

Sie stellen fest, dass in diesem Beispiel die Richtung des Objekts während seiner Drehung nicht geändert wird.Notice in this sample that the object does not change course as it rotates. Dies liegt daran, dass das Objekt ungeachtet seiner Drehung entlang der X-Achse des Bildschirms gedreht wird.That is because the object is being moved along the x-axis of the screen without regard to its rotation.

Weitere komplexe Semi-3D-SzenarienMore complex semi-3D scenarios

Sie können den Matrix3DProjection-Typ und den Matrix3D-Typ für Semi-3D-Szenarien nutzen, die komplexer als die von PlaneProjection unterstützten sind.You can use the Matrix3DProjection and Matrix3D types for more complex semi-3D scenarios than are possible with the PlaneProjection. Matrix3DProjection bietet Ihnen eine komplette 3D-Transformationsmatrix, die auf ein beliebiges UIElement angewendet werden kann. Somit können Sie Transformationsmatrizen und Perspektivmatrizen beliebiger Modelle auf Elemente anwenden.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. Beachten Sie, dass diese APIs nur im Minimalzustand vorliegen. Wenn Sie sie also nutzen möchten, müssen Sie den Code schreiben, mit dem die 3D-Transformationsmatrizen ordnungsgemäß erstellt werden.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. Daher ist es einfacher, für einfache 3D-Szenarien PlaneProjection zu verwenden.Because of this, it is easier to use PlaneProjection for simple 3D scenarios.