Animating Grid Column or Grid Row in XAML?

The ColumnDefinition.Width and RowDefinition.Height properties are of type GridLength, and there is no built-in animations for this type. So if you want to do that, you will probably have to create your own GridLengthAnimation class. That's probably not too impossible if you take DoubleAnimation as an example, but not easy either...

EDIT: actually, there are several interesting results if you search "GridLength animation" on Google...

http://windowsclient.net/learn/video.aspx?v=70654
http://marlongrech.wordpress.com/2007/08/20/gridlength-animation/
http://www.codeproject.com/KB/WPF/GridLengthAnimation.aspx

How about a work around? Why not place a grid(or any other desired control) inside the particular row that you want to animate, set the row height to "Auto", then animate the height of the control. It worked for me.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="30"/>
    <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>
  <Button x:Name="ExpandCollapseBtn" Width="100" Click="ExpandCollapse_Click"/>
  <WrapPanel x:Name="ToolBox" Grid.Row="1" Height="0">
    <Button Content="1" Width="50" Height="50"/>
    <Button Content="2" Width="50" Height="50"/>
    <Button Content="3" Width="50" Height="50"/>
    <Button Content="4" Width="50" Height="50"/>
  </WrapPanel>
</Grid>

Code behind:

private bool Expanded = false;
void ExpandCollapse_Click(object sender, RoutedEventArgs e)
{
  if (Expanded)
  {
    var anim = new DoubleAnimation(0, (Duration)TimeSpan.FromSeconds(0.3));
    anim.Completed += (s, _) => Expanded = false;
    ToolBox.BeginAnimation(ContentControl.HeightProperty, anim);
  }
  else
  {
    var anim = new DoubleAnimation(100, (Duration)TimeSpan.FromSeconds(0.3));
    anim.Completed += (s, _) => Expanded = true;
    ToolBox.BeginAnimation(ContentControl.HeightProperty, anim);
  }
}

I admit its not what you are looking for. But its a quick solution(Assuming of course that ultimately you want the UIElement placed inside the grid animated by animating the grid row). You can similarly do it for column width.

I got tired of having to fiddle with XAML to animate grid rows and columns a while ago so I wrote a couple of methods to do it totally from code.

With these you can expand/shrink columns and rows from code with one line:

Animation.AnimationHelper.AnimateGridColumnExpandCollapse(LeftColumn, true, expandedHeight, currentWidth, LeftColumn.MinWidth, 0, 200);

One important thing to note is setting the animation to null on completion. If you don't do this, the grid is still under control of the animation when the animation is complete. This might be fine if the grid doesn't have a splitter, but if the grid has a splitter and you want to be able to resize it manually after the animation completes, then you have to set the animation to null after it completes.

Here are the methods:

    /// <summary>
    /// Animate expand/collapse of a grid column. 
    /// </summary>
    /// <param name="gridColumn">The grid column to expand/collapse.</param>
    /// <param name="expandedWidth">The expanded width.</param>
    /// <param name="milliseconds">The milliseconds component of the duration.</param>
    /// <param name="collapsedWidth">The width when collapsed.</param>
    /// <param name="minWidth">The minimum width of the column.</param>
    /// <param name="seconds">The seconds component of the duration.</param>
    /// <param name="expand">If true, expand, otherwise collapse.</param>
    public static void AnimateGridColumnExpandCollapse(ColumnDefinition gridColumn, bool expand, double expandedWidth, double collapsedWidth, 
        double minWidth, int seconds, int milliseconds)
    {
        if( expand && gridColumn.ActualWidth >= expandedWidth)
            // It's as wide as it needs to be.
            return;

        if (!expand && gridColumn.ActualWidth == collapsedWidth)
            // It's already collapsed.
            return;

        Storyboard storyBoard = new Storyboard();

        GridLengthAnimation animation = new GridLengthAnimation();
        animation.From = new GridLength(gridColumn.ActualWidth);
        animation.To = new GridLength(expand ? expandedWidth : collapsedWidth);
        animation.Duration = new TimeSpan(0, 0, 0, seconds, milliseconds);

        // Set delegate that will fire on completion.
        animation.Completed += delegate
        {
            // Set the animation to null on completion. This allows the grid to be resized manually
            gridColumn.BeginAnimation(ColumnDefinition.WidthProperty, null);

            // Set the final value manually.
            gridColumn.Width = new GridLength(expand ? expandedWidth : collapsedWidth);

            // Set the minimum width.
            gridColumn.MinWidth = minWidth;
        };

        storyBoard.Children.Add(animation);

        Storyboard.SetTarget(animation, gridColumn);
        Storyboard.SetTargetProperty(animation, new PropertyPath(ColumnDefinition.WidthProperty));
        storyBoard.Children.Add(animation);

        // Begin the animation.
        storyBoard.Begin();
    }

    /// <summary>
    /// Animate expand/collapse of a grid row. 
    /// </summary>
    /// <param name="gridRow">The grid row to expand/collapse.</param>
    /// <param name="expandedHeight">The expanded height.</param>
    /// <param name="collapsedHeight">The collapesed height.</param>
    /// <param name="minHeight">The minimum height.</param>
    /// <param name="milliseconds">The milliseconds component of the duration.</param>
    /// <param name="seconds">The seconds component of the duration.</param>
    /// <param name="expand">If true, expand, otherwise collapse.</param>
    public static void AnimateGridRowExpandCollapse(RowDefinition gridRow, bool expand, double expandedHeight, double collapsedHeight, double minHeight, int seconds, int milliseconds)
    {
        if (expand && gridRow.ActualHeight >= expandedHeight)
            // It's as high as it needs to be.
            return;

        if (!expand && gridRow.ActualHeight == collapsedHeight)
            // It's already collapsed.
            return;

        Storyboard storyBoard = new Storyboard();

        GridLengthAnimation animation = new GridLengthAnimation();
        animation.From = new GridLength(gridRow.ActualHeight);
        animation.To = new GridLength(expand ? expandedHeight : collapsedHeight);
        animation.Duration = new TimeSpan(0, 0, 0, seconds, milliseconds);

        // Set delegate that will fire on completioon.
        animation.Completed += delegate
        {
            // Set the animation to null on completion. This allows the grid to be resized manually
            gridRow.BeginAnimation(RowDefinition.HeightProperty, null);

            // Set the final height.
            gridRow.Height = new GridLength(expand ? expandedHeight : collapsedHeight);

            // Set the minimum height.
            gridRow.MinHeight = minHeight;
        };

        storyBoard.Children.Add(animation);

        Storyboard.SetTarget(animation, gridRow);
        Storyboard.SetTargetProperty(animation, new PropertyPath(RowDefinition.HeightProperty));
        storyBoard.Children.Add(animation);

        // Begin the animation.
        storyBoard.Begin();
    }