Dan Crevier's Blog : pdc2005

Layout to layout animations in WCP (part 2)

dancre — Tue, 04 Oct 2005 06:17:00 GMT

This post continues my series on layout to layout animations in WCP (Avalon). In part 1, I showed to create a panel that lays out its children in a grid and allows the child size to be controlled with a slider through data binding. In this post, I'll describe one method to animate the children to their new position.

Here's the basic approach. When LayoutOverride needs to move a child, it moves the child, but also applies a RenderTransform to the child to translate it back to its original position. It then applies an animation to the transform so that it decays to zero over time. This has the effect of moving the child to its final position over time. This works even if the item is currently being animated.

In this post, I'll describe the method I showed at PDC. I'll include a couple of alternate approaches in future posts.

In order to implement this approach, we need to figure out the current location of each child before we arrange it so that we can apply the correct transform. This is a bit easier said than done. There's no easy way to get the current location a child in the same coordinate space as the arguments to Arrange(). If you use child.TranslatePoint(), you can get the upper-left corner of the child, but it takes margins and alignment into account. You could try to take those into account yourslef, but that's a very fragile approach. Instead, what we'll do is keep track of the parameters necessary to compute where we positioned the child on last layout, and then apply the current RenderTransform. With the layout algorithm used for TilePanel, we just have to keep track of the child size and children per row to calculate where we put any child.

Here are the modifications to TilePanel. The new code is in bold. I didn't include the methods that did not change.

// Arrange the children
protected override Size ArrangeOverride(Size finalSize)
{
   // Calculate how many children fit on each row
   int childrenPerRow = Math.Max(1, (int) Math.Floor(finalSize.Width / this.ChildSize));

   for (int i = 0; i < this.Children.Count; i++)
   {
      UIElement child = this.Children[i];

      // Figure out where the child goes
      Point newOffset = CalcChildOffset(i, childrenPerRow, this.ChildSize);

      if (_oldChildrenPerRow != -1)
      {
         // Figure out where the child is now
         Point oldOffset = CalcChildOffset(i, _oldChildrenPerRow, _oldChildSize);
         if (child.RenderTransform != null)
         {
            child.RenderTransform.TransformPoint(oldOffset, out oldOffset);
         }

         // Transform the child from the new location back to the old position
         TranslateTransform childTransform = new TranslateTransform();
         child.RenderTransform = childTransform;

         // Decay the transformation with an animation
         childTransform.BeginAnimation(TranslateTransform.XProperty, MakeAnimation(oldOffset.X - newOffset.X));
         childTransform.BeginAnimation(TranslateTransform.YProperty, MakeAnimation(oldOffset.Y - newOffset.Y));
      }

      // Position the child and set its size
      child.Arrange(new Rect(newOffset, new Size(this.ChildSize, this.ChildSize))); 
   }

   _oldChildrenPerRow = childrenPerRow;
   _oldChildSize = this.ChildSize;

   return finalSize;
}

// Create an animation to decay from start to 0 over .5 seconds
private static DoubleAnimation MakeAnimation(double start)
{
   DoubleAnimation animation = new DoubleAnimation(start, 0d, new Duration(TimeSpan.FromMilliseconds(500)));
   animation.AccelerationRatio = 0.2;
   return animation;
}

private double _oldChildSize = 1d;
private int _oldChildrenPerRow = -1;

The changes end up being pretty simple. _oldChildSize and _oldChildrenPerRow are used to cache the old layout parameters, and then it's a pretty simple matter to calculate the current child positions. Then, we apply the transform to this.

This method is not incredibly general. We're taking advantage of the fact that it's easy to calculate the positions of the children based on just a couple of parameters. You also can't apply it to an existing layout. I'll talk about some alternate approaches soon.

Layout to layout animations in WCP (part 1)

dancre — Mon, 03 Oct 2005 07:16:00 GMT

At PDC, I showed a simple version of layout to layout animations, as we do in Microsoft Max.In Max, when you resize the window or change the size of the items being viewed, they animate to their new locations. This not only looks cool, but really helps usability by letting the user see what's happening to the data being viewed. I will be doing a series of posts showing how this can be done, with a couple of alternatives.

First, let's start with a non-animating version. I'll base my example on the Avalon Application template (what you get when you do a new Avalon application project from Visual Studio).

Our first step is to create the Panel we'll be using. The Panel class is used to contain child elements and controls their layout. Built in examples include DockPanel, StackPanel, WrapPanel, and Grid. Like Max, we'll use a simple panel that lays out the children in a grid and lets the child size be controlled by the user. A Panel implementation needs to implement two methods for the two pass arrangement (first measure, then arrange). MeasureOverride figures out the size of the panel based on the current constraints, and is responsible for calling Measure on all children. ArrangeOverride does the work to actually position and size the elements. To allow the child size to be controlled by the UI, we'll set it using a dependency property that the UI can bind to. The panel definition is as follows:

public class TilePanel : Panel
{
   // Dependency property that controls the size of the child elements
   public static readonly DependencyProperty ChildSizeProperty
      = DependencyProperty.RegisterAttached("ChildSize", typeof(double), typeof(TilePanel),
         new FrameworkPropertyMetadata(1.0d, FrameworkPropertyMetadataOptions.AffectsMeasure |
         FrameworkPropertyMetadataOptions.AffectsArrange));

