Setting style on first and last visible TabItem of TabControl

Question

I want to set a style on the first and last TabItems in a TabControl, and have them updated as the visibility of the TabItems is changed. I can't see a way to do so with triggers.

What we're after looks like this:

| > > > |

And the visibility of TabItems are determined by binding.

I do have it working in code. On TabItem visibility changed, enumerate through TabItems until you find the first visible one. Set the style on that one. For all other visible TabItems, set them to the pointy style (so that the previously first visible one is now pointy). Then start from the end until you find a visible TabItem and set the last style on that one. (This also lets us address an issue with TabControl where it will display the content of a non-visible TabItem if none of the visible TabItems are selected.)

There's undoubtably improvements I could make to my method, but I'm not convinced that it IS the right approach.

How would you approach this?

Answer 1

Sorry can you explain this a little better so far i have interpreted your question as so:

Apply a specific style when the visibility changes on the tab items at the beginning and end of the tab control - ie if it scrolls out of view then change the style?

If this is so then, as you add your TabItems (either programmatically or in wpf) you will need to implement the IsVisibleChanged event handler on the TabItems you wish to handle (ie first and last or all?)

    public Window1()
    {
        InitializeComponent();

        this.myTabItem.IsVisibleChanged += new DependencyPropertyChangedEventHandler(myTabItem_IsVisibleChanged);
    }

    private void myTabItem_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
    {
        myTabControl.Items[0].Style = FindResource("MyTabItemStyle") as Style;
    }

This is simple if you programmatically add the tab items to your control... :)

Answer 2

Note that the visibility of our TabItems will not be affected while that TabControl is in view, so we can apply styles only when the TabControl visibility changes.

private void Breadcrumb_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
     {
      if ((bool)e.NewValue)
      {
       if (sender is TabControl)
       {
        TabControl tabControl = (TabControl)sender;
        int firstVisible = -1;

        for (int i = 0; i  -1) //if is -1, they're all invisible
        {

         for (int i = tabControl.Items.Count - 1; i > firstVisible; i--)
         {
          TabItem tabItem = (TabItem)tabControl.Items[i];
          if (tabItem.Visibility == Visibility.Visible)
          {

           tabItem.Style = (Style)FindResource("LastBreadcrumbTabItem");
           break;

          }
         }
        }
       }
      }
     }

Answer 3

I have taken the silverlight tabcontrol and made the tabitems scrollable. here is a link to the post. I think this is what you are looking for.

http://www.dansoltesz.com/post/2010/07/20/Silverlight-tabcontrol-with-scrollable-tabItems.aspx