DockPanel选项卡顺序 [英] DockPanel Tab Order

问题描述

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

I have a DockPanel set up in the DataTemplate of an ItemsControl as below:

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

我希望文本框填充组合框和按钮之间的所有剩余空间.我不得不将文本框放在XAML的最后，因为DockPanel只会填充最后一个孩子.看起来不错;但是，选项卡顺序现在搞砸了.现在，它会选择combobox-combobox-button-textbox而不是combobox-combobox-textbox-button.

I want the textbox to fill all the remaining space between the comboboxes and the button. I had to put the textbox last in the XAML because DockPanel will only fill the last child. It looks great; however, the tab order is now screwed up. It now tabs combobox-combobox-button-textbox instead of combobox-combobox-textbox-button.

我尝试在每个项目上使用KeyboardNavigation.TabIndex属性，但是由于这是ItemsControl的DataTemplate(每个扩展面板将用于一个单独的项目)，因此制表符顺序在每个项目的组合框中垂直向下跳，然后垂直向下按每个文本框，然后垂直向下按每个按钮，而不是按期望的方式遍历每一行，然后向下按.

I tried using KeyboardNavigation.TabIndex properties on each item, but since this is a DataTemplate for an ItemsControl (each of these dockpanels will be for a separate item), that made the tab order jump vertically down each of the items' comboboxes, then vertically down each textbox, then vertically down each button, rather than the desired behavior of going across each row, then down.

示例用户界面:

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

In the current state of affairs, it goes Combo11,Combo12,Button1,Text1,Combo21,Combo22,Button2,Text2. If I add TabOrder properties, it goes Combo11,Combo21,Combo12,Combo22,Text1,Text2,Button1,Button2.

我想去Combo11,Combo12,Text1,Button1,Combo21,Combo22,Text2,Button2.

有人对如何解决此UI问题有任何想法吗?

Does anyone have any ideas on how to solve this UI problem?

推荐答案

您可以使用网格代替DockPanel，如下所示:

You could use a Grid instead of the DockPanel, like so:

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

And if you want them to align nicely in the different columns - you could use SharedSizeGroup.

这篇关于DockPanel选项卡顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！