title: XAML animation of height of control with dynamic content
body: <p>I have a panel that should be minimized unless the user hovers the mouse over the panel. It is implemented using a storyboard that lets the height of the panel grow when the use puts the mouse over the control. At the moment the target height is hard coded to 400 which is a bad solution as the content of the panel will be different each time the application starts (it is static during execution).</p>
  
  <p>How do you create an animation that lets the panel grow to the size of the current content?</p>
  
  <pre><code>&lt;Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="500" Width="525"&gt;
  &lt;Grid&gt;
      &lt;Border Margin="10,0" Background="LightGray" HorizontalAlignment="Left" VerticalAlignment="Top" CornerRadius="0,0,8,8"&gt;
          &lt;Border.Effect&gt;
              &lt;DropShadowEffect Opacity="0.5"/&gt;
          &lt;/Border.Effect&gt;
          &lt;Border.Triggers&gt;
              &lt;EventTrigger RoutedEvent="Border.MouseEnter"&gt;
                  &lt;BeginStoryboard&gt;
                      &lt;BeginStoryboard.Storyboard&gt;
                          &lt;Storyboard&gt;
                              &lt;DoubleAnimation Storyboard.TargetProperty="Height" 
                                               From="25" 
                                               To="400" 
                                               Duration="0:0:0.2" /&gt;
                          &lt;/Storyboard&gt;
                      &lt;/BeginStoryboard.Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/EventTrigger&gt;
  
              &lt;EventTrigger RoutedEvent="Border.MouseLeave"&gt;
                  &lt;BeginStoryboard&gt;
                      &lt;BeginStoryboard.Storyboard&gt;
                          &lt;Storyboard&gt;
                              &lt;DoubleAnimation Storyboard.TargetProperty="Height" 
                                               From="400" 
                                               To="25" 
                                               Duration="0:0:0.2" /&gt;
                          &lt;/Storyboard&gt;
                      &lt;/BeginStoryboard.Storyboard&gt;
                  &lt;/BeginStoryboard&gt;
              &lt;/EventTrigger&gt;
          &lt;/Border.Triggers&gt;
          &lt;StackPanel Margin="5"&gt;
              &lt;TextBlock Height="25" Text="My items panel" /&gt;
              &lt;ListBox MinWidth="150" MinHeight="100" ItemsSource="{Binding MyItems}" /&gt;
          &lt;/StackPanel&gt;
      &lt;/Border&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>Edit: I have tried with binding to the Height of the StackPanel but that didn't really help as it didn't take the margins of the stackpanel into account thus making the panel shorter than needed.</p>
  
  <pre><code>&lt;DoubleAnimation Storyboard.TargetProperty="Height" 
                   From="{Binding ElementName=NameOfStackPanel, Path=ActualHeight}"
                   To="25" 
                   Duration="0:0:0.2" /&gt;
  </code></pre>