June 10th, 2009

Controlling Projection in Silverlight 3

All Silverlight Examples, Silverlight 3 tutorials, Silverlight C# Tutorials, Silverlight Effects, by Gavin Wignall.

In the below example I use the new Projection control to create a 3d effect based on the users mouse position. This is a great technique and it looks fantastic, really taking advantage of the new Silverlight capabilities. Whether you’re creating presentations for online universities or an interesting tag cloud for a blog. But how do you create such an effect in Silverlight?

In Silverlight 3 we have 2 new variables to give us the ability to show perspective. We can use this effect on any item, including Images and Text. These 2 new variables are:

RotationY
RotationX

Step by step

Firstly, I place an x:Name called ‘ProjectionFactor’ in the XAML. This gets placed in the ‘PlaneProjection’ tag of the object I want to control:

<Image Source=”images/sbLogo.png” Stretch=”Fill”>
<Image.Projection>
<PlaneProjection
x:Name=”ProjectionFactor” RotationY=”0″ RotationX=”0″/>
</Image.Projection>
</Image>

I then set up a listener in the C# to capture when the mouse is moved. Everytime the mouse is moved I capture the mouse co-ordinates and use the values in the below equations to get the desired effect:

void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
//Get the mouse X and Y positions and store it in ‘pt’
pt = e.GetPosition(LayoutRoot);
//Use the values stored in ‘pt’ to effect the value of ‘ProjectionFactor’
ProjectionFactor.RotationY = ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 100;
ProjectionFactor.RotationX = ((pt.Y – (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 100;
}

Grab the code

As usual you can download the example files here.

Back Top

Responses to “Controlling Projection in Silverlight 3”

  1. Hi.
    I have installed the latest SL runtime with version 3.0.40307.0.
    I can’t run your demo, because you decalred the minRuntimeVersion to 3.0.40512.0. From where I can get this version to run you online demo?

    Thanks in advance.

  2. All should be fixed now, thanks for the heads up ;)

  3. The article is ver good. Write please more

  4. This article is very good,can you given more example

    Vikram Selvaraj at January 5, 2010 1:29 pm
  5. Thank you for killing my boredom. I am currently at work lol. Good Read.

  6. Hi,

    Thanks for your post,

    I would like to know if you can give me more information about the equation to get this effect

    ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 100

    Kind regards

  7. Hi this is cool. but one thing which is confusing me is, how the event LayoutRoot_MouseMove works without being called by xaml like this:

    ——————————————–

  1. Twitted by silverlightbuzz (,June 10, 2009)

    [...] This post was Twitted by silverlightbuzz – Real-url.org [...]

  2. Creating a 3D cube with images in Silverlight 3 (,June 16, 2009)

    [...] Controlling Projection in Silverlight 3 [...]

  3. Shadow effect using 3D projection in Silverlight 3 » (,June 20, 2009)

    [...] Controlling Projection in Silverlight 3 [...]

  4. 3D in Silverlight Tutorial from Silverlight Buzz « Vincent Leung .NET Tech Clips (,January 28, 2010)

    [...] Controlling Projection in Silverlight 3 [...]

Leave a Reply

Back Top