Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF TabControl Databinding

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?

like image 629
mackenir Avatar asked Mar 26 '09 14:03

mackenir


2 Answers

<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}"/>
like image 100
Kent Boogaart Avatar answered Nov 05 '22 03:11

Kent Boogaart


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).

like image 27
sfaust Avatar answered Nov 05 '22 03:11

sfaust