Storyboard DoubleAnimation不适用于StackPanel高度属性

Question

我正在尝试使用DoubleAnimation来更改StackPanel的Height属性。 代码不会抛出任何异常。 但动画不起作用。

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

什么发生了什么？

Answer 1

我自己想通了。 我所要做的就是在DoubleAnimation上启用相关动画（EnableDependentAnimation），因为此动画会影响布局。 然后它完美地工作。

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

希望能节省一些时间！

Answer 2

通常在XAML（和Silverlight / WPF）中设置UI组件大小的最简单方法是使用RenderTransform。 根据布局，您可能需要做一些技巧，但对于快速动画，它通常看起来非常好。

<Storyboard x:Name="Storyboard1">
<DoubleAnimation Duration="0:0:2" 
        To="0" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
        Storyboard.TargetName="StatListView" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:2" 
        To="0" 
        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" 
        Storyboard.TargetName="StatListView" d:IsOptimized="True"/>
</Storyboard>

Answer 3

堆栈面板从其内容的组合高度获取其高度。 明确设置高度没有意义。

您需要更改堆栈面板内容的高度/可见性。