WPF Tabcontrol: Mixing ItemsSource and Items

Question

I am binding a GroupViewModel (GroupModel is a business concept) to the TabControl.ItemsSource.

I need to add a single tab at the end of this TabControl that has a (+) symbol and is similar to the last tab on a Web Browser that is used to add a new tab.

I figured I could just bind the TabControl.ItemsSource to the Collection of GroupViewModel to build out my tabs, and then call TabControl.Items.Add and add a single TabItem for the last tab with the (+) for adding more tabs, as follows:

TabItem tabItem = new TabItem();
tabItem.Header = "+";
TabControlDynamic.Items.Add(tabItem);

However, this gave me an error:

Operation is not valid while ItemsSource is in use. 
Access and modify elements with ItemsControl.ItemsSource instead.

I guess I could add a "dummy" GroupViewModel to the end of my collection and null out all the business-related values for the sake of getting this last tab, but this feels wrong. I keep thinking there must be a better way.

Is this my only option? Is there any way I can create a tab at the end without having to jury-rig my ViewModel and corresponding Model?

Thanks,

Philip

Answer 1

I have tried like this:

XAML:

 <TabControl ItemsSource="{Binding Items}" SelectionChanged="TabControl_SelectionChanged_1">
                <TabControl.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Header}"/>
                    </DataTemplate>
                </TabControl.ItemTemplate>
                <TabControl.ContentTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Content}"/>
                    </DataTemplate>
                </TabControl.ContentTemplate>
            </TabControl>

Code behind:

 private void TabControl_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
        {
            TabControl control = sender as TabControl;
            if (control != null && control.SelectedItem is Tab)
            {
                if ((control.SelectedItem as Tab).Header == " ")
                {
                    (control.SelectedItem as Tab).Header = "New Tab";
                    (control.DataContext as TabViewModel).Items.Add(new Tab() { Header = " ", Content = "" });
                    control.UpdateLayout();
                }
            }
        }

View-Model:

internal class TabViewModel : INotifyPropertyChanged
    {
        public void RaisePropertyChanged(string propertyname)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private ObservableCollection<Tab> items;

        public ObservableCollection<Tab> Items
        {
            get { return items; }
            set { items = value; RaisePropertyChanged("Items"); }
        }
        public TabViewModel()
        {
            items = new ObservableCollection<Tab>();
            items.Add(new Tab() { Header = "Tab Item 1", Content = "This is content 1" });
            items.Add(new Tab() { Header = "Tab Item 2", Content = "This is content 2" });
            items.Add(new Tab() { Header = "Tab Item 3", Content = "This is content 3" });
            items.Add(new Tab() { Header = " ", Content = "" });
        }
    }

    public class Tab:INotifyPropertyChanged
    {
        private string header;

        public string Header
        {
            get { return header; }
            set { header = value; RaisePropertyChanged("Header"); }
        }

        private string content;

        public string Content
        {
            get { return content; }
            set { content = value; RaisePropertyChanged("Content"); }
        }
        public void RaisePropertyChanged(string propertyname)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyname));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }