TabControl - Scrolling between tabs

Question

I'm trying to implement in WPF tab that behaves like the one in IE9. When you open in the last many tabs, they are getting smaller and also to buttons are showen in the left and in the right, for scrolling between the tabs.

Any help would be very appritiated.

enter image description here

You should have at least a tab control already implemented. This question is still too generic... — , May 06 '12 at 06:54

score 3 · Accepted Answer · edited May 23 '17 at 10:32

create two main tab (main tabs are these two tab in answer) like this

  <TabItem   Header="«" Name="LeftTab"/>
  <TabItem Header="»" Name="RightTab"/>

set the visible of them to hiden. now add all tabs you want(with c# code or xaml) but dont forget set tag for all tab you add like below

    <TabItem   Header="new" Name="tiNew" Tag="1"/>
    <TabItem Header="edit" Name="tiEdit" Tag="2"/>
    ...

now when tabs count go more than normal and you cant show all in 1 page Do Under :

1.change visible of two main tab..

 bool is_Left_Right_tabVisible = false;
 if (tabControl1.Items.Count > 8)
 {
     LeftTab.Visibility = System.Windows.Visibility.Visible;
     RightTab.Visibility = System.Windows.Visibility.Visible;
     is_Left_Right_tabVisible = true;

  }
  else
  {
     LeftTab.Visibility = System.Windows.Visibility.Hidden;
     RightTab.Visibility = System.Windows.Visibility.Hidden;
     is_Left_Right_tabVisible = false;
   }

2.hidden all extra tab and only show some of them (example : show two main tab And show tab with tag 1-8)

3.if user click on main tabs (left or right tab) hidden one tab and visible another tab (example: you have lefttab-1-2-3-4-righttab when user click on right hidden NO 1 and vsible No 5 And focus on No 5)

    private void RightTab_MouseUp(object sender, MouseButtonEventArgs e)
    {
    if (is_Left_Right_tabVisible)
    {
        TabItem ti = sender as TabItem;
        if (ti.Name == "RightTab")
        {
            //find right tab must set to visible
            int Showtabindex = 0;
            var t1 = tabControl1.Items.OfType<TabItem>().Where(x => x.Visibility == System.Windows.Visibility.Hidden);
            foreach (var item in t)
            {
                if (((int)item.Tag) > Showtabindex)
                    Showtabindex = (int)item.Tag;
            }
            //find left tab must go invisible
            int Hiddentabindex = Showtabindex;
            var t2 = tabControl1.Items.OfType<TabItem>().Where(x => x.Visibility == System.Windows.Visibility.Visible);
            foreach (var item in t2)
            {
                if (((int)item.Tag) < Hiddentabindex)
                    Hiddentabindex = (int)item.Tag;
            }

            (tabControl1.Items[Hiddentabindex] as TabItem).Visibility = System.Windows.Visibility.Hidden;
            (tabControl1.Items[Showtabindex] as TabItem).Visibility = System.Windows.Visibility.Visible;

            //you can create drag and drop for tabs then user can change tab TAG
        }
        else if (ti.Name == "LeftTab")
        {
            //.....
        }
    }
}

i know it was abit hard but when i create a good user control i feel good . but dont forget in this usercontrol we use tabcontrol we can create a custom tab control from first and dont use this tabcontrol.

you also can create animation for tabs when those change opacity and move animation would be good check this post

TabControl - Scrolling between tabs

1 Answers1