title: Animate Content in a Grid Column
body: <p>I'm trying to write a basic proof-of-concept for having a grid layout, with two columns with content in them, plus a third column that has only a GridSplitter.  The content in the left-most column will be resized by the GridSplitter, but I'd <em>also</em> like to have some collapse and expand buttons that shrink/grow this same column.  Basically like the Solution Explorer in visual studio, which can be dragged bigger, or just unpinned, which collapses it.</p>
  
  <p>The code is below.  LeftPanel is what I'm trying to animate.  If I set a Width on LeftPanel, it animates, but no longer automatically re-sizes to fill the grid column when I drag the GridSplitter around.  And when I leave off Width from LeftPanel, or set it to Auto, it animates, but no longer resizes with the GridSplitter.</p>
  
  <p>I looked at this <a href="http://programmerpayback.com/2008/11/08/animate-collapsing-a-grid-column-or-row-in-silverlight/" rel="nofollow">post</a> about adding a DependencyProperty to animate the GridColumn directly, but again, dragging the GridSplitter would break it.</p>
  
  <pre><code>&lt;UserControl.Resources&gt;
      &lt;Storyboard x:Key="animShrink" x:Name="sbShrink"&gt;
          &lt;DoubleAnimation Storyboard.TargetName="leftPanel" Storyboard.TargetProperty="Width" To="50" Duration="0:0:2" /&gt;
      &lt;/Storyboard&gt;
      &lt;Storyboard x:Key="animGrow" x:Name="sbGrow"&gt;
          &lt;DoubleAnimation Storyboard.TargetName="leftPanel" Storyboard.TargetProperty="Width" To="200" Duration="0:0:2" /&gt;
      &lt;/Storyboard&gt;
  &lt;/UserControl.Resources&gt;
  
  &lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition x:Name="leftGridCol" Width="Auto" /&gt;
          &lt;ColumnDefinition Width="*" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;StackPanel Grid.Column="0" Width="Auto" Margin="0,0,10,0" Background="Bisque" x:Name="leftPanel" &gt;
          &lt;Button x:Name="btnShrink" Click="Button_Shrink" Height="20" VerticalAlignment="Top"&gt;Shrink&lt;/Button&gt;
          &lt;Button x:Name="btnGrow" Click="Button_Grow" Height="20" Margin="0,30,0,0" VerticalAlignment="Top"&gt;Grow&lt;/Button&gt;
      &lt;/StackPanel&gt;
      &lt;sdk:GridSplitter Grid.Column="0"&gt;&lt;/sdk:GridSplitter&gt;
  
      &lt;StackPanel Grid.Column="2" Background="AliceBlue"&gt;&lt;/StackPanel&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>Handlers</p>
  
  <pre><code>private void Button_Grow(object sender, RoutedEventArgs e) {
      sbGrow.Begin();
  }
  
  private void Button_Shrink(object sender, RoutedEventArgs e) {
      sbShrink.Begin();
  }
  </code></pre>