Skip to main content
Version: 11.0.0

How To Bind Tabs

Binding Support Example

You can dynamically create tab items with data binding. To do this, bind the ItemsSource property of a tab control to an array of objects representing the tab header and content.

You can then use a data template to display the objects.

This example uses an array of objects created from this TabItemModel class:

public class TabItemModel
{
public string Header { get; }
public string Content { get; }
public TabItemModel(string header, string content)
{
Header = header;
Content = content;
}
}

Create an array of two TabItemModel instances and bind it to the DataContext.

DataContext = new TabItemModel[] { 
new TabItemModel("One", "Some content on first tab"),
new TabItemModel("Two", "Some content on second tab"),
};

The TabStrip header content is defined by ItemTemplate property, while TabItem's content is defined by ContentTemplate property.

Finally create a TabControl and bind its ItemsSource property to the DataContext.

<TabControl ItemsSource="{Binding}">
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Header}" />
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<DockPanel LastChildFill="True">
<TextBlock Text="This is content of selected tab" DockPanel.Dock="Top" FontWeight="Bold" />
<TextBlock Text="{Binding Content}" />
</DockPanel>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>