Анимация TabControl

Я пытаюсь создать красивую анимацию при переключении вкладок в 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>

Чего я хочу добиться, так это вращающегося эффекта при передаче вкладки. Таким образом, это будет выглядеть так, как будто экран отворачивается и возвращается с новой вкладкой.

Проблема в том, что когда я переключаюсь на другую вкладку, содержимое сразу переключается, а анимация просто вращает новую вкладку.

Любые идеи, пожалуйста? :)
Спасибо!


animation c# wpf eventtrigger tabcontrol
person Old Account    schedule 08.10.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я бы порекомендовал вам использовать библиотеку переходов, например Transitionals. Эту библиотеку можно загрузить со страницы Transitionals на сайте CodePlex.

Причина, по которой я говорю это, заключается в том, что для того, чтобы сделать то, что вы хотите сделать, вам нужно будет захватить Visual старого TabItem перед переключением вкладок, анимировать его вместо TabItem, а затем удалить это и восстановить фактические элементы управления.

Однако вышеупомянутая библиотека уже делает это и предоставляет вам ряд различных переходов. Вы можете получить помощь по использованию библиотеки, загрузив файл TransitionalsHelpVisual0.zip по следующей ссылке:

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

person Sheridan    schedule 08.10.2013

arrow_upward
1
arrow_downward

Вместо использования сторонних программ я рекомендую Blend. Откройте там свое решение и работайте с файлом VisualStateManager. Я сделал переходный эффект от Unselected к Selected менее чем за 30 секунд. Это было просто (изменение непрозрачности), но 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>

Удачи.

person Community    schedule 08.10.2013