How to underline a TabItem when it is selected through storyboard animation in WPF?

Question

I have a WPF application where I need to use Tab Control. In my Tab Control I have total nine tab items. I need to underline the tab item when it is selected.
Here my MainWindow.xaml code :

  <Grid>  
            <Grid.RowDefinitions>  
                <RowDefinition Height="*"/>  
                <RowDefinition Height="50"/>  
            </Grid.RowDefinitions>  
             
                        Grid.Row="0"   
                        x:Name="TestTabs">  
                <TabItem Header="News"/>  
                <TabItem Header="DLC"/>  
                <TabItem Header="Mods"/>  
                <TabItem Header="Settings"/>  
                  
    </TabControl>  
        </Grid>  

To underline a Tab Item, I use a Rectangle and bind with the tab control selected index so, whenever any tab is selected the Rectangle is under the tab item.

Here is my code :

<DataTrigger Binding="{Binding ElementName=TestTabs, Path=SelectedIndex}" Value="1">  

My approach is, I have total four tab items so, the underline rectangle has different width according to different selected tab item of those total four tab items. But my data trigger bindings are not working properly.

Suppose I select the second tab item and there after I select the 4th tab item so , the underline rectangle should move from second tab item to 4th tab item with proper Enter and exit animation and proper width.

My main question is how I know which tab item is selected and so that the rectangle change it's width according to each tab item. I know I have to use some MVVM approach. I have to do with view model and INotifyPropertyChanged but I don't know how implement that?

Answer 1

MainWindow.xaml:

 <Grid>  
        <Grid.RowDefinitions>  
            <RowDefinition Height="*"/>  
            <RowDefinition Height="50"/>  
        </Grid.RowDefinitions>  
        <TabControl Grid.Row="0"   x:Name="TestTabs" Loaded="TestTabs_Loaded"  SelectionChanged="TestTabs_SelectionChanged">  
            <TabItem Name="Tab1" Header="News"/>  
            <TabItem Name="Tab2" Header="Files"/>  
            <TabItem Name="Tab3" Header="Settings"/>  
            <TabItem Name="Tab4" 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"  Height="4" Margin="3,25,0,0"   Visibility="Visible"  IsEnabled="True"  
                           SnapsToDevicePixels="True" UseLayoutRounding="True" RenderOptions.EdgeMode="Aliased" RenderOptions.BitmapScalingMode="HighQuality" >  
                </Rectangle>  
            </Canvas>  
        </DockPanel>  
        <TextBlock Grid.Row="1" Text="{Binding ElementName=Tab1,Path=ActualWidth}" Height="50" Width="100"/>  
    </Grid>  

MainWindow.xaml.cs:

using System;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  

