3D in Silverlight 3 (beta)

As I know, many are waiting for the release of Silverlight 3 Beta. I just heard it from someone, I dont exactly remember who he/she is. Then I go and download the Tools and try things out.

Of course, we should know the definition of XYZ plane before we do our code.

It is the common one as in Silverlight 3. Vertical is the y-axis. Horizontal is the x-axis. And into and out of computer screen is defined as Z-axis.

Here comes to the next part.

Before doing 3D graphics in Silverlight 3, you should know what is ,in fact, handling the work. It is the PlaneProjection Class.
It is put inside the Windows.Media Namespace. Inside the class, there are twelve members.

  • GlobalOffsetX
  • GlobalOffsetY
  • GlobalOffsetZ
  • LocalOffsetX
  • LocalOffsetY
  • LocalOffsetZ
  • RotationX
  • RotationY
  • RotationZ
  • CenterOfRotationX
  • CenterOfRotationY
  • CenterOfRotationZ

Now, I will introduce them briefly.

How to add them in UIElement?

As I said before, it is put under the PlaneProject. For every element in XAML, you should put like this.

        <Image Source=”Waterfall.jpg” Width=”200″ Height=”150″>
            <Image.Projection>
                <PlaneProjection RotationX=”-50″/>
            </Image.Projection>
        </Image>

It is easiest one. Becareful for the positive and negative side to the Rotation.

    <UserControl.Resources>
        <Storyboard x:Name=”myRotation”>
            <DoubleAnimation Duration=”0:0:5″ From=”0″ To=”360″ Storyboard.TargetName=”myPic” Storyboard.TargetProperty=”(UIElement.Projection).(PlaneProjection.RotationY)” AutoReverse=”True”/>
        </Storyboard>
    </UserControl.Resources>

Here, you should have the image at all.

        <Image x:Name=”myPic” Source=”Waterfall.jpg” Width=”200″ Height=”150″ Margin=”80,0,120,150″>
            <Image.Projection>
                <PlaneProjection GlobalOffsetZ=”-2000″ RotationY=”0″ CenterOfRotationY=”0.1″/>
            </Image.Projection>
        </Image>

This is an example for revolve about Y-axis. Try to press F5 now!! Of course, you should add the myRotation.Begin() in Loaded Event so as to start the animation.

Oh, and please feel free to visit here and get a brief concept about different properties and Silverlight 3 beta.

http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm

More will be released here. Keeping visting my blog =)

SteveWong (Hong Kong)

Advertisements

One thought on “3D in Silverlight 3 (beta)

  1. hi there steve..im currently doin a project for my final yr. Im tryin to find a way to bind data where I can retrieve images or informations from the database to display on my silverlight application whenever i roll oover an image.

    and users can simply go into the database to edit the informations.

    do u think u can help me out on this? its better if u can add me in msn so we can communicate better.

    anarchy_protest@hotmail.com

    do hear from u soon.

    Aki,
    Singapore

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s