question

Heiko-6891 avatar image
0 Votes"
Heiko-6891 asked ·

How to animate the height?

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


windows-uwp
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

gekka avatar image
0 Votes"
gekka answered ·

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();
· 1 · Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you!

0 Votes 0 · ·