DockPanel Tab键顺序

Question

我在ItemsControl的DataTemplate中设置了一个DockPanel，如下所示：

<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>

我希望文本框填满组合框和按钮之间的所有剩余空间。我必须将textbox放在XAML的最后，因为DockPanel只填充最后一个子元素。它看起来很棒；但是，Tab键顺序现在搞砸了。它现在的标签是combobox-combobox-button-textbox，而不是combobox-combobox-textbox-button。

我尝试在每个项目上使用KeyboardNavigation.TabIndex属性，但由于这是一个ItemsControl的DataTemplate (每个停靠面板将用于一个单独的项目)，这使得Tab键顺序垂直向下跳到每个项目的组合框，然后垂直向下每个文本框，然后垂直向下每个按钮，而不是所需的行为，即遍历每一行，然后向下。

示例UI：

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

在目前的情况下，它是Combo11,Combo12,Button1,Text1,Combo21,Combo22,Button2,Text2的。如果我添加TabOrder属性，它将变为Combo11,Combo21,Combo12,Combo22,Text1,Text2,Button1,Button2。

我想让它去Combo11,Combo12,Text1,Button1,Combo21,Combo22,Text2,Button2。

有谁对如何解决这个UI问题有什么想法？

Answer 1

您可以使用网格而不是DockPanel，如下所示：

<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>

如果您希望它们在不同的列中很好地对齐-您可以使用SharedSizeGroup。

Answer 2

如果想要保留DockPanel，可以在父级停靠面板上使用KeyboardNavigation.TabNavigation="Local“，然后可以在其中的控件上设置选项卡索引值。

就像这样-

    <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>

正如您所发现的，如果您只是设置控件的制表符索引值，这些值对于表单是全局的，因此所有的TabIndex="0“都会先用Tab键切换到，然后是所有的TabIndex="1"，依此类推。在父容器上设置KeyboardNavigation.TabNavigation=“本地”可以修复它。

Answer 3

您是否尝试过显式设置Tab键顺序？

<Control KeyboardNavigation.TabIndex="0" />