3D-Perspektiveneffekte für XAML-UI

Sie können 3D-Effekte auf Inhalte in Ihren Windows-Runtime-Apps mithilfe von perspektivischer Transformationen anwenden. Sie können z. B. die Illusion erzeugen, dass ein Objekt in Richtung oder Weg von Ihnen gedreht wird, wie hier gezeigt.

Eine weitere häufige Verwendung für perspektivische Transformationen ist das Anordnen von Objekten im Verhältnis zueinander, um einen 3D-Effekt zu erstellen, wie hier gezeigt.

Neben dem Erstellen statischer 3D-Effekte können Sie die Perspektivische Transformationseigenschaften animieren, um bewegliche 3D-Effekte zu erstellen.

Sie haben gerade perspektivische Transformationen gesehen, die auf Bilder angewendet wurden, aber Sie können diese Effekte auf jedes UIElement anwenden, einschließlich Steuerelemente. Sie können z. B. einen 3D-Effekt auf einen gesamten Container von Steuerelementen wie den folgenden anwenden:

Hier sehen Sie den XAML-Code, der zum Erstellen dieses Beispiels verwendet wird:

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

Hier konzentrieren wir uns auf die Eigenschaften von PlaneProjection , die zum Drehen und Verschieben von Objekten im 3D-Raum verwendet wird. Im nächsten Beispiel können Sie mit diesen Eigenschaften experimentieren und deren Wirkung auf ein Objekt sehen.

PlaneProjection-Klasse

Sie können 3D-Effekte auf ein beliebiges UIElement anwenden, indem Sie die Projektionseigenschaft des UIElements mithilfe einer PlaneProjection festlegen. Die PlaneProjection definiert, wie die Transformation im Raum gerendert wird. Das nächste Beispiel zeigt einen einfachen Fall.

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

Diese Abbildung zeigt, wie das Bild dargestellt wird. Die x-Achse, die Y-Achse und die Z-Achse werden als rote Linien angezeigt. Das Bild wird mithilfe der RotationX-Eigenschaft um 35 Grad um die X-Achse nach hinten gedreht.

Die RotationY-Eigenschaft dreht sich um die Y-Achse des Drehmittelpunkts.

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

Die RotationZ-Eigenschaft dreht sich um die Z-Achse des Drehmittelpunkts (eine Linie, die senkrecht zur Fläche des Objekts ist).

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

Die Drehungseigenschaften können einen positiven oder negativen Wert angeben, der in beide Richtungen gedreht werden soll. Die absolute Zahl kann größer als 360 sein, wodurch das Objekt mehr als eine vollständige Drehung gedreht wird.

Sie können den Drehmittelpunkt mithilfe der Eigenschaften CenterOfRotationX, CenterOfRotationY und CenterOfRotationZ verschieben. Standardmäßig laufen die Drehachsen direkt durch die Mitte des Objekts, wodurch das Objekt um seine Mitte gedreht wird. Wenn Sie jedoch den Drehmittelpunkt an den äußeren Rand des Objekts verschieben, wird es um diesen Rand gedreht. Die Standardwerte für CenterOfRotationX und CenterOfRotationY sind 0,5, und der Standardwert für CenterOfRotationZ ist 0. Für CenterOfRotationX und CenterOfRotationY legen Werte zwischen 0 und 1 den Pivotpunkt an einer bestimmten Position innerhalb des Objekts fest. Ein Wert von 0 gibt einen Objektrand an und 1 kennzeichnet den gegenüberliegenden Rand. Werte außerhalb dieses Bereichs sind zulässig und verschieben den Drehmittelpunkt entsprechend. Da die Z-Achse des Drehmittelpunkts durch die Fläche des Objekts gezeichnet wird, können Sie den Drehmittelpunkt hinter dem Objekt mithilfe einer negativen Zahl und vor dem Objekt (gegenüber) mit einer positiven Zahl verschieben.

CenterOfRotationX verschiebt den Drehmittelpunkt entlang der x-Achse parallel zum Objekt, während CenterOfRotationY den Mittelpunkt oder die Drehung entlang der Y-Achse des Objekts verschiebt. Die nächsten Abbildungen veranschaulichen die Verwendung verschiedener Werte für CenterOfRotationY.

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

CenterOfRotationY = "0,5" (Standard)

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

CenterOfRotationY = "0,1"

Beachten Sie, wie das Bild um die Mitte gedreht wird, wenn die CenterOfRotationY-Eigenschaft auf den Standardwert 0,5 festgelegt ist und bei Festlegung auf 0,1 in der Nähe des oberen Rands gedreht wird. Ein ähnliches Verhalten zeigt sich, wenn Sie die CenterOfRotationX-Eigenschaft ändern, um die Stelle zu verschieben, um die die RotationY-Eigenschaft das Objekt dreht.

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

CenterOfRotationX = "0,5" (Standard)

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

