Закладка вкладки DockPanel

У меня есть DockPanel, установленный в DataTemplate элемента ItemsControl, как показано ниже:

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

Я попытался использовать свойства KeyboardNavigation.TabIndex для каждого элемента, но так как это DataTemplate для элемента ItemsControl (каждая из этих док-панелей будет для отдельного элемента), это сделало прыжок в виде табуляции вертикально вниз по каждому из выпадающих списков элементов, затем вертикально вниз по каждому текстовому полю, а затем вертикально вниз по каждой кнопке, а не по желанию, перемещаясь по каждой строке, а затем вниз.

Пример 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.

Есть ли у кого-нибудь идеи по решению этой проблемы пользовательского интерфейса?

Ответ 1

Вы можете использовать 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.

Ответ 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" вставляются в первую очередь, затем все TabIndex = "1", и поэтому на. Set KeyboardNavigation.TabNavigation = "Локальный" в родительском контейнере исправляет его.

Ответ 3

Вы пытались явно настроить порядок вкладок?

<Control KeyboardNavigation.TabIndex="0" />