Continuing the series on visual grouping controls in WPF, the Tab control is a common UI element that has been around for some time. It makes a convenient way to organize your window when there is more than could realistically fit and still be comprehensible.
In WPF, Tabs are very easy to implement. Create a new WPF Window, remove the default Grid tags, and add the following XAML:
<TabControl>
<TabItem Header=“Tab 1“>Here’s Tab 1</TabItem>
<TabItem Header=“2nd Tab“>A second Tab</TabItem>
</TabControl>
Run the app, and you’ll see the two tabs on a window:
The TabItem, just like most controls, can hold a container control that can hold much more, thus making the tab really useful. In this example, let’s add a third tab item, with a grid. We’ll put in a few text boxes and a button.
<TabControl Name=“tabMyTabs“ >
<TabItem Header=“Tab 1“>Here’s Tab 1</TabItem>
<TabItem Header=“2nd Tab“>A second Tab</TabItem>
<TabItem Header=“Cool Tab“>
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=“*“></ColumnDefinition>
<ColumnDefinition Width=“2*“></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Column=“0“ Grid.Row=“0“
HorizontalAlignment=“Right“>
First Name:
</Label>
<Label Grid.Column=“0“ Grid.Row=“1“
HorizontalAlignment=“Right“>
Last Name:
</Label>
<TextBox Name=“FirstName“
Grid.Column=“1“
Grid.Row=“0“ />
<TextBox Name=“LastName“
Grid.Column=“1“
Grid.Row=“1“ />
<Button Grid.Column=“1“
Grid.Row=“2“
Height=“23“ Width=“75“
HorizontalAlignment=“Left“
Name=“CoolTabButton“
Click=“CoolTabButton_Click“
VerticalAlignment=“Top“>
OK
</Button>
</Grid>
</TabItem>
</TabControl>
Using techniques already described in my post on Grids (https://arcanecode.wordpress.com/2007/08/28/grid-yourself-its-wpf/ , in case you missed it) I was able to create a tab with some useful content. Running it, you can see the results for yourself:
It’s also possible to determine the current tab via code. Let’s wire up a click event to that OK button you see. This requires we name the tab (I called it tabMyTabs), and the button, and add a Click=”CoolTabButton_Click” to the button declaration. Now all we have to do is add a little code:
private void CoolTabButton_Click(object sender, RoutedEventArgs e)
{
TabItem ti = tabMyTabs.SelectedItem as TabItem;
MessageBox.Show(“Tab Index=” + ti.Header);
}
Running and clicking on the OK button will result in a message box with the words “Tab Index=Cool Tab”
Granted my design won’t win any awards, but it gives you the general idea of how to use a tab control in WPF.
Arcane Code 
Hello,
This post was really helpful for me.
I have one more problem with tab control:
I have two tabs. On click of button on one tab(button is on first tab), another tab should be selected.
How can i achieve this.
Pls help.
Thanks
Hi,
Can I navigate content of WPF window in another window’s tabitem just like we can navigate page content to frame in tabitem.
thanks
Nice Article.
Could you please play with the events and how we can achieve form input output.
Gracias