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.

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.

Tags: , , , , , , , , , , ,

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.
    Kiener at June 12, 2009 12:13 pm Reply

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

    Gavin Wignall at June 12, 2009 5:54 pm Reply

  3. The article is ver good. Write please more
    JaneRadriges at June 13, 2009 6:04 pm Reply

  4. This article is very good,can you given more example
    Vikram Selvaraj at January 5, 2010 1:29 pm Reply

  5. Thank you for killing my boredom. I am currently at work lol. Good Read.
    3DTV Forum at January 23, 2010 8:00 pm Reply
  1. Twitted by silverlightbuzz (,June 10, 2009)

    [...] This post was Twitted by silverlightbuzz – Real-url.org [...]
  2. Silverlight Travel; Controlling Projection in Silverlight 3 (,June 11, 2009)

    This post has been featured here: http://www.silverlight-travel.com/blog/2009/06/11/controlling-projection-in-silverlight-3/
  3. Creating a 3D cube with images in Silverlight 3 (,June 16, 2009)

    [...] Controlling Projection in Silverlight 3 [...]
  4. Shadow effect using 3D projection in Silverlight 3 » (,June 20, 2009)

    [...] Controlling Projection in Silverlight 3 [...]
  5. 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