WPF TabControl Example: TabItem

Use the WPF TabControl with TabItems and Grid controls. Access SelectedItem in C# code.


Tabs are a user interface metaphor. They separate content. In WPF, we use the TabControl to create a tabbed user interface. In each tab, we add sub-controls to a Grid. And each tab has a Header.


To begin, please drag a TabControl to your WPF window. By default, two TabItems are present. Change their "Header" properties to be something more descriptive. You can add a third TabItem by right-clicking and selecting "Add TabItem."


we add some sub-controls to the TabItems. Try adding your favorite control. Here I add TextBlocks, and modify the Content in each one to be unique. You can add multiple controls to the Grid.

Note: By default, the Grid control within a TabControl has a Background property set. This accounts for the gray color.

Example markup: XAML <Window x:Class="WpfApplication25.MainWindow" xmlns="" xmlns:x="" Title="MainWindow" Height="350" Width="525"> <Grid> <TabControl HorizontalAlignment="Left" Height="299" Margin="10,10,0,0" VerticalAlignment="Top" Width="497" SelectionChanged="TabControl_SelectionChanged"> <TabItem Header="Cat"> <Grid Background="#FFE5E5E5"> <TextBlock HorizontalAlignment="Left" Margin="10" TextWrapping="Wrap" Text="Take pictures of me and put them on the Internet. Meow." VerticalAlignment="Top" Width="471"/> </Grid> </TabItem> <TabItem Header="Mouse"> <Grid Background="#FFE5E5E5"> <TextBlock HorizontalAlignment="Left" Margin="10" TextWrapping="Wrap" Text="I want some cheese." VerticalAlignment="Top" Width="471"/> </Grid> </TabItem> </TabControl> </Grid> </Window> Example program: C# using System.Windows; using System.Windows.Controls; namespace WpfApplication25 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e) { // ... Get TabControl reference. var item = sender as TabControl; // ... Set Title to selected tab header. var selected = item.SelectedItem as TabItem; this.Title = selected.Header.ToString(); } } }


In the example, we also use the SelectionChanged event handler. Add the SelectionChanged attribute and press tab—Visual Studio inserts the C# code. In TabControl_SelectionChanged, we get the TabControl reference.

And: We cast the SelectedItem to the TabItem type. Finally we set the Title of the Window to the Header of the TabItem.


Tabs are an intuitive user interface element. They are a real-world metaphor—this aids program usability. With nested Grid elements, we can add sub-controls to the TabControl. And we detect tab switching with SelectionChanged.
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen,