CODEWITHSUNDEEP
c#wpfanimationtabcontroleventtrigger
Old Account
Old Account

Reputation: 75

Animating a TabControl

I'm trying to achieve a nice animation while switching tabs in the TabControl.
At this point, my style animation xaml looks like this:

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

What I want to achieve is a rotating effect on the tab transmition. So it would look like the screen is turning away, and returns with the new tab page.

The problem is that when I switch to another tab, The content is switched right away, and the animation is just rotating the new tab page.

Any Ideas, please? :)
Thank you!

Upvotes: 1

Views: 2764

Answers (2)

trinaldi
trinaldi

Reputation: 2950

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.

Upvotes: 1

Sheridan
Sheridan

Reputation: 69987

I would recommend that you use a transition library, such as 'Transitionals'. You can download this library from the Transitionals page on CodePlex.

The reason why I say this is because in order to do what you want to do, you will need to capture the Visual of the old TabItem before you switch tabs, animate that instead of the TabItem and then remove that and restore the actual controls.

However, the aforementioned library already does this and provides a number of different transitions for you to use. You can get help with using the library by downloading the 'TransitionalsHelp_1_0.zip' file from the following link:

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

Upvotes: 1

Related Questions