.NET 4.0+

WPF Layout Controls - TabControl

by Richard Carr, published at http://www.blackwasp.co.uk/WPFTabControl.aspx

The sixteenth part of the Windows Presentation Foundation Fundamentals tutorial continues the examination of the most common layout controls. This instalment covers the TabControl, which allows pages of controls to be shown in a single area.

The TabControl

The TabControl is another WPF layout control that is provided as part of the .NET framework. It creates a rectangular area in which you can create several groups of controls. Each group is represented by a tab, similar to the tabbed section found on index card dividers, within a tab strip, which is a narrow area along the edge of the main control.

When first loaded, the TabControl shows a single group of controls. These are those placed on the default tab page. In many cases this is the first tab in the strip, and the first defined in your XAML. However, you can override this behaviour in either the XAML or using code.

The controls that are defined within all but the first tab page are hidden until the user clicks a tab's header to bring forward that page. This makes TabControls ideal for windows that require so many individual controls that they would appear too complicated, or for those with controls that can be easily categorised. Many developers use tabbed user interfaces that display the most commonly used controls first, whilst specialist controls for expert users remain hidden until requested.

TabControl Example

To show the TabControl in action, create a new WPF Application project in Visual Studio. Name the project, "TabControlDemo". Once the project is fully loaded, replace the XAML in the automatically generated window with the following:

<Window x:Class="TabControlDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TabControl Demo"
        Width="250"
        Height="200">
    <Grid Background="Plum">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        
        <TabControl Margin="5 5 5 0">
        </TabControl>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="1">
            <Button Width="100" Margin="5 10">OK</Button>
            <Button Width="100" Margin="5 10">Cancel</Button>
        </StackPanel>
    </Grid>
</Window>

The above XAML defines a Grid with two rows. The first row contains our TabControl, which is currently empty. We will add some tabs in a moment. The second row contains OK and Cancel buttons. This is a common layout for a dialog box.

You can add any controls to a TabControl. However, most controls will produce an odd user experience, as they are not designed for this purpose. The correct approach is to add several TabItem elements within the TabControl's XAML tags.

Each TabItem includes two key properties that allow you to configure the header within the tab and the contents of the page. You can set these to either plain text or a control, which may be a layout control. As with other controls we've seen, including the Expander and GroupBox, the header is defined with the Header property. The content is set in the Content property or between the opening and closing tags of the TabItem.

The order in which the TabItems are added is important. By default, the first TabItem in the XAML defines the page that is foremost when the control becomes visible. The order in the XAML also matches the order in which the tab headers are presented.

Add the following XAML between the opening and closing TabControl tags. This defines two tabbed pages. To add more you could add extra TabItem elements.

<TabItem Header="Employee">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Label Margin="5">First Name</Label>
        <TextBox Grid.Column="1" Margin="5"/>
        <Label Grid.Row="1" Margin="5">Last Name</Label>
        <TextBox Grid.Row="1" Grid.Column="1" Margin="5"/>
    </Grid>
</TabItem>

<TabItem Header="Salary">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Label Margin="5">Schedule</Label>
        <ComboBox Grid.Column="1" Margin="5">
            <ComboBox.Items>
                <ComboBoxItem>Annually</ComboBoxItem>
                <ComboBoxItem>Monthly</ComboBoxItem>
            </ComboBox.Items>
        </ComboBox>
        <Label Grid.Row="1" Margin="5">Amount</Label>
        <TextBox Grid.Row="1" Grid.Column="1" Margin="5"/>
    </Grid>
</TabItem>

Try running the program to see the results. You should initially see the first page, containing controls that request the name of a new employee. To see the page with salary details, click the Salary tab. Note that as you switch between pages the tab styles within the tab strip update to give the impression that the current page is topmost.

The plum colouring of the main grid shows that the tab strip does not fill the entire TabControl's width; it only expands to the size necessary to show the tab headers. If you add more tabs than can be displayed on a single line, the tab strip will expand vertically to allow extra rows of tabs.