Using the TabControl control in WPF 4

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:

1. Create a WPF application.
    
2. Add a TabControl from the Toolbox to MainWindow.xaml.
    
3. Add two TabItems within the TabControl.
    
4. Add a Grid control inside each of the TabItem.
    
5. Add TextBlock, TextBox, and Button controls inside the Grid to create UIs like Figure 1 and Figure 2.
    
6. 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.