DockPanel Ordre de tabulation

Question

J'ai un DockPanel mis en place dans le DataTemplate d'un ItemsControl comme suit:

<ItemsControl HorizontalContentAlignment="Stretch">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <DockPanel>
        <ComboBox DockPanel.Dock="Left"/>
        <ComboBox DockPanel.Dock="Left"/>
        <Button DockPanel.Dock="Right">Button</Button>
        <!-- This will appear before the button...it has to go after it in the XAML so it will fill properly in the DockPanel -->
        <TextBox DockPanel.Dock="Left" MinWidth="100" HorizontalAlignment="Stretch"/>
      </DockPanel>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

Je veux que la zone de texte pour remplir tout l'espace restant entre les comboboxes et le bouton. Je devais mettre la dernière zone de texte dans le XAML parce que DockPanel ne remplir le dernier enfant. Cela semble très bien; Cependant, l'ordre de tabulation est maintenant vissé vers le haut. Maintenant onglets combobox-combobox-button-textbox au lieu de combobox-combobox-champ de saisie-bouton.

J'ai essayé d'utiliser les propriétés de KeyboardNavigation.TabIndex sur chaque point, mais étant donné que c'est un DataTemplate pour un ItemsControl (chacun de ces dockpanels sera un élément séparé), qui a fait le saut de l'ordre de tabulation verticalement vers le bas chacune des listes déroulantes des éléments, puis verticalement vers le bas de chaque zone de texte, puis verticalement vers le bas chaque bouton, plutôt que le comportement souhaité de passer à travers chaque rangée, puis vers le bas.

Exemple UI:

[Combo11] [Combo12] [Text1] [Button1]
[Combo21] [Combo22] [Text2] [Button2]

Dans l'état actuel des choses, il va Combo11,Combo12,Button1,Text1,Combo21,Combo22,Button2,Text2. Si j'ajouter des propriétés TabOrder, il va Combo11,Combo21,Combo12,Combo22,Text1,Text2,Button1,Button2.

Je voudrais pour aller Combo11,Combo12,Text1,Button1,Combo21,Combo22,Text2,Button2.

quelqu'un n'a aucune idée sur la façon de résoudre ce problème de l'interface utilisateur?

Answer 1

Vous pouvez utiliser une grille au lieu du DockPanel, comme suit:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <ComboBox />
    <ComboBox Grid.Column="1"/>
    <TextBox Grid.Column="2" MinWidth="100" />
    <Button Grid.Column="3">Button</Button>
 </Grid>

Et si vous voulez qu'ils alignent bien dans les différentes colonnes -. Vous pouvez utiliser SharedSizeGroup

Answer 2

Si vous voulez conserver le DockPanel, vous pouvez utiliser KeyboardNavigation.TabNavigation = « Local » sur la DockPanel mère, et vous pouvez définir les valeurs d'index de l'onglet sur les commandes en son sein.

Comme cela -

    <ItemsControl HorizontalContentAlignment="Stretch">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <DockPanel KeyboardNavigation.TabNavigation="Local">
                    <ComboBox DockPanel.Dock="Left" TabIndex="1"/>
                    <ComboBox DockPanel.Dock="Left" TabIndex="2"/>
                    <Button DockPanel.Dock="Right" TabIndex="4">Button</Button>
                    <!-- This will appear before the button...it has to go after it in the XAML so it will fill properly in the DockPanel -->
                    <TextBox DockPanel.Dock="Left" MinWidth="100" HorizontalAlignment="Stretch" TabIndex="3"/>
                </DockPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

Comme vous l'avez trouvé, si vous venez de définir les valeurs d'index de tabulation des contrôles, ceux-ci sont globales à la forme, de sorte que tous les TabIndex = « 0 » sont tabulés en premier, puis tous les TabIndex = « 1 », et ainsi sur. Set KeyboardNavigation.TabNavigation = "Local" sur les correctifs de conteneur parent il.

Answer 3

Avez-vous essayé de mettre explicitement l'ordre de tabulation?

<Control KeyboardNavigation.TabIndex="0" />