Share via


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

  • Anonymous
    April 11, 2006
    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

  • Anonymous
    April 11, 2006
    when you use the viewbox with a canvas, how do you handle aspect ratio changes of the window?

  • Anonymous
    April 12, 2006
    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.

  • Anonymous
    April 12, 2006
    I'll post a small code sample that explicates this post a little more...stay tuned...

  • Anonymous
    April 18, 2006
    In a recent post, I stated explaining some of the work done in the AMG-Mercedes demo to handle layout...

  • Anonymous
    April 20, 2006
    The comment has been removed

  • Anonymous
    June 09, 2009
    PingBack from http://besteyecreamsite.info/story.php?id=549

  • Anonymous
    June 16, 2009
    PingBack from http://lowcostcarinsurances.info/story.php?id=5983