(X) Hide this
    • Login
    • Join
      • Generate New Image
        By clicking 'Register' you accept the terms of use .

Perspective 3D in Silverlight

(9 votes)
Nikolay Raychev
>
Nikolay Raychev
Joined Mar 28, 2008
Articles:   22
Comments:   58
More Articles
14 comments   /   posted on Mar 18, 2009
Categories:   General

This article is compatible with the latest version of Silverlight.

Introduction

A new feature in Silverlight is the Perspective Transforms. With its help you can simulate rotating an object in 3D space. Note that this is not a real 3D, Silverlight does not support 3D yet.

Overview

Let's start with a little demo: 


And let's describe the things step by step. You have an UIElement, in our situation an image. The X axis of the element is from left to right, the Y axis is going up and down and the Z axis is going in and out of the surface of the image.

If we want to rotate the image on the X axis we are just setting the RotationX of the UIElement.Projection as follows:


<Image x:Name="imgTarantula" Width="400" 
    HorizontalAlignment="Center" VerticalAlignment="Center"   
    Source="http://terraristic.net/photos/Acanthoscurria_geniculata/Acanthoscurria_geniculata_1.jpg">  
    <Image.Projection>
        <PlaneProjection RotationX="45"></PlaneProjection>
    </Image.Projection>
</Image> 

And we have the following result:

Similarly if we want to rotate the image on the Y axis we are setting the RotationY:

<Image.Projection> 
    <PlaneProjection RotationY="45"></PlaneProjection> 
</Image.Projection> 

The result:



And for the Z axis - the RotationZ:

<Image.Projection> 
    <PlaneProjection RotationZ="45"></PlaneProjection> 
</Image.Projection> 

The result:



You can also combine the rotations:

<Image.Projection> 
    <PlaneProjection RotationX="45" RotationY="45"></PlaneProjection> 
</Image.Projection> 

The result:


You can create an animation by just adding a Storyboard with the help of which you can control the Projection angles. In the demo above I used the following Storyboard:

<UserControl x:Class="PerspectiveTransforms.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"   
    Width="500" Height="400">  
    <UserControl.Resources> 
        <Storyboard x:Name="sbRotateImage">
            <DoubleAnimation BeginTime="00:00:00"
              Storyboard.TargetName="imgTarantula"
              Storyboard.TargetProperty="(UIElement.Projection).(RotationX)"
              RepeatBehavior="Forever" AutoReverse="True"
              From="45" To="-45">
            </DoubleAnimation> 
        </Storyboard> 
    </UserControl.Resources> 
    <Grid x:Name="LayoutRoot">  
        <Image x:Name="imgTarantula" Width="400" 
            HorizontalAlignment="Center" VerticalAlignment="Center"   
            Source="http://terraristic.net/photos/Acanthoscurria_geniculata/Acanthoscurria_geniculata_1.jpg">  
            <Image.Projection> 
                <PlaneProjection RotationX="45"></PlaneProjection> 
            </Image.Projection> 
        </Image> 
    </Grid> 
</UserControl> 

Code behind:

