This article introduces you to the TabControl control in WPF.
The TabControl control enables you to create tabbed pages inside a window or
container control.
A TabControl consists of one or more TabItem controls where each TabItem
represents a tab page. Each tab page can contain one or more child controls,
which are of type UIElement. Thus, you can have controls of type Grid, TextBlock,
ListBox, and so on.
This control is typically used when you want to organize groups of controls
together in a common section or page-like structure. Consider the scenario of a
desktop based library management system. You want to store the book codes,
titles and authors together as one set of information and book edition, price
and similar information as another set. You can organize these into two tab
pages and present them accordingly.
Figure 1 and Figure 2 shows how you can organize the controls within a
TabControl with two TabItems (each representing a tab page).
Figure 1
Figure 2
To achieve this outcome, you will need to do the following steps:
- Create a WPF application.
- Add a TabControl from the Toolbox to
MainWindow.xaml.
- Add two TabItems within the TabControl.
- Add a Grid control inside each of the
TabItem.
- Add TextBlock, TextBox, and Button
controls inside the Grid to create UIs like Figure 1 and Figure 2.
- Configure the properties of the controls
as shown in the below markup:
<Window
x:Class="WpfDemo.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
x:Name="LayoutRoot">
<TabControl
Margin="2,0,0,42">
<TabItem
Header="Book
Info" >
<Grid
ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="100"
/>
<ColumnDefinition
Width="150"
/>
<ColumnDefinition
Width="150"
/>
<ColumnDefinition
Width="178*"
/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="22*"
/>
</Grid.RowDefinitions>
<TextBlock
Text="Book
Code:"
Height="25"
Margin="0,15,0,45"></TextBlock>
<TextBox
Name="txtCode"
Grid.Column="1"
Margin="2,15,0,51"
Width="148"></TextBox>
<TextBlock
Grid.Row="1"
Text="Title:"
Margin="0,1,0,33"
Height="18"></TextBlock>
<TextBox
Name="txtTitle"
Grid.Row="1"
Grid.Column="1"
Margin="2,1,148,32"
Grid.ColumnSpan="2"></TextBox>
<TextBlock
Grid.Row="3"
Text="Author:"
Margin="0,5,0,33"
Height="17"></TextBlock>
<TextBox
Name="txtAuthor"
Grid.Row="3"
Grid.Column="1"
Margin="0,6,0,30"></TextBox>
<Button
Content="OK"
Grid.Row="4"
Grid.Column="1"
Margin="0,1,0,37"></Button>
</Grid>
</TabItem>
<TabItem
Header="Book
Details" >
<Grid
ShowGridLines="False">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="196*"
/>
<ColumnDefinition
Width="150"
/>
<ColumnDefinition
Width="150"
/>
<ColumnDefinition
Width="178*"
/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="Auto"
/>
<RowDefinition
Height="19"
/>
<RowDefinition
Height="114"
/>
<RowDefinition
Height="31*"
/>
</Grid.RowDefinitions>
<TextBlock
Height="25"
Margin="0,17,0,84">Edition:</TextBlock>
<TextBox
Name="txtEdition"
Grid.Column="1"
Height="25"
Margin="0,15,0,86"></TextBox>
<TextBlock
Margin="0,79,0,34"
Grid.RowSpan="2">Publish
Date:</TextBlock>
<DatePicker
Grid.Column="1"
x:Name="pubDate"
Margin="0,79,0,3"
></DatePicker>
<TextBlock
Grid.Row="8"
Margin="0,1,0,94">Price:</TextBlock>
<TextBox
Name="txtPrice"
Grid.Row="8"
Grid.Column="1"
Margin="0,0,0,94"></TextBox>
<Button
Content="OK"
Grid.Row="8"
Grid.Column="1"
Margin="0,50,0,36"
Height="28"></Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
When you build and execute the application, the outcome will be similar to
Figure 1 and when you click the second Tab, the outcome will be like Figure 2.
Though this example used two tabs, a TabControl can have more than two tabs too.
You cannot show the contents of more than one tab at one time. You can achieve
consistency across the tabs by applying common styles to them. You can also use
binding within tabs to bind to other items.
Refer the following MSDN article to know more about the TabControl:
http://msdn.microsoft.com/en-us/library/system.windows.controls.tabcontrol.aspx
Conclusion: In this article, you learn about the TabControl control in
WPF.