How to Create Animated Tabs with Tab Indicator using WPF? - wpf

Question

I have a Tab control in my WPF application. And this Tab control has two Tab items. And due to design purpose I underline each of the Tab items. Now I want to animate the underline of those Tab items. I just want a simple animation when I select any of this tab items the underline should be quickly move from one tab item to another. Though there a decent space between those tab items.
I implement the underline of those tab items by Text Decoration in Control Template. I use my own custom Control Template for both of the Tab items. I use a separator in on that specific space between those tab items. I give red color for the underline of those tab header of the tab items. And I also give the red color for the separator. And it's also looks like an animated Tab indicator.
I can use rectangle but I don't use it because separator is more lightweight.
I know I have to use the storyboard property to fade out the separator but I don't know how to apply it.
What I want is when I switch between those two tab items the separator should fade out from one side to another and vice versa, So that it's look like the red underline is moving from one tab item to another through the space between them
Here is the Control Template for the tab items :
<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,0,-4,0"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,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,12,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>
Here is my code for the Tab items, separator within that Tab control.
<StackPanel Width="645" HorizontalAlignment="Left" Height="460" VerticalAlignment="Top" Margin="-4,59,0,0" UseLayoutRounding="True" >
<TabControl x:Name="MyTabControl" SelectionChanged="MyTabControl_SelectionChanged" BorderThickness="0" Background="#282828" Width="656" HorizontalAlignment="Left" Height="462" VerticalAlignment="Top" Margin="-5,1,-0.2,0" >
<TabItem x:Name="TabItemFirst" Style="{StaticResource TabItemGoTwo}" Header="File manager" Margin="34,0,-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,0" >
<Label Name="Folder" Content="Folder:" FontSize="10" Foreground="#efefef" Height="20" Width="40" Margin="-571,-367,0,0" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display" />
<Button Name ="FolderSelect" Width="532" HorizontalAlignment="Left" VerticalAlignment="Top" Height="33" Margin="85,17,0,0" Background="#1a1a1a"
materialDesign:ShadowAssist.ShadowDepth="Depth0" materialDesign:RippleAssist.Feedback="Transparent" BorderThickness="0" UseLayoutRounding="True"
></Button>
<Label Name="ShowFolders" Content=".." Margin="-479,59,0,0" Background="#1a1a1a" Width="168" Height="373" Foreground="#efefef" ></Label>
<Button
Width="65" HorizontalAlignment="Left" Height="25" Background="#FF403D3D" Margin="16,292,0,0"
ToolTip="Resource name: MaterialDesignRaisedButton">
<materialDesign:PackIcon Kind="PlusThick" />
</Button>
<Button
Width="65" HorizontalAlignment="Left" Height="25" Background="#FF403D3D" Margin="82,292,0,0"
ToolTip="Open output folder">
<materialDesign:PackIcon Kind="FolderUpload" />
</Button>
<Label Content="Video recordings:" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="269.2,-22,0,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,0,-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,0" >
<Separator Height="2" Background="#fe0000" Margin="2,4,2.4,0" SnapsToDevicePixels="True" UseLayoutRounding="True" RenderOptions.ClearTypeHint="Enabled" RenderOptions.BitmapScalingMode="NearestNeighbor" ></Separator>
</StackPanel>

Answer 1

I replace your last StackPanel with Canvas and update your Separator with the below Animation code:
<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>