.NET 4.0+

WPF Base Classes - Control - Tab Order

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

The twenty-eighth part of the Windows Presentation Foundation Fundamentals tutorial begins an examination of the Control class. This is a base class for all controls that include a replaceable template. The first article considers the tab order.

Control

The Control class is a base class for Windows Presentation Foundation (WPF) controls. It inherits from the FrameworkElement type, which I described in the previous few articles of this series. Unlike FrameworkElement and the other WPF base classes examined so far in this tutorial, Control is not a super class for all of the WPF layout controls. It is the base class only for controls that have a template. These controls that can be heavily customised by replacing the basic template with new visuals.

We will be looking at the process of modifying a control's template later in the tutorial. In this article, and the several that follow, we'll be seeing some of the other properties and events supplied by Control. In this instalment we'll consider a window's tab order.

Tab Order

Almost all WPF windows that you create will include a number of controls that you can navigate using the keyboard. In some cases you might use controls that will primarily be manipulated using a mouse, stylus or finger. However, as some users prefer to use the keyboard, it's important that they are able to navigate your controls logically with key presses.

Microsoft Windows uses the concept of a tab order for keyboard navigation. Pressing the tab key moves the focus between controls. The tab order determines in which order items are visited when pressing tab. The order is reversed if the user holds the Shift key whilst tapping tab.

Default Tab Order

The default tab order for a window is determined by the position of each control within the logical tree. When pressing only the tab key, the first control visited will be the one that is closest to the top of the tree. Further taps of the key will move the focus through the tree. In many cases the tab order matched the order in which controls are defined in the XAML.

To demonstrate the default tab order, create a new WPF Application project in Visual Studio. Name the project, "ControlTabOrderDemo". Once the project is initialised, replace the XAML in main window with the code below:

<Window x:Class="ControlTabOrderDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Control Demo"
        Height="150"
        Width="250">
    <DockPanel Background="Orange">
        <Button DockPanel.Dock="Bottom"
                HorizontalAlignment="Right"
                VerticalAlignment="Bottom"
                Margin="2"
                Width="75">Save</Button>
        
        <Grid Background="PeachPuff">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="25"/>
                <RowDefinition Height="25"/>
                <RowDefinition Height="25"/>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <Label>First Name</Label>
            <TextBox Grid.Column="1" Height="22"/>

            <Label Grid.Row="1">Initials</Label>
            <TextBox Grid.Column="1" Grid.Row="1" Height="22"/>

            <Label Grid.Row="2">Last Name</Label>
            <TextBox Grid.Column="1" Grid.Row="2" Height="22"/>
        </Grid>
    </DockPanel>
</Window>

The logical tree created by the above XAML places the DockPanel, which contains a Button, before the Grid holding three text boxes. Although the button is high in the XAML, it will appear at the bottom of the window due to the selected Dock option.

As the DockPanel and Grid cannot receive focus, the items that you can tab between are the Save button, followed by the First Name, Initials and Last Name text boxes. This is the default tab order, which might come as a surprise to users who expect the first press of the tab key to focus the First Name text box. This is a reasonable assumption, as the text box appears at the top of the window.

Try running the program and using tab to cycle through the four focusable controls. Also try using Shift-Tab to switch between controls in the reverse order.