Wpf - Animate height from bottom up

Question

I am trying to create something similar in style to Skypes notifications but am having some problems with the animation.

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.

I am using the following animation on the middle section that I would like to appear

<DoubleAnimation 
     Storyboard.TargetName="contentGrid" 
     BeginTime="00:00:0.2" 
     Storyboard.TargetProperty="(FrameworkElement.Height)" 
     From="0" 
     Duration="0:0:0.5"/>

Any Ideas? Thanks

Rest of the XAMl:

<Grid Name="notificationPanel">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>        
    <Grid.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="contentGrid" Storyboard.TargetProperty="(FrameworkElement.Height)" From="0" Duration="0:0:0.5"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Grid.Triggers>

    <Grid Grid.Row="0" Background="CornflowerBlue">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <TextBlock Name="notificationTitle" Padding="5" FontSize="14" Foreground="White">
            Call Manager - Incoming Call
        </TextBlock>

        <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 " />
    </Grid>

    <Grid Name="contentGrid" Grid.Row="1" Background="White" Height="15" VerticalAlignment="Bottom" >  
    </Grid>

    <Rectangle Grid.Row="2" Fill="CornflowerBlue" Height="5" />
</Grid>

Solution 1

The behavior you are seeing is being determined by the UIElement that contains your <Grid Name="notificationPanel"> grid.

If this Grid is placed inside an element with the height set to 'Auto', it will animate from the top down, which is not what you want.

If this Grid is placed inside a container with either a fixed height, or the height set to *, and you have set the VerticalAlignment of your 'notificationPanel' Grid to 'Bottom', then you will get the correct animation behavior, with your 'contentGrid' growing up and pushing up the top border also, while the bottom border remains stationary.

It's one of those things about WPF that took me a long time to learn :) The containing element often controls the behavior and/or appearance of its child elements.

Solution 2

I didn't get your question exactly, but what i understood from your question is currently you able to animate contentGrid height from 0 to 15 which is bottom to top and you want to make it top to bottom as well so you can try following code

<DoubleAnimation    Storyboard.TargetName="contentGrid"
                    Storyboard.TargetProperty="(FrameworkElement.Height)" 
                    To="0" 
                    Duration="0:0:0.5"/>

You can also try AutoReverse="True" if you want to animate height from 0 to 15 and back to 0.

If something else you expecting in this answer please explain you question more clearly.

Comments

[Dan Puzey]

Can you post more of your Xaml? This is possibly more to do with the parent container than with your animation.

[gr-eg]

This works perfectly thanks! I had settled on using two animations at once, one Animating the height and one animating the position but it wasnt perfect as the bottom appeared to "wobble" a little bit as the two animations ran. This way is much smoother, I so obvious when you know how!