Home
WPF
TabControl Example: TabItem
Updated Sep 25, 2022
Dot Net Perls
TabControl. 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.
Getting started. To begin, please create a new WPF application and then drag a TabControl to your WPF window. On the TabControl, each tab has a Header.
Example. 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."
Next We add some sub-controls to the TabItems. Here I add TextBlocks, and modify the Content in each one to be unique.
Note By default, the Grid control within a TabControl has a Background property set. This accounts for the gray color.
<Window x:Class="WpfApplication25.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 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>
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(); } } }
SelectionChanged. In the example, we also use the SelectionChanged event handler. Add the SelectionChanged attribute and press tab—Visual Studio inserts the C# code.
Info In TabControl_SelectionChanged, we get the TabControl reference from the sender object.
And We cast the SelectedItem to the TabItem type. Finally we set the Title of the Window to the Header of the TabItem.
Summary. Tabs are an intuitive user interface element. With nested Grid elements, we can add sub-controls to the TabControl. And we detect tab switching with SelectionChanged.
Dot Net Perls is a collection of pages with code examples, which are updated to stay current. Programming is an art, and it can be learned from examples.
Donate to this site to help offset the costs of running the server. Sites like this will cease to exist if there is no financial support for them.
Sam Allen is passionate about computer languages, and he maintains 100% of the material available on this website. He hopes it makes the world a nicer place.
This page was last updated on Sep 25, 2022 (edit).
Home
Changes
© 2007-2025 Sam Allen