3D-Perspektiveneffekte für XAML-UI

Mithilfe der perspektivischen Transformation können Sie 3D-Effekte auf Inhalte in Ihren Windows-Runtime-Apps anwenden. Sie können z. B. wie hier gezeigt die Illusion schaffen, dass sich ein Objekt auf Sie zu oder von Ihnen wegbewegt.

Eine weitere häufige Anwendung von perspektivischen Transformationen besteht in der Anordnung von Objekten relativ zueinander, wodurch wie hier ein 3D-Effekt erzeugt wird.

Neben dem Erzeugen von statischen 3D-Effekten können Sie die Eigenschaften der perspektivischen Transformation animieren, um 3D-Bewegungseffekte zu erzielen.

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. Sie können beispielsweise wie folgt einen 3D-Effekt auf einen ganzen Container von Steuerelementen anwenden:

Dieses Beispiel wurde mit folgendem XAML-Code erstellt:

<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. Im folgenden Beispiel können Sie mit den Eigenschaften experimentieren und feststellen, wie sie sich auf ein Objekt auswirken.

PlaneProjection-Klasse

Sie können 3D-Effekte auf jedes UIElement anwenden. Dazu legen Sie die Projection-Eigenschaft für das UIElement mit einer PlaneProjection fest. Die PlaneProjection definiert, wie die Transformation im Raum gerendert wird. Im nächsten Beispiel wird ein einfacher Fall veranschaulicht.

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

Die Abbildung zeigt, wie das Bild gerendert wird. Die X-Achse, die Y-Achse und die Z-Achse sind als rote Linien dargestellt. Das Bild wird mit der RotationX-Eigenschaft um 35 Grad um die X-Achse rückwärts gedreht.

Die RotationY-Eigenschaft führt eine Drehung um die Y-Achse des Drehmittelpunkts aus.

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

Die RotationZ-Eigenschaft führt eine Drehung um die Z-Achse des Drehmittelpunkts aus (eine Linie, die eine Senkrechte zur Objektfläche darstellt).

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

Für die Drehungseigenschaften kann ein positiver oder negativer Wert für die Drehung in beiden Richtungen angegeben werden. Die absolute Zahl kann größer als 360 sein, wodurch das Objekt um mehr als eine volle Drehung gedreht wird.

Sie können den Drehmittelpunkt mithilfe der Eigenschaften CenterOfRotationX, CenterOfRotationY und CenterOfRotationZ verschieben. Standardmäßig verläuft die Drehachse direkt durch den Objektmittelpunkt, wodurch das Objekt um seinen Mittelpunkt gedreht wird. Wenn Sie jedoch den Drehmittelpunkt an den Rand des Objekts verschieben, wird das Objekt um den betreffenden Rand gedreht. Der Standardwert für CenterOfRotationX und CenterOfRotationY ist 0,5, und der Standardwert für CenterOfRotationZ ist 0. Für CenterOfRotationX und CenterOfRotationY wird der Drehpunkt mit Werten zwischen 0 und 1 auf eine bestimmte Position auf dem Objekt festgelegt. Durch den Wert "0" wird ein Rand des Objekts angegeben, während mit dem Wert "1" der gegenüberliegende Rand angegeben wird. Werte außerhalb dieses Bereichs sind zulässig, und der Drehmittelpunkt wird entsprechend verschoben. 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.

CenterOfRotationX verschiebt den Drehmittelpunkt entlang der X-Achse parallel zum Objekt, während CenterOfRotationY den Drehmittelpunkt entlang der Y-Achse des Objekts verschiebt. In der folgenden Abbildung wird die Auswirkung von verschiedenen Werten für CenterOfRotationY veranschaulicht.

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

CenterOfRotationY = "0,5" (Standardeinstellung)

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

CenterOfRotationY = "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. 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.

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

CenterOfRotationX = "0,5" (Standardeinstellung)

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

CenterOfRotationX = "0,9" (rechter Rand)

Platzieren Sie den Drehmittelpunkt mithilfe von CenterOfRotationZ über bzw. unter der Fläche des Objekts. Auf diese Weise können Sie das Objekt wie einen Planeten auf seiner Umlaufbahn um einen Stern um den betreffenden Punkt drehen.

Positionieren eines Objekts

Sie haben nun erfahren, wie Sie ein Objekt im Raum drehen können. Mit den folgenden Eigenschaften können Sie diese gedrehten Objekte relativ zueinander im Raum positionieren:

• LocalOffsetX verschiebt ein Objekt entlang der X-Achse der Fläche eines gedrehten Objekts.
• LocalOffsetY verschiebt ein Objekt entlang der Y-Achse der Fläche eines gedrehten Objekts.
• LocalOffsetZ verschiebt ein Objekt entlang der Z-Achse der Fläche eines gedrehten Objekts.
• GlobalOffsetX verschiebt ein Objekt entlang der am Bildschirm ausgerichteten X-Achse.
• GlobalOffsetY verschiebt ein Objekt entlang der am Bildschirm ausgerichteten Y-Achse.
• GlobalOffsetZ verschiebt ein Objekt entlang der am Bildschirm ausgerichteten Z-Achse.

Lokaler Versatz

Die Eigenschaften LocalOffsetX, LocalOffsetY und LocalOffsetZ versetzen ein Objekt entlang der entsprechenden Achse der Fläche des Objekts, nachdem dieses gedreht wurde. Daher bestimmt die Drehung des Objekts die Richtung, in die das Objekt versetzt wird. Zum Verdeutlichen dieses Konzepts wird im folgenden Beispiel LocalOffsetX von 0 bis 400 Grad animiert, und RotationY wird von 0 bis 65 Grad animiert.

Im vorigen Beispiel ist zu beobachten, dass das Objekt entlang seiner eigenen X-Achse verschoben wird. 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. Wenn Sie die RotationY-Eigenschaft jedoch mit einem Wert von -65 Grad animiert haben, wird das Objekt in einer Kurvenbewegung vom Betrachter weg gedreht.

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. Im nächsten Beispiel wird LocalOffsetY von 0 bis 400 Grad animiert, und RotationX wird von 0 bis 65 Grad animiert.

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. 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.

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.

Globaler Versatz

Die Eigenschaften GlobalOffsetX, GlobalOffsetY und GlobalOffsetZ versetzen das Objekt entlang der Achsen relativ zum Bildschirm. 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. 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.

Im nächsten Beispiel wird GlobalOffsetX von 0 bis 400 Grad animiert, und RotationY wird von 0 bis 65 Grad animiert.

Sie stellen fest, dass in diesem Beispiel die Richtung des Objekts während seiner Drehung nicht geändert wird. Dies liegt daran, dass das Objekt ungeachtet seiner Drehung entlang der X-Achse des Bildschirms gedreht wird.

Weitere komplexe Semi-3D-Szenarien

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. 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. 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. Daher ist es einfacher, für einfache 3D-Szenarien PlaneProjection zu verwenden.