A couple years ago, Ian Griffiths blogged about a way to create flippable list items in WPF. His approach involves using a VisualBrush to display the 2D content in 3D space, because he implemented it before Viewport2DVisual3D was introduced in .NET 3.5. Also, his approach was not very easy to reuse in many applications because the functionality was not placed into a custom control. Tonight, I decided to remedy this by making use of Viewport2DVisual3D in a reusable control.
The code associated with this post is a working prototype. I intend on turning this into something more complete, but want to share it with the world as soon as possible, hoping to get some feedback and feature requests early on.
I created a control that derives ContentControl, called ContentControl3D. It allows you to assign the BackContent property to specify what should be shown after you first flip the control over. The Content property, inherited from ContentControl, specifies what to display on the front side of the surface. You can also assign the BackContentTemplate property a DataTemplate, if BackContent is set to a data object (instead of a visual element).
Here is a screenshot of the demo application when it first loads up:
After clicking the “Flip Over” button, the UI performs an animated rotation, leaving you with a view of the back side of the surface. This is shown below…
Naturally, you can put whatever content you want on the front and back sides.
Here is the XAML which configures the ContentControl3D in the demo window:
If you would like to check this control out, you can download the source code here: ContentControl3D Source Code. NOTE: Be sure to change the file extension from .DOC to .ZIP and then decompress the file.
Your feedback is welcome. Thanks!