WPF 选项卡控件 +动画

Question

我正在尝试对 TabControl 进行样式设置/动画处理，以便在选择选项卡时，旧选项卡淡出，新选项卡淡出/滑入。我已经对选项卡控件进行了样式设置，但现在我正在尝试了解如何为面板设置动画。 Blend 似乎没有多大帮助：在 xaml 中引用了样式“目标元素”，并引用了“面板”，但在尝试为该元素的属性设置动画时，这些似乎都不起作用。

我正在尝试为不透明度属性和变换属性设置动画。有人可以帮忙吗？提前致谢。

附 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

这里的问题是选项卡控件并不像它应有的那样通用。在这种情况下，最好的选择是对每个选项卡项使用自定义控件，并创建用于淡入/淡出的切换故事板。

我的技巧是使用视觉状态和行为，以及自定义模板单选按钮作为切换器。

创建故事板以动画显示折叠的可见性 >可见，然后将不透明度从 0 > 逐渐淡出100.

您可以在我的博客上看到这种技术的示例，位于 http:// /www.blackspike.com

Answer 2

使用 SelectionChanging 和 SelectionChanged，您可以将其应用于多个选项卡控件。我正在使用 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