5

我正在尝试使用 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。

关于发生了什么的任何想法？

4

3 回答 3

13

我自己想通了。我所要做的就是在 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>

希望它可以节省一些时间！

于 2012-11-12T06:04:02.043 回答
1

通常在 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>
于 2012-11-11T20:46:35.407 回答
0

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

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

于 2012-11-11T19:18:07.967 回答