- Controlling Size
- Controlling Position
- Applying 2D Transforms
- Applying 3D Transforms
- Further Exploration
- Summary
- Q&A
- Workshop
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Applying 3D Transforms
Although you can integrate DirectX into a XAML app to work with a full 3D graphics engine, the XAML UI Framework does not directly expose full 3D capabilities. It does, however, enable you to perform the most common 3D effects with perspective transforms. These transforms escape the limitations of the 2D transforms by enabling you to rotate and translate an element in any or all of the three dimensions.
Perspective transforms are normally done with a class called PlaneProjection, which defines RotationX, RotationY, and RotationZ properties. The X and Y dimensions are defined as usual, and the Z dimension extends into and out of the screen, as illustrated in Figure 3.12. X increases from left-to-right, Y increases from top-to-bottom, and Z increases from back-to-front.
)
Figure 3.12 The three dimensions, relative to the screen
Although plane projections act like transforms, they derive from a class called Projection rather than Transform. Therefore, one cannot be assigned to an element via its RenderTransform property, but rather a separate property called Projection. The following plane projections are marked on playing card images, producing the result in Figure 3.13:
<StackPanelOrientation="Horizontal"><ImageSource="Images/CardHA.png"Width="150"Margin="12"><Image.Projection><PlaneProjectionRotationX="55"/></Image.Projection></Image><ImageSource="Images/CardH2.png"Width="150"><Image.Projection><PlaneProjectionRotationY="55"/></Image.Projection></Image><ImageSource="Images/CardH3.png"Width="150"Margin="36"><Image.Projection><PlaneProjectionRotationZ="55"/></Image.Projection></Image><ImageSource="Images/CardH4.png"Width="150"Margin="48"><Image.Projection><PlaneProjectionRotationX="30"RotationY="30"RotationZ="30"/></Image.Projection></Image></StackPanel>
)
Figure 3.13 Using a plane projection to rotate the card around the X, Y, and Z axes, then all three axes
Notice that rotating around only the Z axis is like using a 2D RotateTransform, although the direction is reversed.
Much like the 2D transform classes, PlaneProjection defines additional properties for changing the center of rotation: CenterOfRotationX, CenterOfRotationY, and CenterOfRotationZ. The first two properties are relative to the size of the element, on a scale from 0 to 1. The CenterOfRotationZ property is always in terms of absolute pixels, as elements never have any size in the Z dimension to enable a relative specification.
PlaneProjection defines six properties for translating an element in any or all dimensions. GlobalOffsetX, GlobalOffsetY, and GlobalOffsetZ apply the translation after the rotation, so the offsets are relative to the global screen coordinates. LocalOffsetX, LocalOffsetY, and LocalOffsetZ apply the translation before the rotation, causing the rotation to be relative to the rotated coordinate space.