How to animate the height?

Question

Hi,

I want to fade in a grid by moving the MaxHeight of the grid from 0 to 400.

Unfortunately this does not work. If I show the grid and animate its opacity, it works.

How can I animate the height?

<Page.Resources>
    <Storyboard x:Name="storyboard">
        <DoubleAnimation Storyboard.TargetProperty="Height" x:Name="animation" Duration="0:0:1.0"
                         Storyboard.TargetName="gridAnimated" />
    </Storyboard>
</Page.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Button Content="Animate Grid" Margin="10" Click="buttonAnimate_Click" />

    <Grid Name="gridAnimated" Background="Lime" Grid.Row="2">
        <TextBlock Text="Animated Grid" Margin="10" />
    </Grid>
</Grid>

private void buttonAnimate_Click(object sender, RoutedEventArgs e)
{
    animation.From = gridAnimated.ActualHeight;
    animation.To = 400;
    storyboard.Begin();
}

Best Regards,
Heiko

Answer 1

Hi Heiko,

DoubleAnimation.EnableDependentAnimation must be set to True

<DoubleAnimation 
    Storyboard.TargetProperty="Height" x:Name="animation" 
    Storyboard.TargetName="gridAnimated" 
    Duration="0:0:1.0"
    EnableDependentAnimation="true"  />

or

animation.From = gridAnimated.ActualHeight;
animation.To = 400;
animation.EnableDependentAnimation = true;
storyboard.Begin();