WPF: Bind Tab Control

Question

I am using MVVM, and I am trying to bind a TabControl's ItemsSource, I used this code:

<TabControl ItemsSource="{Binding ProjectComponents}"
                    SelectedIndex="{Binding SelectedMenu, Mode=TwoWay}" Grid.Column="1" Margin="5">

And for the view model:

projectComponents = new ObservableCollection<TabItem>();
projectComponents.Add(new TabItem()
{

     Content = new ProjectComponentsView()
     {
          DataContext = new ProjectClientHandlerViewModel()
     }
});

I used this in a Silverlight project and it works just fine, but in WPF, I don't know why is it that the content of the TabItem does not show.

EDIT:

I edited my code to this:

View:

 <TabControl ItemsSource="{Binding ProjectComponents}" SelectedIndex="{Binding SelectedMenu, Mode=TwoWay}" Grid.Column="1" Margin="5">
        <TabControl.ContentTemplate>
            <DataTemplate >
                <this:ProjectComponentsView DataContext="{Binding}"/>
            </DataTemplate>
        </TabControl.ContentTemplate>
 </TabControl>

View model:

projectComponents = new ObservableCollection<ProjectComponentViewModel>();
projectComponents.Add(new ProductViewsHandlerViewModel());

Where ProjectComponentViewModel is a base class of ProductViewsHandlerViewModel, but it's still not working.

possible duplicate of [How do I bind a TabControl to a collection of ViewModels?](http://stackoverflow.com/questions/5650812/how-do-i-bind-a-tabcontrol-to-a-collection-of-viewmodels) — MethodMan, Apr 16 '15 at 22:10
I don't think it's the same question, the duplicate you posted is for pattern guidelines, my question is why the binding is not happening, since in Silverlight it did work perfectly — Ayoub.A, Apr 16 '15 at 22:38
using TabItem type within your viewmodel is not mvvm. you should have a collection of objects(viewmodels) and bind this to the itemssource of the tabcontrol. — blindmeis, Apr 17 '15 at 05:47

Xi Sigma · Accepted Answer · 2016-03-01T20:48:17.273

Here is a quick example to get you started

public class MainVm : VMBase
    {
        public ObservableCollection<TabVM> Items { get; set; }
        public VMBase SelectedItem {get;set;} 
        public MainVm()
        {
            Items = new ObservableCollection<TabVM>()
            {
                new TabVM(){Header="A",Content = new SomeVm()},
                new TabVM(){Header="B",Content = new SomeVm()},
                new TabVM(){Header="C",Content = new SomeVm()},
                new TabVM(){Header="D",Content = new OtherVm()}
            };
        }
    }

    public class TabVM : VMBase
    {
        public string Header { get; set; }
        public VMBase Content { get; set; }
    }

    public class SomeVm : VMBase{}
    public class OtherVm : VMBase{}
    public class VMBase { }


<TabControl ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem}">
        <TabControl.Resources>
            <DataTemplate DataType="{x:Type local:SomeVm}">
                <TextBlock>SomeVm Template</TextBlock>
            </DataTemplate>
            <DataTemplate DataType="{x:Type local:OtherVm}">
                <TextBlock>OtherVm Template</TextBlock>
            </DataTemplate>
        </TabControl.Resources>
        <TabControl.ItemTemplate>
            <DataTemplate>
                    <TextBlock Text="{Binding Header}"></TextBlock>
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding Content}"></ContentControl>
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>

templates get selected based on the ViewModel type as we set them up in the resources, you should also use a ViewModel that represents a TabItem, which is TabVM in the above snippet.

in the ItemTemplate of the tab control you set up the header template and in the ContentTemplate you put a ContentControl and bind its Content to the Content property of TabVM.

and don't forget to implement INotifyPropertyChanged.

WPF: Bind Tab Control

1 Answers1