In this series blog entry I’ll explain how one can use perspective 3D in Silverlight 3+ to create interesting UI transitions as shown in the following screenshot sequence from part of a sample application I created that was demonstrated across Canada in Microsoft’s EnergizeIT tour.

Initial state prior to 3D animation…

the central UIElement is leant back and faded out in a short animation…

New UI is shown on top… using the energy reveal shown in Part 2 of this series….

… and once this UI is removed, the UI behind is faded back in and pulled back up to its start position.

 

To do this means declaring a Projection property element on the component…

Property elements in XAML provide a means to declare a property that take an object rather than a simple value.  It would be difficult or clumsy to try to declare all the properties of an object (and even any sub objects) in a single attribute value.

We then need a storyboard to animate the X rotation of the projection on the UI element and the opacity of the UI element.

This has given you one possible use for the 3D projection addition in Silverlight 3.  Retaining elements of you UI on screen (but put ‘aside’ or back in this case) can help the user to easily keep track of their current context or position in the flow of the application UI navigation.