WPF and Silverlight TabControl with scrolling and with the New Tab button.

Everyone who has ever used the TabControl class knows that it doesn’t look as expected if it has large number of tabs. If the number of tabs exceeds the size of the visible area, they are distributed among several lines. But many people prefer to place tabs in one line and scroll headers like it is implemented in Firefox.

The attempt to solve this issue was made here by one guy, but his solution is far from ideal. It doesn’t work with the ObservableCollection class, has uncommon design and doesn’t change buttons correctly. So after some work I have created my own TabControl which, I hope, works properly.


The left and right buttons change their visibility and accessibility automatically when the number of tabs or size of the control is changed. The buttons are visible if the number of tabs is large, but one of them can be disabled if it is not possible to move further.

Also there is the button with the plus sign (+). It doesn’t add new tab automatically and must be coded manually. It makes sense because I use MVVM, and it is not possible to create a new tab because each tab is related with a view model. You have to use the AddItemCommand property and bind a function with the command. I use the RelayCommand from the MVVM Light Toolkit. Also there is another implementation of the command pattern which is called DelegateCommand and it is the part of the Prism. Here is the code example:
Inside the constructor of the view model:

this.AddCommand = new RelayCommand(AddNewItemFunction);

A function of the view model:

private void AddNewItemFunction()
{
    var newItem = new TabItemViewModel();
    this.Items.Add(newItem);
    this.SelectedItem = newItem;
}

The view:

<tab:ExtendedTabControl ItemsSource="{Binding Items}"
                        SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                        AddItemCommand="{Binding AddCommand}"

Also I’ve implemented the WPF counterpart of this control:

Silverlight source code: ExtendedTabControl.zip
WPF source code: WpfScrollableTabControl.zip