Get Microsoft Silverlight

Tuesday, April 07, 2009

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.


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.


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.



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.


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?

Anonymous said...

Your blog is wonderful, I like it very much, thank you!
By the way, do you like Burberry Polos, which are very chic, especially the Ralph Lauren Polo Shirts, I love them very much. I also like playing sports, it can keep healthy, what do you like to do?
We are the outlet of Wholesale Polo Shirt, Polo Ralph Lauren shirts on sale,these products are best-seller in our store cheap polo shirts Cheap Polo ShirtsToday is Christmas, and our products also have a corresponding discount activitiesWholesale Polo Shirts -50% OFF,cheap polo shirts Cheap Polo ShirtsSo if you love these, you should not miss our store, we can meet what you want, and you can find many surprise in our store

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:

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.


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