Silverlight 3: What's New with 3D Support

This is the second post in a series where I will be walking through some of the new features in Silverlight 3. I enjoyed reading Tim Sneath’s blog post, https://visitmix.com/Opinions/Whats-New-in-Silverlight-3 but as I read the post I kept saying cool, but how do I do it. So in these posts I will try to answer the “how do I” questions around the new features.

Let’s get started.

Perspective 3D

Perspective 3d gives you the ability to "simulate" 3D using 2D objects.

Create a new Silverlight project

In order to create Silverlight 3 projects you will need to install Visual Studio 2008, and the Silverlight 3 SDK and tools. Create a Silverlight C# project called Perspective3D and accept the defaults which will create 2 projects in the solution.

In this example you will use an image to transform. Add an image to the ClientBin folder of the web project. I have added an image of my latest book.

Add an Image Element

Start with a basic image element.

 <UserControl x:Class="Perspective3D.MainPage"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        
         < Image x:Name ="SharePointBook"               Source
 ="SharePointBook.jpg"               Width="100" Height

 ="125">                    </Image
 > 
        
    </Grid>
</UserControl>

When you run the project (F5) you will see the results below. I have cut out just the image to save space. Below is what the original image looks like before a perspective is added.

Rotate 70 degrees on the X axis

To rotate the image along the X axis you need to Projection and then add a PlaneProjection setting the RotationX attribute to the degree you want to rotate the image.

 <Image x:Name="SharePointBook"
       Source="SharePointBook.jpg"
       Width="100" Height="125">
    
     < Image.Projection ><br>        <PlaneProjection RotationX="70"/> 
     </Image.Projection > 

</Image>

You can set the X, Y and Z rotation. This table shows examples of the various perspectives.

Degrees	70	-70
X Axis (RotationX)
Y Axis (RotationY)
Z Axis (RotationZ)

These attributes can be used together to create realistic 3D transforms of your elements.

Change the Rotation Center

You can also change the center of rotation by setting the CenterOfRotationX (Y or Z) attributes. This is set as a value between 0.0 and 1.0. By default the X and Y center is 0.5 and the Z center is 0.0. To rotate from the top of the image you set the CenterOfRotationX = 0.0.