如何为 Grid RowDefinition 高度变化设置动画（当 Height="Auto" 时）

Posted 2023-04-12

【中文标题】如何为 Grid RowDefinition 高度变化设置动画（当 Height="Auto" 时）

【英文标题】：How to animate Grid RowDefinition Height change (when Height="Auto")

【发布时间】：2021-12-08 01:38:31

【问题描述】：

我有一个两行的 wpf 网格。第一行包含几个控件，高度设置为 Auto。第二行包含一个更改第一行控件布局的 ToggleButton。 第一行中的控件可能具有不同的高度和上边距。因此，当按下按钮时，第一行的大小会更改为某个未知值。 像这样：

<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>

我想在按下按钮时为第一行的平滑高度变化设置动画。 我读到可以通过 ObjectAnimationUsingKeyFrames 实现更改行高，但我不知道如何使用动态高度来实现。

有没有办法做这种动画？

【问题讨论】：

您应该将行的高度设置为自动，并为承载行元素的容器的高度设置动画。然后，您可以使用 DoubleAnimation。

【参考方案1】：

cmets 正确地指出了解决问题的方法。我设法通过调整内部容器的大小来制作这种动画。