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

堆棧面板從其內容的組合高度獲取其高度。 明確設置高度沒有意義。

您需要更改堆棧面板內容的高度/可見性。