How to animate Grid RowDefinition Height change (when Height="Auto")-CodePudding

I have a wpf Grid with two rows. The first row contains several controls and has an height set to Auto. The second row contains a ToggleButton that changes the layout of the controls of the first row. The controls in first row might have different height and top margin. So, when the button pressed, the size of the first row changes to some unknown value. Like this:

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

    <!--several controls in first row-->

    <ToggleButton x:Name="tb" Grid.Row="1" Content="Collapse"/>
</Grid>

I want to animate the smooth height changing of the first row when a button is pressed. I read that changing the row height can be implemented through ObjectAnimationUsingKeyFrames, but I do not know how to do this with dynamic height.

Is there any way to do this kind of animation?

CodePudding user response：

The comments correctly pointed out the way to solve the problem. I managed to make that kind of animation by resizing the inner container.