How do I bind a TabControl to a collection of ViewModels?

by

This isn’t MVVM. You should not be creating UI elements in your view model.

You should be binding the ItemsSource of the Tab to your ObservableCollection, and that should hold models with information about the tabs that should be created.

Here are the VM and the model which represents a tab page:

public sealed class ViewModel
{
    public ObservableCollection<TabItem> Tabs {get;set;}
    public ViewModel()
    {
        Tabs = new ObservableCollection<TabItem>();
        Tabs.Add(new TabItem { Header = "One", Content = "One's content" });
        Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" });
    }
}
public sealed class TabItem
{
    public string Header { get; set; }
    public string Content { get; set; }
}

And here is how the bindings look in the window:

<Window x:Class="WpfApplication12.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <ViewModel
            xmlns="clr-namespace:WpfApplication12" />
    </Window.DataContext>
    <TabControl
        ItemsSource="{Binding Tabs}">
        <TabControl.ItemTemplate>
            <!-- this is the header template-->
            <DataTemplate>
                <TextBlock
                    Text="{Binding Header}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <!-- this is the body of the TabItem template-->
            <DataTemplate>
                <TextBlock
                    Text="{Binding Content}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Window>

(Note, if you want different stuff in different tabs, use DataTemplates. Either each tab’s view model should be its own class, or create a custom DataTemplateSelector to pick the correct template.)

A UserControl inside the data template:

<TabControl
    ItemsSource="{Binding Tabs}">
    <TabControl.ItemTemplate>
        <!-- this is the header template-->
        <DataTemplate>
            <TextBlock
                Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <!-- this is the body of the TabItem template-->
        <DataTemplate>
            <MyUserControl xmlns="clr-namespace:WpfApplication12" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

More Related Contents:

  1. Stop TabControl from recreating its children
  2. In C# WPF, why is my TabControl’s SelectionChanged event firing too often?
  3. MVVM: Tutorial from start to finish?
  4. Good or bad practice for Dialogs in wpf with MVVM?
  5. How to bind to a PasswordBox in MVVM
  6. How to bind WPF button to a command in ViewModelBase?
  7. Opening new window in MVVM WPF
  8. WPF: Binding a ContextMenu to an MVVM Command
  9. Implementing CollectionChanged
  10. What’s the best way to pass event to ViewModel?
  11. WPF MVVM Why use ContentControl + DataTemplate Views rather than straight XAML Window Views?
  12. Changing the View for a ViewModel
  13. Binding SelectedItems of ListView to ViewModel
  14. Mvvm model ViewModel
  15. WPF – Set Focus when a button is clicked – No Code Behind
  16. Proper way to use CollectionViewSource in ViewModel
  17. MVVM Sync Collections
  18. Moving to next control on Enter keypress in WPF
  19. Can I somehow temporarily disable WPF data binding changes?
  20. One ViewModel for UserControl and Window or separate ViewModels
  21. The component does not have a resource identified by the uri
  22. ScrollIntoView for WPF DataGrid (MVVM)
  23. How to set focus to textbox using MVVM?
  24. Binding Commands to Events?
  25. Page Navigation using MVVM in Store App
  26. How to have multiple pairs “View-ViewModel”?
  27. Accessing a property in one ViewModel from another
  28. Add context menu in datagrid, how to get the select Item value
  29. Limit binding updates per second
  30. Is it wrong to use the Dispatcher within my ViewModel?

Leave a Comment