   // Accessor for the child size dependency property
   public double ChildSize
   {
      get { return (double)GetValue(ChildSizeProperty); }
      set { SetValue(ChildSizeProperty, value); }
   }

   // Measures the children
   protected override Size MeasureOverride(Size availableSize)
   {
      int childrenPerRow;

      // Figure out how many children fit on each row
      if (availableSize.Width == Double.PositiveInfinity)
         childrenPerRow = this.Children.Count;
      else
         childrenPerRow = Math.Max(1, (int) Math.Floor(availableSize.Width / this.ChildSize));

      // Call measure on all children
      Size childSize = new Size(this.ChildSize, this.ChildSize);
      foreach (UIElement child in this.Children)
      {
         child.Measure(childSize);
      }

      // Calculate the width and height this results in
      double width = childrenPerRow * this.ChildSize;
      double height = this.ChildSize * (Math.Floor((double) this.Children.Count / childrenPerRow) + 1);
      return new Size(width, height);
   }

   // Arrange the children
   protected override Size ArrangeOverride(Size finalSize)
   {
      // Calculate how many children fit on each row
      int childrenPerRow = Math.Max(1, (int) Math.Floor(finalSize.Width / this.ChildSize));
      for (int i = 0; i < this.Children.Count; i++)
      {
         UIElement child = this.Children[i];

         // Figure out where the child goes
         Point newOffset = CalcChildOffset(i, childrenPerRow, this.ChildSize);

         // Position the child and set its size
         child.Arrange(new Rect(newOffset, new Size(this.ChildSize, this.ChildSize))); 
      }
      return finalSize;
   }

   // Given a child index, child size and children per row, figure out where the child goes
   private Point CalcChildOffset(int index, int childrenPerRow, double childSize)
   {
      int row = index / childrenPerRow;
      int column = index % childrenPerRow;
      return new Point(column * childSize, row * childSize);
   }
}

Put this class in the application's namspace. Now, we'll use the panel in a simple window for the app. Here's the contents of Window1.xaml:

<?Mapping XmlNamespace="MyApp" ClrNamespace="AvalonApplication1" ?>
<Window x:Class="AvalonApplication1.Window1"
   xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
   xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
   xmlns:myapp="MyApp" 
   Title="AvalonApplication1"
   Height="300"
   Width="300"
   >
   <StackPanel Orientation="Vertical">
      <Slider MinWidth="200" Minimum="50" Maximum="300"
         SmallChange="40" Name="_slider" />
      <myapp:TilePanel ChildSize="{Binding ElementName=_slider, Path=Value}">
         <Border Background="Red" Margin="4" />
         <Border Background="Green" Margin="4" />
         <Border Background="Blue" Margin="4" />
         <Border Background="Red" Margin="4" />
         <Border Background="Green" Margin="4" />
         <Border Background="Blue" Margin="4" />
         <Border Background="Red" Margin="4" />
         <Border Background="Green" Margin="4" />
         <Border Background="Blue" Margin="4" />
         <Border Background="Red" Margin="4" />
         <Border Background="Green" Margin="4" />
         <Border Background="Blue" Margin="4" />
      </myapp:TilePanel>
   </StackPanel>
</Window>

If your application has a different namespace than "AvalonApplication1", just replace all instances with your name. The mapping at the top of the file brings in the CLR namespace, and then the xmlns:myapp line maps it into the XML namespace. This lets us use <myapp:TilePanel> element to use our new TilePanel class, and we put a bunch of colored boxes in it. Note that the child size is bound to a slider. The slider and TilePanel are in a StackPanel, so they stack up vertically. The resulting window looks like:

As you resize the window, the panel's MeasureOverride and ArrangeOverride functions will be called with the new size and the boxes inside will instantly move to their new positions. When you change the slider, it will change the ChildSize property. Since this property is set to affect measure and arrange, it will also call MeasureOverride and ArrangeOverride. This will resize the child elements appropriately.

In the next post, I'll explain how to make the children animate to their new locations instead of just instantly appear there. I'll go through a few different approaches on doing this.

Feedback on Max

dancre — Tue, 13 Sep 2005 23:22:00 GMT

It's great seeing feedback on Max - we really want to hear what you think works well, and what doesn't. The best place to send feedback is on our blog at http://blogs.msdn.com/max/. There's also some good feedback at http://www.neowin.net/comments.php?id=30384&category=main and http://channel9.msdn.com/ShowPost.aspx?PostID=114722.

PDC talk on how Max works

dancre — Tue, 13 Sep 2005 23:06:00 GMT

On Thursday, Walter Smith and I will be giving a presentation at the PDC about how our team built Max. It's at 1pm in Hall C/D. There will also be members of our team at the presentation lounges in the "big room". Come find us!

Max now available!

dancre — Tue, 13 Sep 2005 21:52:00 GMT

The cat's out of the bag. Hillel just showed us on stage. Check out http://www.microsoft.com/max.

Backstage at the PDC keynote

dancre — Tue, 13 Sep 2005 20:25:00 GMT

Lots of exciting stuff being announced today, and Hillel will be talking about what I've been working on soon. Stay tuned!

I'm speaking at PDC 2005!

dancre — Sun, 11 Sep 2005 19:24:00 GMT

I'll be speaking at PDC 2005 this year. I'll post more information soon. I hope to meet a bunch of you there - it's going to be a fun PDC!