WPF：动画后将网格可见性切换回第一个状态（折叠）

Question

所以我有这个 Grid:

<Grid x:Name="notificarionGrid" Visibility="Collapsed"/>

我想用动画改变它的可见性值，所以我有这 2 个故事板：

<Storyboard x:Key="fadeIn">
            <ObjectAnimationUsingKeyFrames BeginTime="0:0:0" Storyboard.TargetProperty="Visibility">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
            <DoubleAnimation BeginTime="0:0:0.0" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2.0"/>
        </Storyboard>

<Storyboard x:Key="fadeOut">
            <DoubleAnimation BeginTime="0:0:0:0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
        </Storyboard>

现在这段代码工作正常但这里唯一的问题是在 fadeOut 之后我的 Grid Visibility 变成 Hidden 而不是 Collapsed 是什么导致一些元素变得不负责任在这个Grid.

下

知道如何将我的 Grid 再次切换到 Collapsed 吗？

Answer 1

您可以处理 Storyboard 的 Completed 事件：

private void Storyboard_Completed(object sender, EventArgs e)
{
    notificarionGrid.Visibility = Visibility.Collapsed;
}

XAML:

<Storyboard x:Key="fadeOut" Completed="Storyboard_Completed">
    <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
</Storyboard>

或在您的 Storyboard 中添加一个 ObjectAnimationUsingKeyFrames：

<Storyboard x:Key="fadeOut">
    <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:2.0"/>
    <ObjectAnimationUsingKeyFrames BeginTime="0:0:2" Storyboard.TargetProperty="Visibility">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Visibility>Collapsed</Visibility>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

Answer 2

为具有适当 BeginTime 的可见性添加另一个 ObjectAnimationUsingKeyFrames：

<Storyboard x:Key="fadeOut">
    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                     To="0" Duration="0:0:2"/>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility"
                                   BeginTime="0:0:2">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Visibility>Collapsed</Visibility>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

WPF：动画后将网格可见性切换回第一个状态（折叠）

WPF: switch back Grid visibility into first state (Collapsed) after animation

wpf

grid

animation

storyboard