public MainPage()  
{  
    InitializeComponent();  
 
    this.sbRotateImage.Begin();  

There are several more sets of parameters:

Center of Rotation parameters:

  • CenterOfRotationX
  • CenterOfRotationY
  • CenterOfRotationZ

The values of the first two parameters range from 0 to 1 and are relative to the width and height of the UIElement. The value of the last parameter is absolute. The default values of the CenterOfRotationX and CenterOfRotationY are 0.5 while the default value of the CenterOfRotationZ is 0.

Let's demonstrate them with an example. If you don't set any of these parameters and you are rotating by the Z axis the image rotates as if you have pinned a photo in the center and are rotating this photo around the pin. If you want to change the location of the pin you can use the CenterOfRotationX and CenterOfRotationY. By setting both of them to 0 you move the pin to the upper left corner:

<Image.Projection> 
    <PlaneProjection RotationZ="45"   
        CenterOfRotationX="0" CenterOfRotationY="0" 
        LocalOffsetZ="0" GlobalOffsetZ="0" > 
    </PlaneProjection> 
</Image.Projection> 

By analogy if you want to change the center of rotation while rotating by the X axis you can set the CenterOfRotationY and CenterOfRotationZ parameters. And if you want to change the center of rotation while rotating by the Y axis you can set the CenterOfRotationX and CenterOfRotationZ parameters.

Local offset parameters:

  • LocalOffsetX
  • LocalOffsetY
  • LocalOffsetZ

Global offset parameters:

  • GlobalOffsetX
  • GlobalOffsetY
  • GlobalOffsetZ

Think about the global frame of reference as described in the beginning: the X axis is from left to right, the Y axis is going up and down and the Z axis is going in and out of the surface of the screen. Imagine that every UIElement has its own local frame of reference which is the same as the global one when no rotation is applied. When the object rotates its local frame of reference rotates with the object. The local offsets are offsets by the local frame of reference while the global ones are by the global one.

Conclusion

With the use of Perspective Transforms you can easily simulate some 3D effects. Any comments are welcome.


Subscribe

Comments

  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by thomas on Mar 20, 2009 12:11
    will be the projection feature also be available for the next wpf version?
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Fallon Massey on Mar 24, 2009 14:42
    This appears to mean that we don't have to do texture mapping.

    Just put the texture into the image, and apply the transform?  Is it that easy?
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by funny on Apr 05, 2009 10:56
    good job, I have a problem maybe you can help me. If  I set an element with it's default RotateY property to 90 and it's default LocalOffsetZ property to 100, then I want it roate around x-axis, how to do?It doesnot roate as I espect. can you help me?very thanks
  • nikolayraychev

    RE: Perspective 3D in Silverlight 3


    posted by nikolayraychev on Apr 06, 2009 05:05

    thomas, in WPF you can take advantage of the real 3D so you do not need to use the projections.

    Fallon Massey, yes, you don't need to use texture mappings any more.

    funny, if you explain in details what's your expected behavior I'll try to help you.

  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Rob on Jun 30, 2009 17:15
    Can't install silverlight on my machine.... SOS from MS
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Mohamed Soumare on Oct 30, 2009 20:21
    Excellent tutorial
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by John on Mar 25, 2010 08:25

    hi for example i want to give a property to image ; projection rotationy=45

     

    how can i give it with c# codes?

  • nikolayraychev

    RE: Perspective 3D in Silverlight 3


    posted by nikolayraychev on Apr 15, 2010 12:21

    Hi John,

    Try this code:

    this.imgTarantula.Projection = new PlaneProjection();
    this.imgTarantula.Projection.SetValue(PlaneProjection.RotationYProperty, (double)45);
  • -_-

    Demo Link???


    posted by Saminathan on May 21, 2010 09:45

    where is the live demo link..?

    Suggestion : Better to place at the top..

  • -_-

    Demo Link???


    posted by Saminathan.P on May 21, 2010 09:47
    where?
  • nikolayraychev

    RE: Perspective 3D in Silverlight 3


    posted by nikolayraychev on May 21, 2010 10:15

    Hi Saminathan.P,

    The demo is in the article but you need the proper version of Silverlight installed (At least Silverlight 3).

  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Muhammad Ravoof on Jun 07, 2010 14:34
    Nice to see this.its realy amazing to watch this
  • -_-

    RE: Perspective 3D in Silverlight 3


    posted by Guy on Jan 28, 2011 17:23
    Spiders...  Ick.  Hate'em.
  • -_-

    RE: Perspective 3D in Silverlight


    posted by Kalashnikov on Apr 03, 2011 11:07

    Guys try these.. 

    http://kalashnikovtechnoblogs.blogspot.com/2011/04/creating-3d-charts-using-silverlight-3.html

Add Comment

Login to comment:
  *      *