Silverlight 3: Perspective 3D


Silverlight 3 Beta has been released today. This release includes a number of exciting new features that I want to illustrate with a series of quick samples on my blog. (more info on Silverlight 3 Beta and how to get the bits and tools).

The first new feature I want to show is Perspective 3D transformation. We have added a powerful new property ‘Projection’ to UIElement that lets you rotate and move any element in your tree in 3D space! The usage is very simple, no complicated math required – just set the Projection property to a PlaneProjection in XAML or code and specify how you want to rotate or move your elements. You can then change these properties dynamically at runtime, either through code or animations.

<Grid >

  <Grid.Projection>

    <PlaneProjection RotationX=”20″ RotationY=”30″ RotationZ=”-10″/>

  </Grid.Projection>

</Grid>

(More info on Perspective 3D in Silverlight 3 Beta)

Below is a live example of this new feature in action. The source is attached to this post. Note that you need the Silverlight 3 Beta Tools for VS in order to build the project. To view the live sample on this page you just need the Silverlight 3 Beta runtime installed. In the sample I have two surfaces back-to-back to each other, simulating a postcard in 3D space. Use the sliders to rotate the postcard around x, y or z axis. To demonstrate that the projected visuals are actually live and also take input, I have ink-enabled then, so you can draw on either side of the postcard.

The below sample has been update for the Silverlight 3 RTW Runtime (download)

 

InkPostcard.zip

Comments (2)

  1. Whoop Whoop.

    Was getting a bit tired looking at your blog everyday to read ‘Custom Ink Rendering in Silverlight 2’

    Good work.

    — Lee

  2. Waqar Ahmad says:

    Thanks for such nice examples… I want to build a web based image editor (just to add annotaton, a line and box) using silverlight 3. I just want to ask can we add text to image (means on canvas) by using keyboard (typing) instead of drawing style. also can we draw straight lines and box on canvas by providing start and end points..

    Any help will appreciated greatly

    Thanks