更改可见性，然后更改 Silverlight/WPF UIElement 的不透明度答案

【问题标题】：Change the Visibility and then change the Opacity of a Silverlight/WPF UIElement更改可见性，然后更改 Silverlight/WPF UIElement 的不透明度
【发布时间】：2013-05-22 22:25:07
【问题描述】：

我正在制作一个 Windows Phone 8 应用程序，并希望先淡出，然后 - 并且只有这样 - 实际上将 UIElement 的可见性设置为“已折叠”。但是，我不知道如何使它们异步发生。

我正在使用 Storyboards 和 Blend。这是我的故事板来切换我的小“弹出窗口”StackPanel：

<VisualStateGroup x:Name="PopupStates">
    <VisualState x:Name="PopupDisplayed">
        <Storyboard>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Popup">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>

            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Popup" d:IsOptimized="True"/>
        </Storyboard>
    </VisualState>

    <VisualState x:Name="PopupHidden">
        <Storyboard>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="Popup">
                <DiscreteObjectKeyFrame KeyTime="0">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>

            <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Popup" d:IsOptimized="True"/>

        </Storyboard>
    </VisualState>
</VisualStateGroup>

如何安排故事板事件一个接一个发生的时间？

【问题讨论】：

标签： wpf silverlight xaml windows-phone-8 uielement

【解决方案1】：

您可以将第二个动画的BeginTime属性设置为第一个动画的持续时间。

来自MSDN page：

BeginTime 属性对于创建按顺序播放的时间线很有用：通过增加共享同一父情节提要的连续时间线的 BeginTime，您可以错开它们的播放时间。

该页面上的示例显示了您如何使用它：

        <!-- Animates the rectangle's width. No 
             BeginTime specified so by default begins 
             as soon as it's parent (the Storyboard)
             begins. -->
        <DoubleAnimation 
          Storyboard.TargetName="MyAnimatedRectangle" 
          Storyboard.TargetProperty="Width"
          To="300" Duration="0:0:1" />

        <!-- Animates the rectangle's opacity. A BeginTime
             of 3 seconds specified so begins three seconds
             after the Storyboard begins (total of 5 seconds)-->
        <DoubleAnimation BeginTime="0:0:3"
          Storyboard.TargetName="MyAnimatedRectangle" 
          Storyboard.TargetProperty="Opacity"
          To="0" Duration="0:0:1" />

第一个动画在情节提要开始时立即开始并持续 1 秒。第二个动画在情节提要开始后 3 秒开始，并且持续 1 秒。

因此，在您的示例中，您需要将淡出弹出窗口的动画的持续时间设置为 2 秒（例如）：

<DoubleAnimation Duration="0:0:2" To="0"
                 Storyboard.TargetProperty="(UIElement.Opacity)"
                 Storyboard.TargetName="Popup" d:IsOptimized="True"/>

然后设置将可见性设置为 2 秒的动画的开始时间：

        <ObjectAnimationUsingKeyFrames BeginTime="0:0:2"
                         Storyboard.TargetProperty="(UIElement.Visibility)"
                         Storyboard.TargetName="Popup">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Collapsed</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>

【讨论】：

谢谢！我有一种感觉，做这件事会很简单——我挠头并试图通过 DoubleAnimationUsingKeyFrames 和各种其他解决方法让它工作。 MSDN 页面有时很难导航。