title: Wpf - Animate height from bottom up
body: <p>I am trying to create something similar in style to Skypes notifications but am having some problems with the animation.</p>
  
  <p>I would like the entire window to appear with a border at the top and bottom and then for the content in the middle to grow "pushing" the borders with it.
  I have managed to create something that does almost what I want however it grows from the top down where as I would like it to push up with the bottom border stationery.</p>
  
  <p>I am using the following animation on the middle section that I would like to appear</p>
  
  <pre><code>&lt;DoubleAnimation 
       Storyboard.TargetName="contentGrid" 
       BeginTime="00:00:0.2" 
       Storyboard.TargetProperty="(FrameworkElement.Height)" 
       From="0" 
       Duration="0:0:0.5"/&gt;
  </code></pre>
  
  <p>Any Ideas?
  Thanks</p>
  
  <p>Rest of the XAMl:</p>
  
  <pre><code>&lt;Grid Name="notificationPanel"&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="Auto"/&gt;
          &lt;RowDefinition Height="*"/&gt;
          &lt;RowDefinition Height="Auto"/&gt;
      &lt;/Grid.RowDefinitions&gt;        
      &lt;Grid.Triggers&gt;
          &lt;EventTrigger RoutedEvent="FrameworkElement.Loaded"&gt;
              &lt;BeginStoryboard&gt;
                  &lt;Storyboard&gt;
                      &lt;DoubleAnimation Storyboard.TargetName="contentGrid" Storyboard.TargetProperty="(FrameworkElement.Height)" From="0" Duration="0:0:0.5"/&gt;
                  &lt;/Storyboard&gt;
              &lt;/BeginStoryboard&gt;
          &lt;/EventTrigger&gt;
      &lt;/Grid.Triggers&gt;
  
      &lt;Grid Grid.Row="0" Background="CornflowerBlue"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="*"/&gt;
              &lt;ColumnDefinition Width="Auto"/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
  
          &lt;TextBlock Name="notificationTitle" Padding="5" FontSize="14" Foreground="White"&gt;
              Call Manager - Incoming Call
          &lt;/TextBlock&gt;
  
          &lt;Path Name="closeButton"  Grid.Column="1" Margin="5,10,10,0" Fill="White" Data="F1 M 2.28484e-007,1.33331L 1.33333,0L 4.00001,2.66669L 6.66667,6.10352e-005L 8,1.33331L 5.33334,4L 8,6.66669L 6.66667,8L 4,5.33331L 1.33333,8L 1.086e-007,6.66669L 2.66667,4L 2.28484e-007,1.33331 Z " /&gt;
      &lt;/Grid&gt;
  
      &lt;Grid Name="contentGrid" Grid.Row="1" Background="White" Height="15" VerticalAlignment="Bottom" &gt;  
      &lt;/Grid&gt;
  
      &lt;Rectangle Grid.Row="2" Fill="CornflowerBlue" Height="5" /&gt;
  &lt;/Grid&gt;
  </code></pre>