WPF的StackPanel可见性动画

Question

我有一个StackPanel，里面有一个按钮，当点击该按钮时，StackPanel会消失。我想通过动画实现从可见到隐藏的过渡效果，但一直没有成功。

我搜索了一段时间，发现了类似下面这样的内容：

<StackPanel Margin="80,60,60,80" Background="Gray">
    <StackPanel.Triggers >

        <EventTrigger  > 
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard TargetProperty="Visibility">

                        <DoubleAnimation Duration="0:0:5:0" From="Visible" To="Hidden"/>

                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>

    </StackPanel.Triggers>
    <Button Name="buttonTop" Content="TOP" Margin="40,40,40,40" Click="buttonTop_Click" Width="131" />
</StackPanel>

当然，这还没有达到100%。有什么想法吗？

- hikizume

Answer 1

你可以使用

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost"
                               Storyboard.TargetProperty="Visibility">
    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static Visibility.Visible}"/>
</ObjectAnimationUsingKeyFrames>

这基本上是在Storyboard中设置值的一种方式，其中KeyTime描述了值应该被设置的时间。因此完整的故事板如下所示：

<BeginStoryboard>
    <Storyboard>
        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         To="0" Duration="0:0:5.0"/>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
            <DiscreteObjectKeyFrame KeyTime="0:0:5.0" Value="{x:Static Visibility.Hidden}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</BeginStoryboard>

编辑：如何使故事板在按钮点击时触发：

<Button Content="Button" HorizontalAlignment="Left" Margin="337,221,0,0" VerticalAlignment="Top" Width="75">
    <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                 To="0" Duration="0:0:5.0"/>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0:0:5.0" Value="{x:Static Visibility.Hidden}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>

- AkselK

---

谢谢您提供详细的答案，它很有效。我该如何设置它在我点击按钮时激活？ - hikizume

Answer 2

Visibiltiy 是一个离散的值 - 它只有开或关两种状态，所以动画效果仍然会导致突然消失而非逐渐淡出。相反，您可以将 StackPanel 的 Opacity 从1变为0进行动画处理，然后再将 Visibilty 动画到 Hidden（或 Collapsed）。

- Kent Boogaart

---

我理解这个想法，但由于我对WPF非常陌生，我缺乏将这个想法转化为代码的知识。更详细的答案将不胜感激。 - hikizume