In the below example I used the new projection properties in Silverlight 3 to build a 3D image carousel. Moving the mouse left to right controls the speed and direction of the carousel. Moving the mouse up and down changes the opacity of the carousel, allowing you to see what is going on behind the carousel.
The ‘how to’ bit
To start with I have placed 6 images inside Blend and used the projection properties to offset them against each other to form a 3 dimensional hexagon. I do this by changing 2 projection properties:
CenterOfRotationZ=”-173″
RotationY=”60″
I use the ‘CenterOfRotationZ’ value to move the center point away from each image plane. This value needs to be the same on each of the 6 images I use in order to get them to match up at the edges. I then use the ‘RotationY’ value to change the angle of each image, as I have 6 images each image is rotated by a factor of 60 degrees (6 x 60 = 360 degrees).
I then place an x:Name on each images projection tag as seen in the below example:
<PlaneProjection x:Name=”Image1Projection” CenterOfRotationZ=”-173″ RotationZ=”0″/>
This will allow me to easily change the angle of each image dynamically in the C#.
In the C# I set up a listener to monitor the mouse movement and store the values in ‘pt’:
void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
pt = e.GetPosition(LayoutRoot);
}
Next I set up a CompositionTarget.Rendering function so that I can update my 3 dimensional carousel constantly. I use the mouse X co-ordinates to change the speed and direction of the carousel and the mouse Y value to change the opacity:
void CompositionTarget_Rendering(object sender, EventArgs e)
{
Image1Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
Image2Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
Image3Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
Image4Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
Image5Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
Image6Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
image1.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;
image2.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;
image3.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;
image4.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;
image5.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;
image6.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5;
}
Grab the code
As always you can grab the code source here .
3 Pings to “Using projection to build a 3D carousel in Silverlight 3”
<!-- You can start editing here. -->
5 Responses to “Using projection to build a 3D carousel in Silverlight 3”
- 1. Mike Says:
June 12th, 2009 at 9:37 pmHey, great post, really well written. You should post more about this.
- 2. GUSTAVO Says:
June 24th, 2009 at 10:04 pmhow i do to select one image ?
- 3. Gavin Wignall Says:
July 3rd, 2009 at 8:24 amI have not written in the functionality to select the items in the carousel, but it is not that difficult. Each image is able to be treated as a button like any other normal image.
- 4. Katarina Says:
July 30th, 2009 at 5:46 pmHello! Love your demo!
I used UserControls instead of images, they appear correctly in Blend but when I run the application they won`t rotate.
It works fine with an image control or grid control.How do I get to rotate my UserControls also?
What am I missing?
Please help out!Thanks in advance!
Katarina
Here is a short code of my example…
MAIN PAGE XAML
MAIN PAGE CODE BEHIND
public MainPage()
{
// Required to initialize variables
InitializeComponent();
ucProj1 = new PlaneProjection();
ucProj2 = new PlaneProjection();
ucProj3 = new PlaneProjection();
ucProj4 = new PlaneProjection();
}private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
ucProj1.RotationY = 60;
ucProj2.RotationY = 120;
ucProj3.RotationY = 180;
ucProj4.RotationY = 240;
LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove);
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);
}void CompositionTarget_Rendering(object sender, EventArgs e)
{
ucProj0.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
ucProj1.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
ucProj2.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
ucProj3.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
ucProj4.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
ucProj5.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10;
}
private Point pt;
void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
pt = e.GetPosition(LayoutRoot);
}USER CONTROL with a grid
<UserControl
…..
……. - 5. jairoxxx Says:
November 24th, 2009 at 3:53 pmthe function to get “-173″ is:
double getApothem(double height, double sides)
{
var x0 = 360.0 / (2 * sides);
var k = Math.Sin(Math.PI * x0 / 180.0);
var r = (double)(height / 2) / k;
return – Math.Sqrt((r * r) – Math.Pow((double)height / 2, (double)2));
}
Leave a Reply
Name (required)
Mail (will not be published) (required)
Website
June 20th, 2009 at 5:00 pm
[...] Using projection to build a 3D carousel in Silverlight 3 [...]
June 20th, 2009 at 5:04 pm
[...] Resource Using projection to build a 3D carousel in Silverlight 3 Shadow effect using 3D projection in Silverlight [...]
July 3rd, 2009 at 10:56 pm
Using projection to build a 3D carousel in Silverlight 3 »…
Thank you for submitting this cool story – Trackback from progg.ru…