Question

我正在尝试在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>

我想要实现的是对标签传输的旋转效果。所以看起来屏幕正在转向，并返回新的标签页。

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

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

Answer 1

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

我说这是因为为了做你想做的事情，你需要在切换之前捕获旧Visual 的TabItem标签，动画而不是TabItem，然后将其删除并恢复实际控件。

但是，前面提到的库已经执行了此操作，并提供了许多不同的转换供您使用。您可以通过以下链接下载“TransitionalsHelp_1_0.zip”文件来获取有关使用该库的帮助：

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

Answer 2

我建议使用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>

祝你好运。

动画制作TabControl

2 个答案: