Silverlight 3: Perspective Transforms Tutorial

Submitted by Umesh Patel (March 18, 2009)

Perspective Transforms in Silverlight 3 is the next step towards developing 3D Silverlight applications.  In previous versions of Silverlight, transforms were processed in the X and Y axis using the UIElement's RenderTransform property.  Silverlight 3 uses the PlaneProjection class to render 3D-like effects.  All elements, that derive from UIElement, have the Projection property that allows the element to simulate transformation in a 3D space.

In this tutorial, we will show you how to use the Perspective Transforms for your applications.

Image: Sans Transforms

1. Create a new Silverlight Application.
2. Add an Image to the project.
3. Add an Image control to MainPage.xaml.

   <Grid Background="Black" Width="640" Height="480">

       <Image Source="Waterfall.jpg" Width="320" Height="240">        

       </Image>

   </Grid>

4. Compile and run the program.

   

Image: Perspective Transforms

The 3D space in Silverlight has the X axis in the horizontal direction, Y axis in the vertical direction, and Z axis representing the depth.  Translating the objects match the direction of the axis. If you want to object on the left side of the screen, you will move in the negative direction of the X axis.  The same goes if you want the object to move to the upper side of the screen in regards to the Y axis.  Rotation works differently because the rotation is performed along the axis. If you want to rotate in the X-axis, which is a horizontal axis, the object will actually rotate up and down. 

The PlaneProjection class has the following translation properties:

• LocalOffsetX, LocalOffsetY, LocalOffsetZ
• GlobalOffsetX, GlobalOffsetY, GlobalOffsetZ

The class also has the following rotation properties:

• CenterOfRotationX, CenterOfRotationY, CenterOfRotationZ
• RotationX, RotationY, RotationZ

1. Add the PlaneProjection Property to the Image.

   <Image Source="Waterfall.jpg" Width="320" Height="240">        

       <Image.Projection>

           <PlaneProjection />

       </Image.Projection>

   </Image>

2. The output should be the same because the image has the default projection.
3. Set the PlaneProjection's RotationX property to 45.  The image will rotate along the X axis.
   

   <PlaneProjection RotationX="45" />

   
   
4. Set the PlaneProjection's RotationY property to 45.  The image will rotate along the Y axis.
   

   <PlaneProjection RotationY="45" />

   
   
5. Set the PlaneProjection's RotationZ property to 45.  The image will rotate along the Z axis.
   

   <PlaneProjection RotationZ="45" />

   
   
6. Set the PlaneProjection's LocalOffsetZ property to 300.  The image will move along the Z axis.
   

   	<PlaneProjection LocalOffsetZ="300" />
   	<PlaneProjection LocalOffsetZ="-300" />

   
   
7. The PlaneProjection's transform properties can be combined for additional effects.  Here are some examples.
   

   	<PlaneProjection RotationX="60" RotationY="60" />
   	<PlaneProjection RotationX="-60" RotationZ="60" GlobalOffsetZ="100" />

Transforms on Layouts

Layout controls also derive from the UIElement and can take advantage of the perspective transformations.  This allows for multiple controls to be transformed at the same time.

1. Place the Image into a StackPanel and add a TextBlock.
2. Apply the Projection property to the StackPanel.
   

   <StackPanel>

       <StackPanel.Projection>

           <PlaneProjection RotationX="-60" />

       </StackPanel.Projection>

       <Image Source="Waterfall.jpg" Width="320" Height="240" />

       <TextBlock Text="Sample Image" Foreground="White" FontSize="32" HorizontalAlignment="Center" />

   </StackPanel>

   

Animating Transforms

1. Set the projection's x:Name property to projection.
2. Create the storyboard to animate the projection in MainPage.xaml.
   

   <Storyboard x:Key="RotateX" Storyboard.TargetName="projection" Storyboard.TargetProperty="RotationX">

       <DoubleAnimation From="0" To="360" RepeatBehavior="Forever" />

   </Storyboard>

3. Run the storyboard in MainPage.xaml.cs.
   

   (this.Resources["RotateX"] as Storyboard).Begin();

4. Compile and run the application.  The objects will constantly rotate along the X axis. Pretty cool, huh?

Conclusion

Perspective Transformations opens the doors for a wide variety of 3D-like web applications. In its current state, the PlaneProjection class can perform traditional translation and rotation on the respected object. These transformations can be further parented to have advanced perspective transformations.