After reading Jobi Joy’s post about a 3D Flip Control he had built. It gave me an idea about creating a Silverlight 3D Flip Action that can be applied to any UIElement. It also meant that I got to play with the new Plane Projection bits in SL 3.0. To do this sort of interaction in WPF I use a series of data templates that using template binding for the back and front controls, pretty much a standard mechanism that you see around. Fluid Kit also has a flip implementation which I suggest you take a look at if you have not already. Fluid Kit rocks BTW. The same code below is based on Jobi Joy’s 3D control just refactored into an Action.
The 3D Flip Action can be triggered using a standard Event Trigger such as MouseLeftButtonDown or an Event Trigger of your choice. There are some animation properties for you to supply; a point value for the Projection Y axis, (where you would like to move from, and where you would like to move to); and a duration period for the from and to Storyboard’s used to animate the front and back UIElements on the Y axis. There are also a couple of Flip properties, the Action needs to know about its container, the front and back Elements and also if the front control is visible on startup. The container is required so that we have a UIElement to apply the Plane Projection.
Using the 3D Flip Action is easy, simply create a Layout element like a Grid and then drop in your UIElements for the front and back, in my example I have used images. Once you have this Xaml created then select the Flip Action from the Behaviors tab and drop this onto the Layout element. As outlined earlier you can then tweak the animation and flip properties to provide the interaction that you want.
At the moment the Flip Action only works on the Y axis, but with some simple refactoring it should be straight forwards to support both the X and Z axis.