Monday, September 13, 2010

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.
Read more: Mike Talbot's Blog