DockPanel 选项卡顺序答案

【问题标题】：DockPanel Tab OrderDockPanel 选项卡顺序
【发布时间】：2011-04-02 18:09:26
【问题描述】：

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

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

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

用户界面示例：

[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 问题有任何想法吗？

【问题讨论】：

标签： wpf user-interface tabindex ui-design dockpanel

【解决方案1】：

如果要保留 DockPanel，可以在父 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" 设置为选项卡，然后将所有 TabIndex="1" 设置为选项卡，依此类推在。在父容器上设置 KeyboardNavigation.TabNavigation="Local" 修复它。

【讨论】：

我喜欢这个选项，因为在某些情况下我对 DockPanel 布局感觉非常强烈，并且竭尽全力避免在任何地方使用网格，除非出于其他原因它们有意义。

【解决方案2】：

您可以使用 Grid 而不是 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。

【讨论】：

效果很好...我不得不问，为什么第一个组合框没有列号？这是否意味着它会自动分配给第 0 列？并且非常感谢 SharedSizeGroup 提示——我什至不知道要搜索什么！（附：你忘了 / 在）
它可能有一个 Grid.Column="0" - 但 0 是默认值 - 我很懒 :-)。是的，SharedSizeGroup 是一个隐藏的宝石。我为其他人更新了我的示例。
呸，无法让 SharedSizeGroup 正常工作——可能是因为第三列中的星号大小。 :(
啊，看来我需要一个标题，按照这里的指示blogs.interknowlogy.com/johnbowen/archive/2007/08/27/21132.aspx -EDIT- 或者可能不是......但那个网站仍然有帮助。它现在似乎可以工作了，非常感谢！
最后一次更新，我保证！事实证明，这一切都取决于 Grid.IsSharedSizeScope 属性，我没有意识到它必须在 parent 上——在本例中是 ItemsControl。

【解决方案3】：

您是否尝试过明确设置 Tab 键顺序？

<Control KeyboardNavigation.TabIndex="0" />

【讨论】：

"我尝试在每个项目上使用 KeyboardNavigation.TabIndex 属性，但由于这是 ItemsControl 的 DataTemplate（这些停靠面板中的每一个都将用于单独的项目），这使得选项卡顺序垂直向下跳转每个项目的组合框，然后垂直向下每个文本框，然后垂直向下每个按钮，而不是遍历每一行，然后向下的期望行为。"
没有害处，但我倾向于否决那些无助于解释任何事情的答案......在这个例子中，我已经提到在我的问题中尝试使用标签顺序。再说一次，我知道既然你听不到我说话，你可能会误解为一个尖刻的评论，但我真的只是想让 StackOverflow 成为一个有用且整洁的地方。