3D Flipper Control – Using Silverlight 3.0 Plane Projection

Silverlight 3.0 has a coolest feature called PlaneProjection-a perspective transform which projects any UIElement on to a 3D plane. To create a plane projection you just need to set an attached property called ‘Projection’ on the UI Element. You can see relevant set of properties to rotate, center or offset. If you are using Expression blend 3 Beta, you can set these properties using the new Projection editor under Transform category of the property editor.

image image

I am going to create a 3D flipper control using this plane projection feature. I guess 3D flipping is the most popular and simplest 3D UX pattern out there. In a nut shell what we need is a custom Silverlight control which is able to take a ‘Front’ and ‘Back’ content elements. And the control should have the ability to flip both the contents in a 3D plane. For example if I have two images to flip, then my XAML should be as follows.

image

So I need to define two dependency properties of type UIElement called FrontContent and BackContent. As for every look less control, we need to define a default XAML Style and control template for this control in Themes\Generic.xaml file. In the template we need two ContentPresenter for the control to respect both front and back Content which user sets. And the root element is where we can apply the PlaneProjection.

image

The remaining jobs are to rotate the PART_MainGrid with an animation on the (PlaneProjection.RotationY) from 0 to 180degrees and when it reaches 90degrees, we need to flip the visibility of the contents so that the back content should be visible from 90 to 180 transition. These two actions can purely be handled using VisualStateManager in XAML. Currently I am triggering the Flip action on mousedown event, but we can utilize some Command pattern to make it fully generic. You may notice that I put a ScaleTransform with ScaleX=-1 to the backside container in the above XAML. The reason is that when the PlaneProjection flips to the backside the content gets flipped horizontally, so we are applying a horizontally flipped(ScaleX =-1) container to the backside so that the user applied BackContent will look normal.

See the demo here 

And here is the Source Code

I have used few other Silverlight3.0 features in this sample. Effects(Dropshadow effect) and ElementName binding. You can type on the TextBox bellow and the value has bind to a TextBlock on the backside content. ElementName binding feature makes the binding in Silverlight a lot more easier as it is with WPF.

image

Comments

Unknown said…
we need this in WPF... that way SL can be a true subset... :)
Jobi Joy said…
Yeah David, it would be so cool to get exactly the same way in WPF. Though advanced 3D is there in WPF with all sort of ViewPort3D.. but it takes some learning curve on the 3D math to figure out what is going on.
Yeah this SL feature is very cool and simple so that anybody can create some great 3D look
Dhaval Shah said…
Hi Joy,

The content on the back panel of flip control gets blurred on the sides while remain fine in center. Any fix for this will be appreciated.

Regards,
Kalashnikov
morat said…
Interesting post. I have been wondering about this issue,so thanks for posting. I’ll likely be coming back to your blog. Keep up great writing.

Kenali dan Kunjungi Objek Wisata di Pandeglang | Blog SEO | cah bagoes | oes tsetnoc | blogger
Unknown said…
Any word on the issue with blurred text when using PlaceProjection?
Paul said…
How would I modify it to flip it like a card on a table, center of rotation X = -0.01 (2 stacks of cards instead of 1)?
Jobi Joy said…
Hi paul, Set RenderTransformOrigin="0,0.5" Which will turn it on the left side.
Anonymous said…
See this link for information about making this control more "Expression Blend" friendly:

http://social.expression.microsoft.com/Forums/en-US/blend/thread/978bb87b-0ec5-4092-891e-189f3ed9befe
Sajin said…
Hi Joy,

Could you please suggest how can I achieve the same functionality of flipping on a button click
I will be having one border control with one button in it. when I click the button I want the flip to happen.

Thanks
-Sajin
The Gal said…
I am wondering if anyone know how to get rid of clurriness on back panel contents ?
The Gal said…
Hi ,

I am wondering if you or anyone were able to solve the blurriness issue on the contenst of back panel ?
Anonymous said…
I just found your flipper posting. I gave it a try, but I have both textboxes as blank. No text. (I simplified it to just the one FRONT/BACK rectangle) any ideas? thanks
OzFrog said…
How could I bind the VisualState to a property of my viewmodel?
Leena206 said…
Hey nice article .. can u tell me how to it with the help of cs file?? thanks
jeya sofia said…
Excellent Blog, I like your blog and It is very informative. Thank you

Best Course To Learn React Native
samuelmorkel said…
Really nice blog. thanks for sharing such a useful information.
Testcomplete Online Training
Matt Reeves said…
This post is so interactive and informative.keep update more information...
Python Training in Tambaram
Python course in Tambaram


Popular posts from this blog

Time Picker User Control

A simple Multiselect ComboBox using expression Blend

A Simple Radial Panel for WPF and SilverLight