Tilt an image on mouse move in Silverlight 3 (3D Animation)

Introduction

Have you ever seen an image moving at angles on your mouse move. I applications like games etc.. one would have noticed and wondered how. Silverlight 3 has provided the Projection concept that gives a 3D effect for the 2D Images.

In this article let’s see how we can make an image tilt on mouse movement.PlaneProjection is the key tag to make it possible. 

XAML

1.    Place an image tag with source and stretch fill.
Please net that the same can be done for any control (I took image as it is more interesting for me)

<Image Source="images/Logo.png" Stretch="Fill"/>

2.    Add a Plane projection for the Image.
Specify the x:Name so that you can spot the same in the code behind

<Image.Projection>
<PlaneProjection x: Name="projImgLogo" RotationY="0″ RotationX="0″/>
</Image.Projection>

Now we are done with the XAML part and the whole code look like

<Image Source="images/Logo.png" Stretch="Fill">
<Image.Projection>
<PlaneProjection x: Name=" projImgLogo" RotationY="0" RotationX="0"/>
</Image.Projection>
</Image>

Code Behind (C#)

In all Silverlight applications LayoutRoot is the base object in the window (It can be a Grid, Canvas… any Panel which is the root of the controls.).
I have handled the mouse move of the root element, say LayoutRoot.

Every time the mouse is moved mouse co-ordinates are captured and the values are used in the 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’
mousePosition = e.GetPosition(LayoutRoot);
//Use the values stored in ‘pt’ to effect the value of ‘ProjectionFactor’
projImgLogo.RotationY = ((mousePosition.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 100;
projImgLogo.RotationX = ((mousePosition.Y – (LayoutRoot.ActualHeight / 2)) / LayoutRoot.ActualHeight) * 100;
}

Conclusion

This is a small article that provides an animation on mouse move, which looks really interesting in a game like application. Explore it.Happy Coding.