3-D Effects (Perspective Transforms)
Microsoft Silverlight will reach end of support after October 2021. Learn more.
You can apply 3-D effects to any Silverlight UIElement using what are called "perspective transforms." For example, you can create the illusion that an object is rotated toward or away from you, as shown in the following illustration.
Image with Perspective Transform
.png "Image with perspective transform applied.")
Although the preceding illustration shows a perspective transform applied to a simple image, you can apply one to any UIElement, including controls. For example, you could apply the effect to a Grid that in turn contains a TextBox and Button. Despite the controls being rotated, the user could type into the TextBox and click the Button (assuming the controls are visible).
Another common scenario for using perspective transforms is to arrange objects in relation to one another to create a 3-D effect, as shown in the following illustration.
Stacking objects to create a 3-D effect
.png "Shows stacking objects in 3d effect.")
Besides creating static 3-D effects, you can animate the perspective transform properties to create moving 3-D effects.
This overview focuses on the properties used by perspective transforms to rotate and move objects in 3-D space. The following sample allows you to experiment with these properties and see their effect on an object. These properties are explained in detail in the sections that follow.
.gif "Note") Note: |
|---|
Perspective transforms are not equivalent to a 3-D engine; however, they can be used to make 2-D Silverlight content appear as if it is drawn on a 3-D plane. |
This topic contains the following sections.
- Rotating an Object on a 3-D Plane
- Positioning an Object
- Matrix3DProjection and Matrix3D
- Related Topics
Rotating an Object on a 3-D Plane
To apply a perspective transform to a UIElement, set the UIElement object's Projection property to a PlaneProjection. The PlaneProjection defines how the transform is rendered in space. The following example shows a simple case.
<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>
In the preceding example, the RotationX, RotationY, and RotationZ properties specify the number of degrees to rotate the StackPanel around an axis. For example, the RotationX property specifies rotating around the horizontal axis of the object. The following illustration demonstrates how the RotationX property rotates an object around the x-axis.
RotateX = "-35"
.png "Rotate around X-axis")
Notice in the illustration how the y-axis and z-axis are also shown. The point at which all three axes intersect is called the center of rotation.
The RotationY property rotates around the y-axis of the center of rotation.
RotateY = "-35"
.png "Rotate around the Y-axis.")
The RotationZ property rotates around the z-axis of the center of rotation (a line that goes directly through the plane of the object).
RotateZ = "-45"
.png "Rotate around z-axis.")
These rotation properties can specify a negative value, which rotates the object a number of degrees in the opposite direction. In addition, the absolute number can be greater than 360, which rotates the object more than one full rotation. In the following sample, you can experiment with different values for the RotationX, RotationY, and RotationZ properties to see the effect.
You can move the center of rotation by using the CenterOfRotationX, CenterOfRotationY, and CenterOfRotationZ properties. By default, the axes of rotation run directly through the center of the object, causing the object to rotate around its center; however, if you move the center of rotation to the outer edge of the object, it will rotate around that edge. The default values for CenterOfRotationX and CenterOfRotationY are 0.5, and the default value for CenterOfRotationZ is 0. For CenterOfRotationX and CenterOfRotationY, values between 0 and 1 set the pivot point at some location within the object. A value of 0 denotes one object edge and 1 denotes the opposite edge. Values outside of this range are allowed and will move the center of rotation accordingly. 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 above the object (toward you) using a positive number.
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. The following illustrations demonstrate using different values for CenterOfRotationY.
CenterOfRotationY = "0.5" (default)
CenterOfRotationY = "0.1" (upper edge)
.png "CenterOfRotationY value of 0.1.")
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. You see similar behavior when changing the CenterOfRotationX property to move where the RotationY property rotates the object.
CenterOfRotationX = "0.5" (default)
CenterOfRotationX = "0.9" (right-hand edge)
.png "CenterOfRotationX value of 0.9.")
Use the following slider sample to experiment with rotating the object around different locations for the center of rotation.
You use the CenterOfRotationZ to place the center of rotation above or below the plane of the object. This allows you to rotate the object around the point like a planet orbits around a star.
Positioning an Object
Thus far, you have learned how to rotate an object in space. In addition, you can position these rotated objects in space relative to one another by using the following properties:
LocalOffsetX translates an object along the x-axis of the plane of a rotated object.
LocalOffsetY translates an object along the y-axis of the plane of a rotated object.
LocalOffsetZ translates an object along the z-axis of the plane of a rotated object.
GlobalOffsetX translates an object along the screen-aligned x-axis.
GlobalOffsetY translates an object along the screen-aligned y-axis
GlobalOffsetZ translates an object along the screen-aligned z-axis
Local Offset
The LocalOffsetX, LocalOffsetY, and LocalOffsetZ properties translate an object along the respective axis of the plane of the object after it has been rotated. Therefore, the rotation of the object determines the direction that the object is translated. To demonstrate this concept, the following sample animates LocalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.
Notice in the preceding sample that the object is moving along the x-axis of the object. 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. On the other hand, if you animated the RotationY property to -65 degrees, the object would curve away from you.
LocalOffsetY works similarly to LocalOffsetX, except that it moves along the vertical axis, so changing RotationX affects the direction LocalOffsetY moves the object. In the following sample, LocalOffsetY is animated from 0 to 400 and RotationX from 0 to 65 degrees.
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. To demonstrate how LocalOffsetZ works, the following sample animates LocalOffsetZ from 0 to 400 and RotationX from 0 to 65 degrees.
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 rather than toward you.
Global Offset
The GlobalOffsetX, GlobalOffsetY, and GlobalOffsetZ properties translate the object along axes relative to the screen. That is, unlike the local offset properties, the axis the object moves along is independent of any rotation applied to the object. 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.
The following sample animates GlobalOffsetX from 0 to 400 and RotationY from 0 to 65 degrees.
Notice in the preceding sample that the object does not change course as it rotates. That is because the object is being moved along the x-axis of the screen without regard to its rotation.
The following sample allows you to experiment with translating the object along global versus local offsets.
Matrix3DProjection and Matrix3D
You can use the Matrix3DProjection and Matrix3D types for more complex semi-3D scenarios than are possible with the PlaneProjection. Matrix3DProjection provides you with a complete 3D transform Matrix to apply to any UIElement, thus making it possible to apply arbitrary model transformation matrices and perspective matrices to Silverlight elements. 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. Because of this, it is easier to use PlaneProjection for simple 3D scenarios.
See Also