WPF TabControl Databinding

Question

I'm trying to build a WPF user interface containing a TabControl, and a TextBlock.

I want to bind these two controls to an underlying collection of instances of the following class:

class PageModel
{
  public string Title {get;set;}
  public string TabCaption {get;set;}
  public FrameworkElement TabContent {get;set}
}

The tab control should display a tab for each PageModel.

Each tab's header should display the TabCaption property
Each tab's content should be the TabContent property.

The TextBlock should display the Title of the currently selected tab.

How can I achieve this result?

score 64 · Accepted Answer · edited Sep 27 '11 at 14:53

64

<TabControl x:Name="_tabControl" ItemsSource="{Binding PageModels}">
    <TabControl.ItemContainerStyle>
        <Style TargetType="TabItem">
            <Setter Property="Header" Value="{Binding TabCaption}"/>
            <Setter Property="Content" Value="{Binding TabContent}"/>
        </Style>
    </TabControl.ItemContainerStyle>
</TabControl>
<TextBlock Text="{Binding SelectedItem.Title, ElementName=_tabControl}"/>

edited Sep 27 '11 at 14:53

answered Mar 26 '09 at 14:45

Kent Boogaart

175,602
35
392
393

1

Awesome solution. One more handy thing is to set the Header Value to {Binding Title} and the Content Value to {Binding .}. This allows you to use just a single viewmodel per page with a Title property for the heading. – Wouter Apr 06 '15 at 14:10

score 8 · Answer 2 · edited May 23 '17 at 12:22

I also found another solution to this here using ItemTemplate and ContentTemplate.

Also for any WPF newbies like me, after some headaches and frustration I realized that the collection of page models needs to be an ObservableCollection<PageModel> instead of a List<PageModel> or any changes to the list will not be reflected by the tabs (i.e. you can't add or remove a tab if it's a list).

WPF TabControl Databinding

2 Answers2

Linked