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.

Element is already the child of another element – Arghhhhhh

Sometimes I just hate Silverlight. Spent 5 hours debugging a problem that resulted in the “Element is already the child of another element” InvalidOperation exception. I looked at everything; looked to see if I was accidentally reparenting something: no. Looked for unexpected recursion: no. Played with every debugger setting to get more information and finally disected the application – all to no avail.

Then I noticed I’d commented out an Image in one of my templates (derived from a Telerik template for tree nodes) and happened to notice that it was the target of a Storyboard. Yep that was it – not an error that reads “You’ve targeted an element that doesn’t exist” oh no. “Element is already the child of another element” – like hell it was 🙂

So word to the wise, if you don’t think you are actually making an element the child of another element, look for any inconsistencies in your storyboards and animations.

Help is at hand:

Since writing this post I’ve come up with an algorithm to help identify XAML markup that causes this exception. The post here has a link to the project and a description of the approach.