CenterOfRotationX = "0,9" (rechte Kante)

Verwenden Sie CenterOfRotationZ , um den Drehmittelpunkt über oder unterhalb der Fläche des Objekts zu platzieren. Auf diese Weise können Sie das Objekt um den Punkt drehen, der analog zu einem Planeten um einen Stern kreist.

Positionieren eines Objekts

Bisher haben Sie gelernt, wie Sie ein Objekt im Raum drehen. Sie können diese gedrehten Objekte relativ zueinander positionieren, indem Sie die folgenden Eigenschaften verwenden:

• LocalOffsetX verschiebt ein Objekt entlang der X-Achse der Ebene eines gedrehten Objekts.
• LocalOffsetY verschiebt ein Objekt entlang der y-Achse der Ebene eines gedrehten Objekts.
• LocalOffsetZ verschiebt ein Objekt entlang der Z-Achse der Ebene eines gedrehten Objekts.
• GlobalOffsetX verschiebt ein Objekt entlang der Bildschirmachse.
• GlobalOffsetY verschiebt ein Objekt entlang der Bildschirmachse.
• GlobalOffsetZ verschiebt ein Objekt entlang der bildschirmbündigen Z-Achse.

Lokaler Versatz

Die Eigenschaften LocalOffsetX, LocalOffsetY und LocalOffsetZ verschieben ein Objekt nach seiner Drehung entlang der jeweiligen Achse der Ebene des Objekts. Daher bestimmt die Drehung des Objekts die Richtung, in die das Objekt übersetzt wird. Um dieses Konzept zu veranschaulichen, animiert das nächste Beispiel LocalOffsetX von 0 bis 400 und RotationY von 0 bis 65 Grad.

Beachten Sie im vorherigen Beispiel, dass sich das Objekt entlang einer eigenen X-Achse bewegt. Am Anfang der Animation, wenn der RotationY-Wert nahe Null (parallel zum Bildschirm) liegt, bewegt sich das Objekt entlang des Bildschirms in der x-Richtung, während sich das Objekt in Richtung Sie dreht, bewegt sich das Objekt entlang der X-Achse der Fläche des Objekts in Richtung Sie. Wenn Sie dagegen die RotationY-Eigenschaft auf -65 Grad animieren, würde das Objekt von Ihnen wegkurven.

LocalOffsetY funktioniert ähnlich wie LocalOffsetX, mit der Ausnahme, dass es entlang der vertikalen Achse verschoben wird, sodass sich das Ändern von RotationX auf die Richtung " LocalOffsetY" auswirkt. Im nächsten Beispiel wird LocalOffsetY von 0 bis 400 und RotationX 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. Um zu veranschaulichen, wie LocalOffsetZ funktioniert, wird im nächsten Beispiel LocalOffsetZ von 0 bis 400 und RotationX von 0 bis 65 Grad animiert.

Wenn der Wert von RotationX zu Beginn der Animation nahe null liegt (parallel zum Bildschirm), bewegt sich das Objekt direkt auf Sie zu; doch sobald sich die Vorderseite des Objekts nach unten dreht, bewegt sich das Objekt stattdessen nach unten.

Globaler Offset

Die GlobalOffsetX-, GlobalOffsetY- und GlobalOffsetZ-Eigenschaften verschieben das Objekt entlang der bildschirmbezogenen Achsen. Im Gegensatz zu den lokalen Offseteigenschaften ist die Achse, entlang der das Objekt bewegt wird, unabhängig von jeder Drehung, die auf das Objekt angewendet wird. Diese Eigenschaften sind nützlich, wenn Sie das Objekt einfach entlang der X-, Y- oder Z-Achse des Bildschirms verschieben möchten, ohne sich Gedanken über die Drehung machen zu müssen, die auf das Objekt angewendet wird.

Das nächste Beispiel animiert GlobalOffsetX von 0 bis 400 und RotationY von 0 bis 65 Grad.

Beachten Sie in diesem Beispiel, dass das Objekt den Kurs nicht ändert, während es gedreht wird. Das liegt daran, dass das Objekt auf der x-Achse des Bildschirms ohne Rücksicht auf seine Drehung bewegt wird.

Komplexere Semi-3D-Szenarien

Sie können die Matrix3DProjection - und Matrix3D-Typen für komplexere Semi-3D-Szenarien verwenden, als mit planeProjection möglich sind. Matrix3DProjection bietet Ihnen eine vollständige 3D-Transformationsmatrix, die auf jedes UIElement angewendet werden kann, damit Sie beliebige Modelltransformationsmatrizen und perspektivische Matrizen auf Elemente anwenden können. Beachten Sie, dass diese API minimal sind und daher, wenn Sie sie verwenden, den Code schreiben müssen, der die 3D-Transformationsmatrizen ordnungsgemäß erstellt. Aus diesem Grund ist es einfacher, PlaneProjection für einfache 3D-Szenarien zu verwenden.