WPF Tabindexes not behaving as expected - The force is weak....

Question

Hi All,

I have a WPF window / form with various controls.

I have set the tabindexes in the desired ordered but am getting strange behavior.

When tabbing through the window, the order should be as follows: first text boxes on the left, then the date controls on the right, then my tab control and tab pages and then only the buttons.

But the tab control is getting skipped and the focus is moving directly to the buttons. If I continue to tab after the buttons the tab control is then selected.

Below is the xmal.

Any help is appreciated.

    <Window xmlns:my="clr-namespace:DevExpress.Xpf.Editors;assembly=DevExpress.Xpf.Core.v10.1"  x:Class="TabStopIssue.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
  xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        Title="MainWindow" Height="350" Width="525">
  <Grid>
    <Grid >
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
      </Grid.RowDefinitions>
      <Grid Grid.Row="0">
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="2*"/>
          <ColumnDefinition Width="2*"/>
          <ColumnDefinition Width="3*" />
          <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition />
          <RowDefinition />
          <RowDefinition />
          <RowDefinition />
        </Grid.RowDefinitions>


        <Label Grid.Row="1" Grid.Column="0" Content="Name"/>
        <dxe:ComboBoxEdit Grid.Row="1" Grid.Column="1"  Text="" TabIndex="0" />

        <Label Grid.Row="2" Grid.Column="0" Content="Description"/>
        <dxe:TextEdit Grid.Row="2" Grid.Column="1" TabIndex="1" />

        <Label Grid.Row="1" Grid.Column="2" Content="From Date"/>
        <dxe:DateEdit Grid.Row="1" Grid.Column="3" TabIndex="2" />

        <Label Grid.Row="2" Grid.Column="2" Content="ToDate"/>
        <dxe:DateEdit Grid.Row="2" Grid.Column="3" TabIndex="3" />
      </Grid>
      <Grid Grid.Row="1">
        <TabControl TabIndex="4">
          <TabItem Header="Tab1" TabIndex="5">
            <Grid >
              <TextBox>Enter Text Here</TextBox>
            </Grid>
          </TabItem>

          <TabItem Header="Tab2" TabIndex="6">
            <Grid >
              <TextBox>Enter Text Here</TextBox>
            </Grid>
          </TabItem>

          <TabItem Header="tab3" TabIndex="7">
            <Grid >
              <TextBox>Enter Text Here</TextBox>
            </Grid>
          </TabItem>

          <TabItem Header="tab4" TabIndex="8">
            <Grid >
              <TextBox>Enter Text Here</TextBox>
            </Grid>
          </TabItem>

          <TabItem Header="tab5" TabIndex="9">
            <Grid >
              <TextBox>Enter Text Here</TextBox>
            </Grid>
          </TabItem>
        </TabControl>
      </Grid>
      <Grid Grid.Row="2">
        <StackPanel HorizontalAlignment="Right">
          <Button  Content="Button1" IsDefault="True" TabIndex="10" />
          <Button  Content="Button2" TabIndex="11" />
          <Button Content="button3" IsCancel="True" TabIndex="12" />
        </StackPanel>
      </Grid>
    </Grid>
  </Grid>
</Window>

Answer 1

To get the TabControl to appear in the correct place in the tab order, amend the TabControl element like so:

<TabControl TabIndex="4" KeyboardNavigation.TabNavigation="Local">

You can't use the tab key to tab through individual tabs on the TabControl as far as I know. Standard windows behaviour is to use the arrow keys for that.