How to animate the height?

Question

question

Heiko-6891 asked · Apr 26 at 11:31 AM

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

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

Answer 1 · 2020-04-26T13:13:14.573Z

gekka answered · Apr 26 at 01:13 PM

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

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

Heiko-6891 · Apr 26 at 03:12 PM

Thank you!

0 · ·

question