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;
}
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.
All should be fixed now, thanks for the heads up
The article is ver good. Write please more
This article is very good,can you given more example
Thank you for killing my boredom. I am currently at work lol. Good Read.
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
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:
——————————————–
[...] This post was Twitted by silverlightbuzz – Real-url.org [...]
This post has been featured here: http://www.silverlight-travel.com/blog/2009/06/11/controlling-projection-in-silverlight-3/
[...] Controlling Projection in Silverlight 3 [...]
[...] Controlling Projection in Silverlight 3 [...]
[...] Controlling Projection in Silverlight 3 [...]