Dockpanel Tab Заказ

Question

У меня есть DockPanel, созданная в DataTemplate элементовControl, как показано ниже:

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

Я хочу, чтобы текстовое поле заполнить все оставшееся пространство между Comboboxes и кнопкой. Я должен был поставить текстовое поле в XAML, потому что DockPanel будет заполнять только последний ребенок. Это выглядит здорово; Однако заказ вкладок теперь прикручен. Он теперь вкладки Combobox-Combobox-Button-TextBox вместо Combobox-Combobox-TextBox-кнопки.

Я пытался использовать KeyboardNavigation.TabIndex Свойства на каждом элементе, но поскольку это таблица DataTemplate для itemsControl (каждая из этих докпанселей будет для отдельного элемента), что сделало вкладку «Заказать» вертикально вниз по каждому из элементов Comboboxes, затем вертикально вниз по каждому текстовому поле, затем вертикально вниз каждая кнопка, а не желаемое поведение перехода через каждую строку, затем вниз.

Пример 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, вы можете использовать клавиатуруNavigation.tabnavigation = "local" на родительском доке DockPanel, а затем вы можете установить значения индекса вкладки на элементах управления.

Так -

    <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», и так далее. Установите клавиатуруNavigation.tabnavigation = "local" на родительский контейнер исправляет его.

Answer 3

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

<Control KeyboardNavigation.TabIndex="0" />