问题描述
我的WPF应用程序中有一个Tab控件。此选项卡控件具有两个选项卡项。并且出于设计目的，我在每个选项卡项下划线。现在，我要为这些选项卡项的下划线设置动画。当我选择任何一个选项卡项目时，我只想要一个简单的动画，下划线应快速从一个选项卡项目移至另一个。尽管这些标签项之间有足够的空间。
我通过“控制模板”中的“文本修饰”来实现这些选项卡项目的下划线。我为两个选项卡项目使用了自己的自定义控件模板。我在这些选项卡项目之间的特定空间中使用了分隔符。我给选项卡项目的那些选项卡标题的下划线赋予红色。而且我还给分隔符添加了红色。而且它看起来也像是动画的Tab指示器。
我可以使用矩形，但是我不能使用它，因为分隔符更轻巧。
我知道我必须使用情节提要属性淡出分隔符，但我不知道如何应用它。
我想要的是，当我在这两个选项卡项目之间切换时，分隔符应从一侧逐渐淡出，反之亦然，这样看来，红色下划线正通过一个选项卡项目从一个选项卡项目移动到另一选项卡项目之间
这是选项卡项目的控制模板：
<Style x:Key="TabItemGoTwo" targettype="{x:Type TabItem}">
<Setter Property="Foreground" Value="#939393" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate targettype="{x:Type TabItem}">
<Grid
x:Name="Root"
ClipToBounds="true"
KeyboardNavigation.TabNavigation="Local"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.ClearTypeHint="Enabled"
SnapsToDevicePixels="true"
UseLayoutRounding="True">
<Border
x:Name="Border"
Margin="0,-4,0"
BorderThickness="1,1,1"
CornerRadius="2,12,0">
<Border.BorderBrush>
<SolidColorBrush Color="#282828" />
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Offset="0.0" Color="#282828" />
<GradientStop Offset="1.0" Color="#282828" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
x:Name="ContentSite"
Margin="0,2,2"
HorizontalAlignment="Left"
VerticalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True"
RenderOptions.BitmapScalingMode="NearestNeighbor"
RenderOptions.ClearTypeHint="Enabled"
SnapsToDevicePixels="True"
UseLayoutRounding="True" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<TextBlock
RenderOptions.EdgeMode="Aliased"
SnapsToDevicePixels="True"
Text="{TemplateBinding Content}"
UseLayoutRounding="True">
<TextBlock.Textdecorations>
<Textdecoration PenOffset="4" PenOffsetUnit="Pixel">
<Textdecoration.Pen>
<Pen Brush="#fe0000" Thickness="3" />
</Textdecoration.Pen>
</Textdecoration>
</TextBlock.Textdecorations>
</TextBlock>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#fdfdfd" />
<Setter Property="Panel.ZIndex" Value="100" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Root" Property="Background" Value="#282828" />
</Trigger>
<Trigger Property="IsMouSEOver" Value="True">
<Setter Property="Foreground" Value="#fdfdfd" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这是我的Tab项代码，该Tab控件内的分隔符。
<StackPanel Width="645" HorizontalAlignment="Left" Height="460" VerticalAlignment="Top" Margin="-4,59,0" UseLayoutRounding="True" >
<TabControl x:Name="MyTabControl" SelectionChanged="MyTabControl_SelectionChanged" BorderThickness="0" Background="#282828" Width="656" HorizontalAlignment="Left" Height="462" VerticalAlignment="Top" Margin="-5,-0.2,0" >
<TabItem x:Name="TabItemFirst" Style="{StaticResource TabItemGoTwo}" Header="File manager" Margin="34,-26.6,0" Height="24" FontSize="10" VerticalAlignment="Center" UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" SnapsToDevicePixels="True" TextOptions.textformattingMode="display" FontFamily="Segoe UI" >
<Grid Background="#222222" Height="433" HorizontalAlignment="Left" VerticalAlignment="Top" Width="645" Margin="0,5,0" >
<Label Name="Folder" Content="Folder:" FontSize="10" Foreground="#efefef" Height="20" Width="40" Margin="-571,-367,0" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.textformattingMode="display" />
<Button Name ="FolderSelect" Width="532" HorizontalAlignment="Left" VerticalAlignment="Top" Height="33" Margin="85,17,0" Background="#1a1a1a"
materialDesign:ShadowAssist.ShadowDepth="Depth0" materialDesign:RippleAssist.Feedback="Transparent" BorderThickness="0" UseLayoutRounding="True"
></Button>
<Label Name="ShowFolders" Content=".." Margin="-479,0" Background="#1a1a1a" Width="168" Height="373" Foreground="#efefef" ></Label>
<Button
Width="65" HorizontalAlignment="Left" Height="25" Background="#FF403D3D" Margin="16,292,0"
ToolTip="Resource name: MaterialDesignRaisedButton">
<materialDesign:PackIcon Kind="PlusThick" />
</Button>
<Button
Width="65" HorizontalAlignment="Left" Height="25" Background="#FF403D3D" Margin="82,0"
ToolTip="Open output folder">
<materialDesign:PackIcon Kind="FolderUpload" />
</Button>
<Label Content="Video recordings:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="269.2,-22,0" Foreground="#efefef" FontSize="10" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.textformattingMode="display" />
</Grid>
</TabItem>
<TabItem x:Name="TabItemSecond" Style="{StaticResource TabItemGoTwo}" Header="Preview" FontSize="10" Height="24" Margin="47.4,-39.6,0" FontFamily="Segoe UI" VerticalAlignment="Center" UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" SnapsToDevicePixels="True" TextOptions.textformattingMode="display" >
<Grid></Grid>
</TabItem>
</TabControl>
</StackPanel>
<StackPanel Height="10" Width="30" Margin="-850,-395,0" >
<Separator Height="2" Background="#fe0000" Margin="2,4,2.4,0" SnapsToDevicePixels="True" UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" ></Separator>
</StackPanel>
解决方法
我将您的最后StackPanel替换为Canvas，并使用以下动画代码更新您的Separator：
<Canvas>
<Separator Height="2" Width="50" Background="Red" Margin="25,82,4,0" >
<Separator.Style>
<Style TargetType="Separator">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=MyTabControl,Path=SelectedIndex}" Value="1">
<DataTrigger.EnterActions>
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="100" Duration="0:0:1"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="Width" From="50" To="20" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Name="MyBeginStoryboard2">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="100" To="0" Duration="0:0:1"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="Width" From="30" To="50" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Separator.Style>
</Separator>
</Canvas>