Silverlight Flip Control – page flipping without the performance problems

A while ago I was blogging about the flip control that I had written for Silverlight. My first attempt at this used basic transitions only to show two sides of a page, but I found this slowed down dramatically when the contents of each side were complex.  The answer was to take an image of the contents of each side at the moment of the flip occuring and animate that instead, in this way it’s always smooth no matter how many controls are being used.

I’m posting the code for the control here.  As usual feel free to use or modify it in any way you like, I’d appreciate any really interesting upgrades be sent back to me so I can include them here.  There’s a sample project and web site in the ZIP file too.

The flip control is pretty straight forward.  It has two sides called Page1 and Page2.  The property used to flip over the control is Page2Visible, which is a bool.  There’s a PageChanged event that fires if you need the notificaton.  There are also advanced properties for horizontal and vertical alignment separate for each side (Side1VerticalAlignment etc).

If you are looking through the code then it’s CreateImages that does most of the hard work.  This routine takes an image of each of the pages and swops those for the real content during the flip.  The images are reset when the Visual State Manager says the transition is complete.

Checking in at 30,000ft

Well I can confirm that GoGoInflight, VPN and TFS are working fine together – just did my first code check in while flying!  Unfortunately I am flying to Chicago rather than England thanks to the Icelandic Volcano… Oh well, while my plans have changed I think I’ve got it lucky compared to many.

Just been looking through the performance of my Silverlight app – drop shadows are still a real killer, they appear to spend an inordinate amount of time rendering the drop shadows of text that will be obscured completely by the rectangle on which it sits.  I’ve ended up doing a lot of fake shadows and written a component that does this using embedded borders with semi transparent fill.  It looks good and the performance is much better.

I’ve also spent a while looking at my flip control – the performance was getting very poor when the sides were full of complex objects – guess there’s no surprise there – so I’ve modified it to take an image of both sides during the flip and it’s back to smooth as silk no matter what I’m turning over.

I’ll extract the code for those two components into a separate project and post up here shortly, in case anyone needs that kind of functionality.