In Silverlight, you can apply 3D effects to any UIElement using what are called perspective transforms.

This QuickStart contains the following sections:

3D Effects Example

Using 3D effects, you can create the illusion that an object is rotated toward or away from you. In the following example, click the left or right images to see a 3D animation effect.

PlaneProjection Class

3D effects can be applied to any Silverlight UIElement, by setting the UIElement's Projection property to a PlaneProjection. The PlaneProjection defines how the transform is rendered in space. The following example shows a simple case.

XAML

<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 a center of rotation point. The RotationX property specifies rotating around the horizontal axis of the object, RotationY specifies a rotation around the vertical axis, and RotationZ specifies rotating around the z-axis of the center of rotation (a line that goes directly through the plane of the object). These rotation properties are three of the twelve properties you can set on a PlaneProjection object which effect how the object is rendered in 3D space. The list below summarizes all of the Projection properties.

• CenterOfRotationX: The x-coordinate of the center of rotation of the object you rotate. Use this in combination with CenterOfRotationY and/or RotationZ.
• CenterOfRotationY: The y-coordinate of the center of rotation of the object you rotate. Use this in combination with RotationX and/or RotationZ.
• CenterOfRotationZ: The z-coordinate of the center of rotation of the object you rotate. Use this in combination with RotationX and CenterOfRotationY.
• GlobalOffsetX: The distance the object is translated along the x-axis of the screen.
• GlobalOffsetY: The distance the object is translated along the y-axis of the screen.
• GlobalOffsetZ: The distance the object is translated along the x-axis of the screen.
• LocalOffsetX: The distance the object is translated along the x-axis of the plane of the object.
• LocalOffsetY: The distance the object is translated along the y-axis of the plane of the object.
• LocalOffsetZ: The distance the object is translated along the z-axis of the plane of the object.
• RotationX: The number of degrees to rotate the object around the x-axis of rotation.
• RotationY: The number of degrees to rotate the object around the y-axis of rotation.
• RotationZ: The number of degrees to rotate the object around the z-axis of rotation.

In the following example, use the sliders to experiment with these twelve properties. Click the "Reset" button to reset all the properties back to their default values.

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

• Silverlight 3D Effects Overview
• PlaneProjection
• Graphics