WPF Tab Control + Анимации

Question

Я пытаюсь стилизовать / анимировать TabControl таким образом, чтобы при выборе вкладки старая исчезала, а новая исчезала / вставлялась. У меня есть элемент управления вкладками, стилизованный под точку, но теперь я пытаюсь понять, как анимировать панель. Blend, похоже, не очень помогает: есть ссылки на стили для «target-element» и ссылки на «Panel» в xaml, но ни одна из них не работает при попытке анимировать свойства этого элемента.

Я пытаюсь анимировать свойство Opacity и свойство transform. Может кто-нибудь, пожалуйста, помогите? Заранее спасибо.

XAML прилагается:

<Style x:Key="HeaderTabControlItem" TargetType="{x:Type TabItem}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Padding" Value="6,1,6,1"/>
    <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/>
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabItem}">
                <ControlTemplate.Resources>
                    <Storyboard x:Key="FadeTabIn">
                        <!-- This is where I am trying to put the animation code, the following (commented) line is an example. -->
                        <!--<DoubleAnimation By="0.6" From="0.5" To="1" Storyboard.TargetName="target-element" Storyboard.TargetProperty="(UIElement.Opacity)" /> -->
                    </Storyboard>
                </ControlTemplate.Resources>
                <Grid x:Name="layoutRoot" SnapsToDevicePixels="true" Opacity="0.6" RenderTransformOrigin="0.5,0.5">
                    <Grid.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </Grid.RenderTransform>
                    <ContentPresenter x:Name="Content" ContentSource="Header" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="0,0,8,0"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="true"/>
                    <Trigger Property="IsSelected" Value="true">
                        <Setter Property="Panel.ZIndex" Value="1"/>
                        <Setter Property="Opacity" TargetName="layoutRoot" Value="1"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="false"/>
                            <Condition Property="IsMouseOver" Value="true"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Opacity" TargetName="layoutRoot" Value="0.4"/>
                    </MultiTrigger>
                    <Trigger Property="TabStripPlacement" Value="Bottom"/>
                    <Trigger Property="TabStripPlacement" Value="Left"/>
                    <Trigger Property="TabStripPlacement" Value="Right"/>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="TabStripPlacement" Value="Top"/>
                        </MultiTrigger.Conditions>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="TabStripPlacement" Value="Bottom"/>
                        </MultiTrigger.Conditions>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="TabStripPlacement" Value="Left"/>
                        </MultiTrigger.Conditions>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="true"/>
                            <Condition Property="TabStripPlacement" Value="Right"/>
                        </MultiTrigger.Conditions>
                    </MultiTrigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Opacity" TargetName="layoutRoot" Value="0.25"/>
                        <Setter Property="RenderTransform" TargetName="layoutRoot">
                            <Setter.Value>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="0.8" ScaleY="0.8"/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard x:Name="FadeTabIn_BeginStoryboard" Storyboard="{StaticResource FadeTabIn}"/>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Проблема в том, что элемент управления вкладками не так универсален, как мог бы быть.Лучше всего в этой ситуации использовать пользовательские элементы управления для каждого элемента вкладки и создавать раскадровки для передачи / исчезновения.

Мой трюк для этого заключается в использовании визуальных состояний и поведения, а также настраиваемых шаблонных переключателейas switchers.

Создайте раскадровки для анимации видимости из свернутого> видимого, затем уменьшите непрозрачность с 0> 100.

Пример этой точной техники можно увидеть в моем блоге, в разделераздел Сайты на главной странице Silverlight xap на http://www.blackspike.com

Answer 2

Используйте SelectionChanging и SelectionChanged, и вы можете применить это к нескольким tabcontrols. Я использую Devexpress, но он должен работать с любым элементом управления вкладками WPF 4.0, поскольку я использую только события SelectionChanging и SelectionChanged.

VB:

Private Sub TabControl_SelectionChanging(sender As Object, e As DevExpress.Xpf.Core.TabControlSelectionChangingEventArgs) Handles tcMaterials.SelectionChanging, tcSymbols.SelectionChanging, myTabControl1.SelectionChanging
    Try
        If Not e.OldSelectedItem Is Nothing Then
            Dim Duration = New TimeSpan(0, 0, 0, 0, 500)

            Dim FromOpac As New DoubleAnimation(1, 0, Duration)

            Storyboard.SetTarget(FromOpac, CType(CType(e.OldSelectedItem, DXTabItem).Content, Grid))
            Storyboard.SetTargetProperty(FromOpac, New PropertyPath((CType(CType(e.OldSelectedItem, DXTabItem).Content, Grid).OpacityProperty)))
            Dim s As New Storyboard()
            s.AccelerationRatio = 0.2
            s.DecelerationRatio = 0.8
            s.Children.Add(FromOpac)

            s.Begin()
        End If
    Catch ex As Exception
        MsgBox(ex.Message)
    End Try

End Sub

Private Sub TabControl_SelectionChanged(sender As Object, e As DevExpress.Xpf.Core.TabControlSelectionChangedEventArgs) Handles tcMaterials.SelectionChanged, tcSymbols.SelectionChanged, myTabControl1.SelectionChanged
    Try
        If Not e.OldSelectedItem Is Nothing Then
            Dim Duration = New TimeSpan(0, 0, 0, 0, 500)

            Dim ToOpac As New DoubleAnimation(0, 1, Duration)


            Storyboard.SetTarget(ToOpac, CType(CType(e.NewSelectedItem, DXTabItem).Content, Grid))
            Storyboard.SetTargetProperty(ToOpac, New PropertyPath((CType(CType(e.NewSelectedItem, DXTabItem).Content, Grid).OpacityProperty)))
            Dim s As New Storyboard()
            s.AccelerationRatio = 0.2
            s.DecelerationRatio = 0.8
            s.Children.Add(ToOpac)

            s.Begin()
        End If
    Catch ex As Exception
        MsgBox(ex.Message)
    End Try

End Sub