title: Slide-down animation for ItemsControl
body: <h2>Overview</h2>
  
  <p>In WPF/XAML, what is the best way to implement a slide-down animation when inserting an item into an <code>ItemsControl</code>?</p>
  
  <h2>Background</h2>
  
  <p>At first glance, it seems that we can just use <code>FluidMoveBehavior</code> from the Blend expression interactions namespace.  We simply add it to the <code>ItemsPanelTemplate</code> for the <code>ItemsControl</code>:</p>
  
  <pre><code>&lt;ItemsPanelTemplate x:Key="EaseIn"&gt;
    &lt;StackPanel IsItemsHost="True"&gt;
      &lt;i:Interaction.Behaviors&gt;
        &lt;ei:FluidMoveBehavior 
                          InitialTag="DataContext" 
                          Duration="0:0:0.25" 
                          AppliesTo="Children"/&gt;
      &lt;/i:Interaction.Behaviors&gt;
    &lt;/StackPanel&gt;
  &lt;/ItemsPanelTemplate&gt;
  </code></pre>
  
  <p>This nicely slides the other items in the list down when a new item is added, but it doesn't animate the newly added item.  We can add a <code>Loaded</code> animation in the <code>ItemsControl</code> <code>ItemTemplate</code> to translate the item from a offscreen offset to 0:</p>
  
  <pre><code>&lt;DataTemplate x:Key="DataTemplate1"&gt;
    &lt;Grid Background="White"&gt;
    &lt;Grid.Triggers&gt;
      &lt;EventTrigger RoutedEvent="Loaded"&gt;
        &lt;BeginStoryboard&gt;
          &lt;Storyboard&gt;
            &lt;DoubleAnimation
              Storyboard.TargetName="AnimatedTranslateTransform"
              Storyboard.TargetProperty="Y"
              From="-10" To="0"
              Duration="0:0:0.25"&gt;
              &lt;/DoubleAnimation&gt;
          &lt;/Storyboard&gt;
        &lt;/BeginStoryboard&gt;
      &lt;/EventTrigger&gt;
    &lt;/Grid.Triggers&gt;
    &lt;Grid.RenderTransform&gt;
      &lt;TransformGroup&gt;
        &lt;TranslateTransform x:Name="AnimatedTranslateTransform"/&gt;
      &lt;/TransformGroup&gt;
    &lt;/Grid.RenderTransform&gt;
      &lt;Border BorderBrush="#FF424242" BorderThickness="1"&gt;
        &lt;StackPanel&gt;
          &lt;Label Content="{Binding .}"/&gt;
        &lt;/StackPanel&gt;
      &lt;/Border&gt;
    &lt;/Grid&gt;
  &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>The problem with this is that the height of my items is going to vary.  If I set the Y offset to a large number, then it moves at a different rate than the other items moving down, since it has to cover a greater distance in the same amount of time.  It would be nice to be able to couple an animation for the new item to the other items being driven by <code>FluidMoveBehavior</code>.</p>
  
  <p>An alternative animation approach would be to animate the height of the new item from zero to auto, but this has the undesired effect of revealing the item from the top down instead of the bottom up.  That would give the impression of the new item already in place instead of sliding down from the top.</p>
  
  <h2>Questions</h2>
  
  <ul>
  <li><p>How can I animate translate transform with the exact height of the item?</p>
  
  <p>I don't mind doing this in the code behind, but since this is inside of a <code>DataTemplate</code> inside of an <code>ItemsControl</code>, I don't know how to retrieve the item height programmatically. The goal is to move it in at the same rate that the other items move down.</p></li>
  <li><p>Is there an easier way to animate the inserted item in a way that follows the rest of the items?</p>
  
  <p>There are some Silverlight/Blend articles (<a href="http://www.codeproject.com/Articles/79291/ListBox-Styling-Part-3-Additional-Templates-in-Exp" rel="nofollow">here</a> and <a href="http://blogs.msdn.com/b/expression/archive/2010/03/16/dynamic-layout-and-transitions-in-expression-blend-4.aspx" rel="nofollow">here</a>) that suggest using the <code>VisualStatesManager</code> and layout states.  I can change the <code>ItemsControl</code> to a <code>ListBox</code> to be able to get states in the <code>ItemContainerStyle</code>, but I don't see the default layout states in WPF that you get in Silverlight.</p></li>
  <li>Finally, it there a way to combine this into one animation?  It would be nice to only have to animate the new item, and have the other items react to the animation at the same rate.</li>
  </ul>