1

我试图在 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>

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

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

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

4

2 回答 2

1

Instead of using third party programs, i recommend Blend. Open your Solution there and work with the VisualStateManager. I did a transitional effect from Unselected to Selected in less than 30 seconds. It was simple (Opacity change), but Blend is very user friendly and you can integrate with Visual Studio natively.

Here's what it generated to be (not what you are asking):

                <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>

Good luck.

于 2013-10-08T19:41:29.457 回答
1

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

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

但是，上述库已经做到了这一点，并提供了许多不同的转换供您使用。您可以通过从以下链接下载“TransitionalsHelp_1_0.zip”文件来获得使用库的帮助：

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

于 2013-10-08T14:13:18.267 回答