namespace RectangleWidthAndSlide  
{  
  public partial class MainWindow : Window  
  {  
    public MainWindow()  
    {  
      InitializeComponent();  
    }  
    public int Start{ get;set;}  
    private void TestTabs_SelectionChanged(object sender, SelectionChangedEventArgs e)  
    {  
        TabItem ti = ((sender as TabControl).SelectedItem as TabItem);  
      double sz1 = ti.ActualWidth;  
      MySeparator3.Width = sz1;  
      MySeparator3.UpdateLayout();  
      if (e.RemovedItems.Count > 0)  
      {  
        var oldTabItem = e.RemovedItems[0] as TabItem;  
        DoubleAnimation translate_x = null;  
        if (oldTabItem.Name == "Tab1")  
        {  
          switch (ti.Name)  
          {  
            case "Tab2":  
              translate_x = new DoubleAnimation()  
              {  
                From = 0,  
                To = 40,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
            case "Tab3":  
              translate_x = new DoubleAnimation()  
              {  
                From = 0,  
                To = 75,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
            case "Tab4":  
              translate_x = new DoubleAnimation()  
              {  
                From = 0,  
                To = 130,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
          }  
          var translate_y = new DoubleAnimation()  
          {  
            From = 0,  
            To = 0,  
            Duration = TimeSpan.FromSeconds(1),  
          };  
          TranslateTransform translateTransform1 = new TranslateTransform();  
          translateTransform1.BeginAnimation(TranslateTransform.XProperty, translate_x);  
          translateTransform1.BeginAnimation(TranslateTransform.YProperty, translate_y);  
          MySeparator3.RenderTransform = translateTransform1;  
        }  
        if (oldTabItem.Name == "Tab2")  
        {  
          switch (ti.Name)  
          {  
            case "Tab1":  
              translate_x = new DoubleAnimation()  
              {  
                From = 40,  
                To = 0,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
            case "Tab3":  
              translate_x = new DoubleAnimation()  
              {  
                From = 40,  
                To = 75,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
            case "Tab4":  
              translate_x = new DoubleAnimation()  
              {  
                From = 40,  
                To = 130,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
          }  
          var translate_y = new DoubleAnimation()  
          {  
            From = 0,  
            To = 0,  
            Duration = TimeSpan.FromSeconds(1),  
          };  
          TranslateTransform translateTransform1 = new TranslateTransform();  
          translateTransform1.BeginAnimation(TranslateTransform.XProperty, translate_x);  
          translateTransform1.BeginAnimation(TranslateTransform.YProperty, translate_y);  
          MySeparator3.RenderTransform = translateTransform1;  
        }  
        if (oldTabItem.Name == "Tab3")  
        {  
          switch (ti.Name)  
          {  
            case "Tab1":  
              translate_x = new DoubleAnimation()  
              {  
                From = 75,  
                To = 0,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
            case "Tab2":  
              translate_x = new DoubleAnimation()  
              {  
                From = 75,  
                To = 40,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
            case "Tab4":  
              translate_x = new DoubleAnimation()  
              {  
                From = 75,  
                To = 130,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
          }  
          var translate_y = new DoubleAnimation()  
          {  
            From = 0,  
            To = 0,  
            Duration = TimeSpan.FromSeconds(1),  
          };  
          TranslateTransform translateTransform1 = new TranslateTransform();  
          translateTransform1.BeginAnimation(TranslateTransform.XProperty, translate_x);  
          translateTransform1.BeginAnimation(TranslateTransform.YProperty, translate_y);  
          MySeparator3.RenderTransform = translateTransform1;  
        }  
        if(oldTabItem.Name == "Tab4")  
        {  
          switch (ti.Name)  
          {  
            case "Tab1":  
              translate_x = new DoubleAnimation()  
              {  
                From = 130,  
                To = 0,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
            case "Tab2":  
              translate_x = new DoubleAnimation()  
              {  
                From = 130,  
                To = 40,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
            case "Tab3":  
              translate_x = new DoubleAnimation()  
              {  
                From = 130,  
                To = 75,  
                Duration = TimeSpan.FromSeconds(0.2),  
              };  
              break;  
          }  
          var translate_y = new DoubleAnimation()  
          {  
            From = 0,  
            To = 0,  
            Duration = TimeSpan.FromSeconds(1),  
          };  
          TranslateTransform translateTransform1 = new TranslateTransform();  
          translateTransform1.BeginAnimation(TranslateTransform.XProperty, translate_x);  
          translateTransform1.BeginAnimation(TranslateTransform.YProperty, translate_y);  
          MySeparator3.RenderTransform = translateTransform1;  
        }  
      }  
    }  
    private void TestTabs_Loaded(object sender, RoutedEventArgs e)  
    {  
      var tabControl = (TabControl)sender;  
      tabControl.SelectedItem = Tab1;  
      TabItem ti = (tabControl.SelectedItem as TabItem);  
      double sz1 = ti.ActualWidth-5;  
      MySeparator3.Width = sz1;  
      MySeparator3.UpdateLayout();  
    }  
  }  
}  

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it.
 Note: Please follow the steps in our [documentation][5] to enable e-mail notifications if you want to receive the related email notification for this thread. 

[5]: https://learn.microsoft.com/en-us/answers/articles/67444/email-notifications.html