Graphics in Silverlight 5 - Part V

This article continues from the earlier parts of this series: Graphics in Silverlight 5 - Part I, II, III, IV. In this artice, we will look at 3-D graphics in Silverlight. Unlike WPF, Silverlight does not include comprehensive support for 3-D graphics. Support for 3-D graphics is limited in Silverlight. So let's now see what is available and how to use it.
 
You can apply 3-D effects to any UIElement in Silverlight through a feature called perspective transforms. Through perspective transforms, you can create an illusion as though you were rotating or moving your objects in 3-D.
 
You can apply a perspective transform to a UIElement by setting the Projection property of the element to a PlaneProjection. The PlaneProjection class represents a 3-D-like effect on an object. It has around 12 properties that can be used to control the rotation and positioning of an object.
 
Visit the MSDN link mentioned at the bottom of this article to see the 12 properties and their descriptions.
 
The following example renders 3-D like effect to an image. Thus, when you see the output, you will experience an illusion of a 3-D control.
 
 Note: Both examples in this article make use of an image, mill.jpg. The image credit goes to Nimish Dalal (http://nimishdalal.posterous.com/).
 
     <Grid Background="Lavender" x:Name="LayoutRoot">
         <Image Grid.Row="1" Margin="20" Width="400" Height="400" Source="mill.jpg">
             <Image.Effect>
                 <DropShadowEffect />
             </Image.Effect>
             <Image.Projection>
                 <PlaneProjection x:Name="PlaneProjectionRotationY" RotationY="-45" LocalOffsetX="400"/>
             </Image.Projection>
         </Image>
     </Grid>
 
Here, the RotationY property indicates the degree of rotation. For example, the RotationY property will specify the rotation around the vertical axis of the object. The value of RotationY tells you whether the object will be either towards you or away from you. The LocalOffsetX property translates the object along the X axis of the plane of the object after it has been rotated. Therefore, the rotation of the object determines the direction in which you translate the object.
 
The figure shows the output:
 

 
The real advantage of perspective transforms though is seen with animations. Consider the following code:
 
     <Grid Background="Lavender" x:Name="LayoutRoot" Loaded="BeginAnimation">
         <Grid.Resources>
             <Storyboard x:Name="SB1">
                 <DoubleAnimation Duration="0:0:3"
                              Storyboard.TargetName="PlaneProjectionRotationX_1"
                              Storyboard.TargetProperty="RotationX"
                              To="-45"
                              AutoReverse="True"
                              RepeatBehavior="Forever" />
             </Storyboard>
         </Grid.Resources>
         <Image Grid.Row="1" Margin="20" Width="400" Height="400" Source="mill.jpg">
             <Image.Effect>
                 <DropShadowEffect />
             </Image.Effect>
             <Image.Projection>
                 <PlaneProjection x:Name="PlaneProjectionRotationX_1" />
             </Image.Projection>
         </Image>
     </Grid>
 
Here, the image is rotated slightly to render a 3-D like effect. However instead of specifying the rotate coordinates directly through RotationX property, an animation is used to perform the same. The animation is defined inside a storyboard which runs when the grid is loaded. The code-behind will include the following to start the storyboard, which in turn will start the animation.
 
 private void BeginAnimation(Object sender, EventArgs e)
 {
       SB1.Begin();
 }
 
Refer the following link for details of the PlaneProjection class.
 
http://msdn.microsoft.com/en-us/library/system.windows.media.planeprojection%28v=VS.95%29.aspx
 
Conclusion: The fifth part of this series briefly described 3-D graphics in Silverlight.