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 tested code examples. Pages are continually updated to stay current, with code correctness a top priority.
Sam Allen is passionate about computer languages. In the past, his work has been recommended by Apple and Microsoft and he has studied computers at a selective university in the United States.
This page was last updated on Sep 25, 2022 (edit).
