Dan Crevier's Blog : PanelLayoutAnimator

Attaching behavior to an Avalon element in XAML

dancre — Sun, 05 Mar 2006 08:07:00 GMT

Sometimes you want to attach some behavior to an Avalon element by adding some event handlers, but without subclassing the element. An example of this is my most recent version of the layout animation code. In my original post, I had code in my code behind file that added this behavior:

new PanelLayoutAnimator(_tilePanel);

I suggested that one way to allow this to be specified in Xaml would be to write a new element you could wrap the other element in. This would let you specify the behavior in Xaml, but you are left with a more complex visual tree, which hurts performance among other things. A couple of people alerted me to another technique that solves this problem. I think this technique is useful in many similar circumstances, so I thought I’d blog in more detail about it.

The technique makes use of attached property functionality. The Avalon property system allows you to register a property that can be attached to any element. This is what lets you put something like DockPanel.Dock=”Top” on a Button inside a DockPanel, even though Dock isn’t a property that buttons know about. It also makes use of the ability to register for a callback when a property changes. Here are the changes step by step…

First, we register a new property and provide a set function that allows it to be set in XAML. I’ve also set up a function to be called when the property changes on an item:

public static readonly DependencyProperty IsAnimationEnabledProperty

= DependencyProperty.RegisterAttached("IsAnimationEnabled", typeof(bool), typeof(PanelLayoutAnimator),

new FrameworkPropertyMetadata(new PropertyChangedCallback(OnIsAnimationEnabledInvalidated)));

public static void SetIsAnimationEnabled(DependencyObject dependencyObject, bool enabled)

{

dependencyObject.SetValue(IsAnimationEnabledProperty, enabled);

}

We also need an attached property that we’ll use to see if an animator is attached to a panel. This is isn’t something that people should be setting in XAML, so we keep it private.

private static readonly DependencyProperty AttachedAnimatorProperty

= DependencyProperty.RegisterAttached("AttachedAnimator", typeof(PanelLayoutAnimator), typeof(PanelLayoutAnimator));

And, we’ll support detaching an animator from a panel, so we need a Detach function.

public void Detach()

