June 12th, 2009

Using projection to build a 3D carousel in Silverlight 3

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

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.

Back Top

Responses to “Using projection to build a 3D carousel in Silverlight 3”

  1. Hey, great post, really well written. You should post more about this.

  2. how i do to select one image ?

  3. I 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. Hello! 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. the 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));
    }

  6. Hello Gavin,

    excellent posts you have here. I have studied all of them and I must say that I have only one question, so I wonder if you could help me :-)

    So my goal is to simulate a room (with fixed point of sight in the center of back wall) having in my perspective three walls, front, left and right. And my problem is to change view perspective of observed object (for example of the cube) to simulate its correct position in the room. Same side of the cube should always face the center of the room, so it also should be rotated when I move it to the left or to the right wall.

    Do you have any tips of how to achieve this?

    Thanks in advance!

  7. @GUSTAVO: I know this is late, but its extremely easy to make the image clickable, even simpler than a button. Just add a Mouse action property to the image like this:

    XAML:

    then go to C# or VB and edit that event,

    C#:
    private void NameofEvent(object sender, MouseButtonEventArgs e)
    {
    (Define what you want that image that is clicked on to do here).
    }

    and voila! :) An image on the carousel that is clickable to do whatever you need it to.

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

    [...] Using projection to build a 3D carousel in Silverlight 3 [...]

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

    [...] Resource Using projection to build a 3D carousel in Silverlight 3 Shadow effect using 3D projection in Silverlight [...]

  3. progg.ru (,July 3, 2009)

    Using projection to build a 3D carousel in Silverlight 3 ยป…

    Thank you for submitting this cool story – Trackback from progg.ru…

Leave a Reply

Back Top