How to Bind a TabControl to a Collection of ViewModels using MVVM Data Binding?

MVVM data binding: Use ViewModel collection to bind TabControl

In MVVM (Model-View-ViewModel) architecture, ViewModel should not create UI elements directly. Instead, it should expose the data model and provide bindings for the views. To bind a TabControl to a ViewModel collection, a different approach is required.

Create tab page mockup

Implement a model class that represents each tab page, including properties for title and content. For example:

<code class="language-csharp">public sealed class TabItem
{
    public string Header { get; set; }
    public string Content { get; set; }
}</code>

ViewModel containing ObservableCollection

Create a ViewModel property for the ObservableCollection of TabItem objects. In the constructor, populate this collection with initial tabs:

<code class="language-csharp">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" });
    }
}</code>

Binding in XAML

In the XAML window, set the TabControl's ItemsSource to the Tabs property in the ViewModel:

<code class="language-xml"><Window ... x:Class="WpfApplication12.MainWindow">
    <Window.DataContext>
        <viewmodel:ViewModel xmlns:viewmodel="clr-namespace:WpfApplication12"/>
    </Window.DataContext>
    <TabControl ... ItemsSource="{Binding Tabs}"/>
</Window></code>

Data template for tab content

To display different content in each tab, use the data template of the TabControl's ContentTemplate property:

<code class="language-xml"><TabControl ...>
    <TabControl.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <myusercontrol:MyUserControl xmlns:myusercontrol="clr-namespace:WpfApplication12"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl></code>

With this approach you can dynamically create a TabControl and bind it to a ViewModel collection while maintaining MVVM principles.

The above is the detailed content of How to Bind a TabControl to a Collection of ViewModels using MVVM Data Binding?. For more information, please follow other related articles on the PHP Chinese website!