Setting Tab Order for WPF Controls

Tab order of controls in form defines the sequence of focus change on controls when user press tab key.

A well defined tab order form is very easy to user to fill the forms. So always define the tab order for your forms. By default tab order assigned is how the controls are defined in the XAML. Tab order will start from 0.

So manually in WPF we can set tab order for controls using TabIndex or

KeyboardNavigation.TabIndex.

Syntax:

<Control TabIndex="Value"> </Control>

If the form is defined with TabIndex for all the controls the execution of tab order will be lower index value to higher index value.if the two controls as same tabiTabIndex value then tab order will be how the controls are defined in XAML.

We can restrict a control not to focus when tab key is pressed using IsTabStop="False" or KeyboardNavigation.IsTabStop="False" or Focusable="False"

 Example:

<Grid>               <Grid.ColumnDefinitions>             <ColumnDefinition Width="150"></ColumnDefinition>             <ColumnDefinition Width="*"></ColumnDefinition>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>             <RowDefinition Height="Auto"></RowDefinition>             <RowDefinition Height="Auto"></RowDefinition>             <RowDefinition Height="Auto"></RowDefinition>             <RowDefinition Height="Auto"></RowDefinition>             <RowDefinition Height="Auto"></RowDefinition>         </Grid.RowDefinitions>         <TextBox Height="23" Grid.Column="0" Grid.Row="0" TabIndex="0">TabOrder0</TextBox>         <ComboBox Grid.Column="0" Grid.Row="1" KeyboardNavigation.TabIndex="2">             <ComboBoxItem IsSelected="True">TabOrder2</ComboBoxItem>         </ComboBox>         <RadioButton Content="IsTabStopFalse" Grid.Column="0" Grid.Row="2" IsTabStop="False"   />         <TextBox Height="23" Grid.Column="1" Grid.Row="0" TabIndex="1">TabOrder1</TextBox>         <TextBox Height="23" Grid.Column="1" Grid.Row="1" KeyboardNavigation.TabIndex="6">TabOrder6</TextBox>         <RadioButton Content="IsTabStopFalse" Grid.Column="1" Grid.Row="2" KeyboardNavigation.IsTabStop="False"   />         <CheckBox Grid.Column="0" Grid.Row="3" Content="No Tab Order"/>         <CheckBox Grid.Column="1" Grid.Row="3" Content="No Focusable" Focusable="False"/>         <GroupBox Grid.ColumnSpan="2" Header="MyGroupBox" Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="groupBox1" VerticalAlignment="Top" Width="Auto" Grid.Row="4" TabIndex="3">             <StackPanel>                 <TextBox Height="23" Grid.Column="1" Grid.Row="0" TabIndex="4">TabOrder4</TextBox>                 <TextBox Height="23" Grid.Column="1" Grid.Row="1" KeyboardNavigation.TabIndex="5">TabOrder5</TextBox>             </StackPanel>         </GroupBox>     </Grid>

Output: Focust Execution order is TabOrder0, TabOrder1, TabOrder2, TabOrder3, TabOrder4, TabOrder5, TabOrder6, No Tab Order. Checkboxes will not get focus.