AMG-Mercedes Prototype: Handling Layout Animations and the Beauty of the Viewbox


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!

Comments (8)

  1. Waseem Sadiq says:

    Hi Karsten,

    This specific problem sounds quite familiar to me since I have had to deal with exactly this in a WPF application I am working on.

    I must say that I have not totally fixed this issue though so I am quite interested in your viewbox solution.

    I did try using a viewbox as the root element and having a canvas inside that (altough I will try it the other way around and see what happens), but then somehow my zoom functionality (ScaleTransform on the canvas) didn’t seem to work correctly anymore.

    Can you elaborate a bit more on how exactly you guys were able to fix this?

    Thanx

  2. GRiNSER says:

    when you use the viewbox with a canvas, how do you handle aspect ratio changes of the window?

  3. mike h says:

    Great post….   this is the type of information that I’m looking for to help establish a basic understanding of layouts in WPF (as that is my next big area to conquer in developing WPF apps).  Thanks for the links on the layout engine and different panels.

  4. karstenj says:

    I’ll post a small code sample that explicates this post a little more…stay tuned…

  5. In a recent post, I stated explaining some of the work done in the AMG-Mercedes demo to handle layout…

  6. mark says:

    i also have used a powerful layout engine : <a href="http://www.yaodownload.com/software-development/components-libraries/sanddock/">SandDock</a>”>http://www.yaodownload.com/software-development/components-libraries/sanddock/">SandDock</a> , it is a powerful window layout and management engine designed to quickly and easily add advanced document paging and dockable windows functionality to your applications.

    http://www.yaodownload.com/software-development/components-libraries/sanddock/