This article is compatible with the latest version of Silverlight.
Introduction
A new feature in Silverlight is the Perspective Transforms. With its help you can simulate rotating an object in 3D space. Note that this is not a real 3D, Silverlight does not support 3D yet.
Overview
Let's start with a little demo:
And let's describe the things step by step. You have an
UIElement, in our situation an image. The X axis of the element is from left to right, the Y axis is going up and down and the Z axis is going in and out of the surface of the image.
If we want to rotate the image on the X axis we are just setting the
RotationX of the
UIElement.Projection as follows:
| <Image x:Name="imgTarantula" Width="400" |
| HorizontalAlignment="Center" VerticalAlignment="Center" |
| Source="http://terraristic.net/photos/Acanthoscurria_geniculata/Acanthoscurria_geniculata_1.jpg"> |
| <Image.Projection> |
| <PlaneProjection RotationX="45"></PlaneProjection> |
| </Image.Projection> |
| </Image> |
And we have the following result:
Similarly if we want to rotate the image on the Y axis we are setting the RotationY:
| <Image.Projection> |
| <PlaneProjection RotationY="45"></PlaneProjection> |
| </Image.Projection> |
The result:
And for the Z axis - the RotationZ:
| <Image.Projection> |
| <PlaneProjection RotationZ="45"></PlaneProjection> |
| </Image.Projection> |
The result:
You can also combine the rotations:
| <Image.Projection> |
| <PlaneProjection RotationX="45" RotationY="45"></PlaneProjection> |
| </Image.Projection> |
The result:
You can create an animation by just adding a Storyboard with the help of which you can control the Projection angles. In the demo above I used the following Storyboard:
| <UserControl x:Class="PerspectiveTransforms.MainPage" |
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
| Width="500" Height="400"> |
| <UserControl.Resources> |
| <Storyboard x:Name="sbRotateImage"> |
| <DoubleAnimation BeginTime="00:00:00" |
| Storyboard.TargetName="imgTarantula" |
| Storyboard.TargetProperty="(UIElement.Projection).(RotationX)" |
| RepeatBehavior="Forever" AutoReverse="True" |
| From="45" To="-45"> |
| </DoubleAnimation> |
| </Storyboard> |
| </UserControl.Resources> |
| <Grid x:Name="LayoutRoot"> |
| <Image x:Name="imgTarantula" Width="400" |
| HorizontalAlignment="Center" VerticalAlignment="Center" |
| Source="http://terraristic.net/photos/Acanthoscurria_geniculata/Acanthoscurria_geniculata_1.jpg"> |
| <Image.Projection> |
| <PlaneProjection RotationX="45"></PlaneProjection> |
| </Image.Projection> |
| </Image> |
| </Grid> |
| </UserControl> |
Code behind:
| public MainPage() |
| { |
| InitializeComponent(); |
| |
| this.sbRotateImage.Begin(); |
| } |
There are several more sets of parameters:
Center of Rotation parameters:
- CenterOfRotationX
- CenterOfRotationY
- CenterOfRotationZ
The values of the first two parameters range from 0 to 1 and are relative to the width and height of the UIElement. The value of the last parameter is absolute. The default values of the CenterOfRotationX and CenterOfRotationY are 0.5 while the default value of the CenterOfRotationZ is 0.
Let's demonstrate them with an example. If you don't set any of these parameters and you are rotating by the Z axis the image rotates as if you have pinned a photo in the center and are rotating this photo around the pin. If you want to change the location of the pin you can use the CenterOfRotationX and CenterOfRotationY. By setting both of them to 0 you move the pin to the upper left corner:
| <Image.Projection> |
| <PlaneProjection RotationZ="45" |
| CenterOfRotationX="0" CenterOfRotationY="0" |
| LocalOffsetZ="0" GlobalOffsetZ="0" > |
| </PlaneProjection> |
| </Image.Projection> |
By analogy if you want to change the center of rotation while rotating by the X axis you can set the CenterOfRotationY and CenterOfRotationZ parameters. And if you want to change the center of rotation while rotating by the Y axis you can set the CenterOfRotationX and CenterOfRotationZ parameters.
Local offset parameters:
- LocalOffsetX
- LocalOffsetY
- LocalOffsetZ
Global offset parameters:
- GlobalOffsetX
- GlobalOffsetY
- GlobalOffsetZ
Think about the global frame of reference as described in the beginning: the X axis is from left to right, the Y axis is going up and down and the Z axis is going in and out of the surface of the screen. Imagine that every UIElement has its own local frame of reference which is the same as the global one when no rotation is applied. When the object rotates its local frame of reference rotates with the object. The local offsets are offsets by the local frame of reference while the global ones are by the global one.
Conclusion
With the use of Perspective Transforms you can easily simulate some 3D effects. Any comments are welcome.