{

if (_panel != null)

{

_panel.LayoutUpdated -= PanelLayoutUpdated;

_panel = null;

}

Finally, we’ll use the invalidation callback to add or remove animations depending on what it’s set to.

private static void OnIsAnimationEnabledInvalidated(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)

{

Panel panel = dependencyObject as Panel;

if (panel != null)

{

if ((bool)e.NewValue)

{

// Turn animations on for the panel if there's not already a PanelAnimator attached

if (panel.ReadLocalValue(AttachedAnimatorProperty) == DependencyProperty.UnsetValue)

{

PanelLayoutAnimator animator = new PanelLayoutAnimator(panel);

panel.SetValue(AttachedAnimatorProperty, animator);

}

else

{

// clear animations

if (panel.ReadLocalValue(AttachedAnimatorProperty) != DependencyProperty.UnsetValue)

{

PanelLayoutAnimator animator = (PanelLayoutAnimator)panel.ReadLocalValue(AttachedAnimatorProperty);

animator.Detach();

panel.SetValue(AttachedAnimatorProperty, DependencyProperty.UnsetValue);

}

That’s it! Now, you can animate a panel with something as simple as:

Isn’t that nice? This leaves the animation decision to the style and keeps it cleanly separated from the behavior. I hope this technique helps you solve a similar problem!

I’ve attached the latest version of PanelLayoutAnimator.cs.

Note: I tried binding the IsAnimationEnabled value to a checkbox, but it didn’t work for some reason. It may be because I am using an old Avalon, or I could be doing something else wrong. If anyone knows what’s going on, let me know.

Layout to layout animations in WCP: Part 3

dancre — Thu, 23 Feb 2006 20:18:00 GMT

Ok, it took me a lot longer to get to this, but I finally have a post about a better way to do layout to layout animations. In part 1, I introduced a simple tile panel and then in part 2, I made modifications so that it animates the children as they are rearranged. There were a couple of things I don’t like about my solution in part 2:

1. It requires modifying the panel and having enough information to compute the previous layout position

2. We were changing the render transforms of the children during the layout pass. This is a bit fragile because Avalon is also applying and using transforms at this stage

Before jumping into my new implementation, I want to mention a couple of other techniques out there.

Kevin Moore implemented some seriously crazy animations using CompositionTarget.Rendering to get a callback at each frame of rendering. This works great if you want to use a physics engine for your animations.

Pete Blois used a clever technique of wrapping each child with a ContentControl that sees when its layout is changed and applies the render transform to itself. This means you can turn on animations for any child in any panel by wrapping it in this ContentControl.

The implementation I want to present in this post allows you to add layout animations to any panel without modifying the panel or adding requirements to the children. How is that possible? Well, the basic principle is the same as I presented in part 2. After children are arranged, we’ll apply a render transform to put the child back at its previous location, and animate that transform so it decays to 0 over time. We’ll take advantage of the LayoutUpdated event that UIElements fire when their layout changes, and the ability to use attached properties to store previous layout information. The basic LayoutUpdated handler algorithm goes something like this:

· Compute the position where the child was arranged by looking at the current position and undoing any render transform

· Read the position it was previously arranged from the attached property

· If the positions are different, apply a render transform from the newly arranged position back to the current position (not the arranged position, but where it actually is including current transforms), and animate the transform away. If the arrange positions were the same, then it’s already in the right place, or an animation is taking care of it

Update: Pete Blois noted that LayoutUpdated is a global event and fires when any layout updated. So, expect lots of calls to it!

I’ve wrapped it up into a class below that you construct with a panel. You can modify the sample we used in part 1 by just adding:

new PanelLayoutAnimator(_tilePanel);

to the Window’s constructor.

An alternate form factor would be to create a ContentControl that applied a PanelLayoutAnimator to a child. That would let you just wrap the panel with this control in the Xaml to get animations. If there is interest, I can provide the exact details on how to do that.

Update: Pete Blois had a good idea on another form facotr, and Ben Constable noted something similar. One trick you can use is to register an attached property along with a global property changed handler on it. When the property changed, you can see what it's attached to and create a PanelLayoutAnimator pointing to it. Then, you can do something like <WrapPanel PanelLayoutAnimator.Active="true" />. If anyone wants details on this, I can provide them.

Here’s the code:

public class PanelLayoutAnimator

{

public PanelLayoutAnimator(Panel panelToAnimate)

{

_panel = panelToAnimate;

_panel.LayoutUpdated += new EventHandler(PanelLayoutUpdated);

}

void PanelLayoutUpdated(object sender, EventArgs e)

{

// At this point, the panel has moved the children to the new locations, but hasn't

// been rendered

foreach (UIElement child in _panel.Children)

{

// Figure out where child actually is right now. This is a combination of where the

// panel put it and any render transform currently applied

Point currentPosition = child.TransformToAncestor(_panel).Transform(new Point());

// See what transform is being applied

Transform currentTransform = child.RenderTransform;

// Compute where the panel actually arranged it to

Point arrangePosition = currentPosition;

if (currentTransform != null)

{

// Undo any transform we applied

arrangePosition = currentTransform.Inverse.Transform(arrangePosition);

}

// If we had previously stored an arrange position, see if it has moved

if (child.ReadLocalValue(SavedArrangePositionProperty) != DependencyProperty.UnsetValue)

{

Point savedArrangePosition = (Point)child.GetValue(SavedArrangePositionProperty);

// If the arrange position hasn't changed, then we've already set up animations, etc

// and don't need to do anything

if (!AreReallyClose(savedArrangePosition, arrangePosition))

{

// If we apply the current transform to the saved arrange position, we'll see where

// it was last rendered

Point lastRenderPosition = currentTransform.Transform(savedArrangePosition);

// Transform the child from the new location back to the old position

TranslateTransform newTransform = new TranslateTransform();

child.RenderTransform = newTransform;

// Decay the transformation with an animation

newTransform.BeginAnimation(TranslateTransform.XProperty, MakeAnimation(lastRenderPosition.X - arrangePosition.X));

newTransform.BeginAnimation(TranslateTransform.YProperty, MakeAnimation(lastRenderPosition.Y - arrangePosition.Y));

}

// Save off the previous arrange position

child.SetValue(SavedArrangePositionProperty, arrangePosition);

}

// Check if two points are really close. If you don't do epsilon comparisons, you can get lost in the

// noise of floating point operations

private bool AreReallyClose(Point p1, Point p2)

{

return (Math.Abs(p1.X - p2.X) < .001 && Math.Abs(p1.Y - p2.Y) < .001);

}

// 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;

}

// dependency property we attach to children to save their last arrange position

private static readonly DependencyProperty SavedArrangePositionProperty

= DependencyProperty.RegisterAttached("SavedArrangePosition", typeof(Point), typeof(PanelLayoutAnimator));

private Panel _panel;

}

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.