Storyboard DoubleAnimation 不适用于 StackPanel Height 属性属性、不适用于、DoubleAnimation、Storyboard

2023-09-06 14:19:38 作者:半岛少年、

我正在尝试使用 DoubleAnimation 来更改 StackPanel 的 Height 属性.该代码不会引发任何异常.但是动画不起作用.

I'm trying to use DoubleAnimation to change the Height property of a StackPanel. The code does not throw any exception. But the animation does not work.

            <StackPanel x:Name="FlyoutContent">

                <StackPanel.Resources>
                    <Storyboard x:Name="HideStackPanel">
                        <DoubleAnimation Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="190" To="0" Duration="0:0:1">
                            <DoubleAnimation.EasingFunction>
                                <PowerEase EasingMode="EaseIn"></PowerEase>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                    <Storyboard x:Name="ShowStackPanel">
                        <DoubleAnimation Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="0" To="190" Duration="0:0:1">
                            <DoubleAnimation.EasingFunction>
                                <PowerEase EasingMode="EaseIn"></PowerEase>
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </StackPanel.Resources>

                <TextBlock Margin="0, 20, 0, 0" FontWeight="Bold" Text="Change Current Password" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" IsTapEnabled="True" Tapped="ChangePasswordHeader_Tapped"/>
                <StackPanel x:Name="ChangePasswordPanel" Margin="0, 5, 0, 0" Height="0">

C# 事件处理程序

private void ChangePasswordHeader_Tapped(object sender, TappedRoutedEventArgs e)
{
    if (ChangePasswordPanel.Height == 0)
    {
        ShowStackPanel.Begin();
    }
    else
    {
        HideStackPanel.Begin();
    }
}

它确实命中了 ChangePasswordHeader_Tapped 事件处理程序并按预期执行 ShowStackPanel.Begin 或 HideStackPanel.Begin 语句.但这对输出没有任何影响.StackPanel 的高度保持在 0.

It does hit ChangePasswordHeader_Tapped event handler and execute ShowStackPanel.Begin or HideStackPanel.Begin statement as expected. But it does not have any impact on the output. The Height of the StackPanel just stays at 0.

知道发生了什么吗?

推荐答案

我自己想通了.我所要做的就是在 DoubleAnimation 上启用依赖动画 (EnableDependentAnimation),因为此动画会影响布局.然后它完美地工作了.

I figured it out myself. All I had to do was to Enable Dependent Animation (EnableDependentAnimation) on the DoubleAnimation as this animation affects the layout. And then it worked perfectly.

                        <Storyboard x:Name="HideChangePasswordPanel">
                            <DoubleAnimation EnableDependentAnimation="True" Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="190" To="0" Duration="0:0:0.2">
                                <DoubleAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseIn"></PowerEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                        <Storyboard x:Name="ShowChangePasswordPanel">
                            <DoubleAnimation EnableDependentAnimation="True" Storyboard.TargetName="ChangePasswordPanel" Storyboard.TargetProperty="Height" From="0" To="190" Duration="0:0:0.2">
                                <DoubleAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseIn"></PowerEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>

希望它能节省一些时间!

Hope it saves someone some time!