对选项卡控件进行动画处理

本文关键字：动画 处理 控件 选项 | 更新日期: 2023-09-27 18:34:20

我正在尝试在 TabControl 中切换选项卡时实现漂亮的动画。
此时，我的样式动画 xaml 如下所示：

<EventTrigger RoutedEvent="SelectionChanged">
    <BeginStoryboard x:Name="selectionChangedBeginStoryboard">
        <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="borderScale"
                                           Storyboard.TargetProperty="ScaleX">
                <DoubleKeyFrameCollection>
                    <EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.2"/>
                    <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.4"/>
                </DoubleKeyFrameCollection>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

我想要实现的是标签传输的旋转效果。因此，它看起来像屏幕正在转开，并返回新的标签页。

问题是当我切换到另一个选项卡时，内容立即切换，动画只是旋转新标签页。

有什么想法吗？:)
谢谢！

对选项卡控件进行动画处理

我建议您使用过渡库，例如"过渡"。您可以从 CodePlex 上的 Transitionals 页面下载此库。

我之所以这样说，是因为为了执行您想要执行的操作，您需要在切换选项卡之前捕获旧TabItem的Visual，对其进行动画处理而不是TabItem，然后将其删除并恢复实际控件。

但是，上述库已经执行此操作，并提供了许多不同的过渡供您使用。您可以通过从以下链接下载"TransitionalsHelp_1_0.zip"文件来获取有关使用该库的帮助：

http://transitionals.codeplex.com/releases/view/12954

与其使用第三方程序，我推荐 Blend。在此处打开您的解决方案并使用VisualStateManager。我在不到 30 秒的时间内完成了从Unselected到Selected的过渡效果。这很简单（不透明度更改），但Blend非常用户友好，您可以与Visual Studio本地集成。

这是它生成的内容（不是您要问的内容）：

                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid x:Name="templateRoot" SnapsToDevicePixels="true">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates"/>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.3"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Unselected">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="templateRoot">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

祝你好运。

相关文章：