How to achieve correct underline animation when selecting between tabitems in WPF?

See more:

C#

WPF

trigger

I have a total of four tab items and the underlined rectangles have different widths depending on which of the four tab items is selected. But my data trigger binding doesn't work.

Expected：

Suppose I select the second tab item, and after I select the fourth tab item, the underline rectangle should move from the second tab item to the fourth tab item with the correct entry and exit animation as well as the correct width.

I have the following code but I don't know how to do it.

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>

        <TabControl Grid.Row="0"     x:Name="TestTabs">
            <TabItem Header="News"/>
            <TabItem Header="Files"/>
            <TabItem Header="Settings"/>
            <TabItem Header="Help"/>

        </TabControl>
        <DockPanel x:Name="rp" Grid.Row="0" LastChildFill="False" HorizontalAlignment="Stretch">
            <Canvas DockPanel.Dock="Left">
                <Rectangle x:Name="MySeparator3" Fill="Orange"  VerticalAlignment="Top" Width="40" Height="4" Margin="3,25,0,0"   SnapsToDevicePixels="True" UseLayoutRounding="True" RenderOptions.EdgeMode="Aliased" RenderOptions.BitmapScalingMode="HighQuality" >
                    <Rectangle.Style>
                        <Style TargetType="{x:Type Rectangle}">
                            <Setter Property="SnapsToDevicePixels" Value="True"/>
                            <Setter Property="RenderOptions.EdgeMode" Value="Aliased"/>
                            <Setter Property="Visibility" Value="Visible"/>
                            <Setter Property="IsEnabled" Value="True"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding ElementName=TestTabs, Path=SelectedIndex}" Value="1">
                                    <Setter Property="SnapsToDevicePixels" Value="True"/>
                                    <Setter Property="RenderOptions.EdgeMode" Value="Aliased"/>
                                    <Setter Property="Visibility" Value="Visible" />
                                    <Setter Property="IsEnabled" Value="True" />
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard Name="MyBeginStoryboard11">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="40" Duration="0:0:0.2"></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"   From="40" To="35" Duration="0:0:0.2"></DoubleAnimation>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard Name="MyBeginStoryboard1">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="40" To="0" Duration="0:0:0.2"></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"   From="35" To="40" Duration="0:0:0.2"></DoubleAnimation>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                                <MultiDataTrigger>
                                    <MultiDataTrigger.Conditions>
                                        <Condition  Binding="{Binding ElementName=TestTabs, Path=SelectedIndex}" Value="2"/>
                                    </MultiDataTrigger.Conditions>
                                    <MultiDataTrigger.EnterActions>
                                        <BeginStoryboard Name="MyBeginStoryboard19">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="73" Duration="0:0:0.2"></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"   From="40" To="50" Duration="0:0:0.2"></DoubleAnimation>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </MultiDataTrigger.EnterActions>
                                    <MultiDataTrigger.ExitActions>
                                        <BeginStoryboard Name="MyBeginStoryboard5">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="73" To="0" Duration="0:0:0.2"></DoubleAnimation>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"   From="50" To="40" Duration="0:0:0.2"></DoubleAnimation>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </MultiDataTrigger.ExitActions>
                                </MultiDataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Rectangle.Style>
                </Rectangle>
            </Canvas>
        </DockPanel>
    </Grid>

What I have tried:

My goal is to declare four separate rectangle for each tab item and give enter animation and exit animation to each of them but my storyboard animation is conflicting because sometimes one tab item has multiple storyboard animation so as soon as I select a tab item more than one animation is executing. How I execute one by one?