1 3D in Silverlight 3 (beta) Posted by Steve Wong | at 10:15 PM

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)