Earlier, I mentioned that I would go through some of the learnings from the different partner projects I have recently been involved in. The AMG-Mercedes prototype was a great project to work on in conjunction with AvenueA-Razorfish. One of the initial decisions they had to make was how to handle layout animations. At the hear of this decision was a decision about layout itself, something that anyone writing a WPF must be aware of. Choosing the right panel to use can be tricky. (Note to self: At some point, it would be great if Microsoft created a decision tree to help people understand this decision.) The SDK has good documentation on the layout engine and the different panels, definitely required reading.
So, how to best support layout animations? By layout animation, I mean movement animation of different elements on the screen: buttons, grids, images, etc. There are two main ways to do movement animation. The first is to use Canvas as the root layout, which provides absolute positioning, which allows for the animation of any element on the canvas by animating Canvas.Top and Canvas.Left properties. The other technique is to use the TranslateTransform animation and animate the X and Y properties. So, deciding the root layout was essential, because elements inside panels such as Grid don’t have Top and Left coordinates that can be animated.
After playing around with both techiques, it seemed that there was a lot less confusion when using a Canvas, as absolute positioning made things simple, whereas TranslateTransforms are always relative, making things tricky. In general, simple is good and tricky is bad. The downside of using Canvas was the application didn’t benefit from all of the goodness provided by the layout engine, especially if the user resized the application. At first, that limitation seemed like Canvas wouldn’t be an option.
But…don’t forget about our good friend the Viewbox! This class is one of those “magic” classes in WPF, like the VisualBrush, that does wonderous things. In this case, it allowed use of a Canvas as a root element and the creation of all these movement animation using absolute positioning, and then scale the entire thing when the user resizes the window. Brilliant!