DevCorner

Silverlight Quick Tip: How to change Tab Items order

I’ve got a question from my colleague about how he could change the order of Tab Items according to some business logic.

When adding the TabItem to the Tab control dynamically (from code behind for example) the TabItems will be added in the order they added. Here is the simple solution of hot change the order of already added tabs.

In my case I have simple XAML with Tab Control:

<controls:TabControl Width="400" Height="200" x:Name="tabs" Margin="5">
  <controls:TabItem Header="Tab #1">
    <controls:TabItem.Content>
      ...
    </controls:TabItem.Content>
  </controls:TabItem>

  <controls:TabItem Header="Tab #2">
    <controls:TabItem.Content>
      ...
    </controls:TabItem.Content>
  </controls:TabItem>

  <controls:TabItem Header="Tab #3">
    <controls:TabItem.Content>
      ...
    </controls:TabItem.Content>
  </controls:TabItem>
</controls:TabControl>

Here is simple code snippet to change the tab order:

TabItem item = tabs.Items[Tab_Index_Which_Should_Be_Moved] as TabItem;

tabs.Items.Remove(item);
tabs.Items.Insert(Index_Of_New_Tab_Location, item);

That’s it :) Very simple…

This will work for both Silverlight 2 and Silverlight 3.

Enjoy,

Alex

p.s. I prepared some cool Silverlight 3 (post-Beta) related posts and they will be released at the moment I’ll be able to do it. Stay tuned!