银光 : Add a visual transition between the states visible and invisible

Question

我想在可见性可以更改的控件上添加视觉效果(例如淡入、淡出)。

我不知道从哪里开始做。我已经阅读了一些关于 VisualStateManager 和 VisualTransform 的内容，但我仍然不知道是否可行以及该怎么做。你能帮助我吗 ？

谢谢

Answer 1

你想要的都是可能的。

您需要一个 VisualStateManager它定义了一个 ShowState和一个 HideState .这些反过来定义了一个 Storyboard控制可见性。

然后你打电话

VisualStateManager.GoToState(uiElement, "ShowState", true);

在您的元素上使用动画发送到“ShowState”。用“HideState”替换状态名称将隐藏元素。

我们用于 VisualStateManager 的 XAML在下面。它也为不透明度设置动画，因此有淡入/淡出。

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStates">
            <VisualState x:Name="ShowState">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01"
                                              Value="1" />
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:00">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Visible</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="HideState">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Opacity)">
                        <EasingDoubleKeyFrame KeyTime="00:00:01"
                                              Value="0" />
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                   Storyboard.TargetProperty="(UIElement.Visibility)">
                        <DiscreteObjectKeyFrame KeyTime="00:00:01">
                            <DiscreteObjectKeyFrame.Value>
                                <Visibility>Collapsed</Visibility>
                            </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

注意 KeyTime这些值可能需要针对您的应用程序进行调整。再看看这些，我发现“HideState”时间都是 0，这可能不会给你想要的效果。 AnthonyWJones 很可能在我们的应用程序中发现了一个错误!