Question

我正在尝试对TabControl进行样式设置/动画处理，以便在选中标签时，旧标签淡出，新标签淡入/滑入。我将标签控件设置为某个点，但现在我我试图弄清楚如何为面板制作动画。 Blend似乎没有多大帮助：在xaml中引用了样式“target-element”和对“Panel”的引用，但是当试图为这个元素的属性设置动画时，它们似乎都不起作用。

我正在尝试为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

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

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

创建故事板以设置折叠后的可见性动画＆gt;可见，然后从0开始淡化不透明度> 100。

您可以在我的博客上查看此精确技术的示例，在http://www.blackspike.com上的主页Silverlight xap的网站部分下

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

WPF选项卡控件+动画

2 个答案: