Tab Order on Dynamically Loaded Controls

Question

I have a situation where I am trying to set the tab order (tabindex) for controls that are loaded dynamically. The main XAML looks like this:

<ItemsControl DockPanel.Dock="Top" ItemsSource="{Binding ItemsDataSource}" Name="overlayItems" ItemTemplate="{StaticResource DetailsTemplate}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Vertical"/>
    </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
</ItemsControl>

For example purposes, assume the DetailsTemplate is something simple like this:

<DataTemplate x:Key="DetailsTemplate">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="50" />
      <ColumnDefinition Width="150" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="22" />
      <RowDefinition Height="22" />
      <RowDefinition Height="22" />
    </Grid.RowDefinitions>

    <Label Grid.Column="0" Grid.Row="0" Padding="0">Field 1</Label>
    <TextBox Grid.Column="1" Grid.Row="0" Name="field1TextBox" TabIndex="0" Text="{Binding Field1Value}"/>

    <Label Grid.Column="0" Grid.Row="1" Padding="0">Field 2</Label>
    <TextBox Grid.Column="1" Grid.Row="1" Name="field2TextBox" TabIndex="1" Text="{Binding Field2Value}"/>

    <Label Grid.Column="0" Grid.Row="2" Padding="0">Field 3</Label>
    <TextBox Grid.Column="1" Grid.Row="2" Name="field3TextBox" TabIndex="2" Text="{Binding Field3Value}"/>
  </Grid>
</DataTemplate>

This XAML works just fine except for the resulting tab order.

Assuming that the ItemsDataSource is a collection of a class and contains 3 instances of that class, three sets of the DetailsTemplate data template are created. However the tab order does not change, every field1TextBox remains at TabIndex 0. This means, instead of tabbing from the first instances of field1TextBox, to field2TextBox, to field3TextBox, the tab goes from the first instance of field1TextBox to the second instance of field1TextBox then to the third instance of field1TextBox then to the first instance of field2TextBox, and so on. My question is, how do I get the tab order corrected where, say, the second instance of the data template would have its text boxes tab indexes updated to 3, 4 and 5 respectively?

Answer 1

You'll find the answer in the KeyboardNavigation.TabNavigation Attached Property page from MSDN. This property Gets or sets the logical tab navigation behavior for the children of the element that this property is set on.

There are several possible values in the KeyboardNavigationMode Enumeration used that affect the tabbing order in different ways, but you're after the Local value, which has the effect that Tab Indexes are considered on local subtree only inside this container and ... [Navigation leaves the containing element when an edge is reached].

<Grid KeyboardNavigation.TabNavigation="Local">
    ...
</Grid>