WPF TabControl - Add New Tab Button (+)

Question

What is the proper way of adding a '+' button tab at the end of all the tab items in the tab strip of a tab control.

1. It should work correctly with multiple tab header rows.
2. It should be at the end of all tab items
3. Tab cycling should work correctly (Alt+Tab) ie the + tab should be skipped.
4. I shouldn't have to modify the source collection I am binding to. ie the control should be reuseable.
5. Solution should work with MVVM

EDIT: To be more precise, the button should appear exactly as an additional last tab and not as a separate button somewhere on the right of all tab strip rows.

I am just looking for the general approach to doing this.

Google throws many examples of this, but if you dig a little deep none of them satisfy all the above four points.

Any help greatly appreciated.

N

Answer 1

OK try this

Define the ControlTemplate of the TabControl like this:

 <!-- Sets the look of the Tabcontrol. -->
<Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TabControl}">
                <Grid>
                    <!-- Upperrow holds the tabs themselves and lower the content of the tab -->
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

The upper row in the grid would be the TabPanel but you would put that into a StackPanel with a button following the TabPanel, style the button to look like a tab

Now the button would create a new TabItem (your custom created one perhaps) and add it to the ObservableCollection of Tabs you have as the Itemssource for your TabControl.

1) I think I know what you mean but not sure though, update me on this one

2 & 3) It should always appear at the end, and it's not a tab so hopefully not part of tab cycling

4) Well your TabControl should use a ObservableCollection of TabItems as Itemssource to be notified when a new one is added/removed

Hope this helps.

EDIT: Adding some code

The NewTabButton usercontrol .cs file

public partial class NewTabButton : TabItem
{
    public NewTabButton()
    {
        InitializeComponent();

        Header = "+";
    }
}

and the main window:

public partial class Window1 : Window
{
    public ObservableCollection<TabItem> Tabs { get; set; }

    public Window1()
    {
        InitializeComponent();

        Tabs = new ObservableCollection<TabItem>();

        for (int i = 0; i < 20; i++)
        {
            TabItem tab = new TabItem();
            tab.Header = "TabNumber" + i.ToString();
            Tabs.Add(tab);
        }

        Tabs.Add(new NewTabButton());

        theTabs.ItemsSource = Tabs;
    }
}

Now we would need to find a way to let it always appear bottme right and also add the event and style for it ( the plus sing is there as a placeholder ).

I'll take a better look tomorrow.

Answer 2

Here's the same question from msdn wpf forums:

http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/da30ade6-a8ae-4f0b-823b-86c7b2306fd4

Answer 3

An almost complete solution using IEditableCollectionView:

enter code here
    ObservableCollection<ItemVM> _items;
    public ObservableCollection<ItemVM> Items
    {
        get
        {
            if (_items == null)
            {
                _items = new ObservableCollection<ItemVM>();
                var itemsView = (IEditableCollectionView)CollectionViewSource.GetDefaultView(_items);
                itemsView.NewItemPlaceholderPosition = NewItemPlaceholderPosition.AtEnd;
            }

            return _items;
        }
    }

<DataTemplate x:Key="newTabButtonContentTemplate">
    <Grid/>
</DataTemplate>

<DataTemplate x:Key="newTabButtonHeaderTemplate">
    <Button Content="+"
        Command="{Binding ElementName=parentUserControl, Path=DataContext.NewCommand}"/>
</DataTemplate>

<DataTemplate x:Key="itemContentTemplate">
    <Grid/>
</DataTemplate>

<DataTemplate x:Key="itemHeaderTemplate">
    <TextBlock Text="TabItem_test"/>
</DataTemplate>

<vw:ItemHeaderTemplateSelector x:Key="headerTemplateSelector"
                           NewButtonHeaderTemplate="{StaticResource newTabButtonHeaderTemplate}"
                           ItemHeaderTemplate="{StaticResource itemHeaderTemplate}"/>

<vw:ItemContentTemplateSelector x:Key="contentTemplateSelector"
                            NewButtonContentTemplate="{StaticResource     newTabButtonContentTemplate}"
                            ItemContentTemplate="{StaticResource itemContentTemplate}"/>

<TabControl ItemsSource="{Binding Items}"
        ItemTemplateSelector="{StaticResource headerTemplateSelector}"
        ContentTemplateSelector="{StaticResource contentTemplateSelector}"/>


public class ItemHeaderTemplateSelector : DataTemplateSelector
{
    public DataTemplate ItemHeaderTemplate { get; set; }
    public DataTemplate NewButtonHeaderTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item == CollectionView.NewItemPlaceholder)
        {
            return NewButtonHeaderTemplate;
        }
        else
        {
            return ItemHeaderTemplate;
        }
    }
}



public class ItemContentTemplateSelector : DataTemplateSelector
{
    public DataTemplate ItemContentTemplate { get; set; }
    public DataTemplate NewButtonContentTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        if (item == CollectionView.NewItemPlaceholder)
        {
            return NewButtonContentTemplate;
        }
        else
        {
            return ItemContentTemplate;
        }
    }
}

enter code here

Its almost complete because the tab cycle doesnt skip the '+' tab, and will show empty content (which is not exactly great but I can live with it until a better solution come around... ).