DockPanel Tab Order

Question

У меня есть 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 (каждая из этих док-панелей будет для отдельного элемента), это сделало прыжок в виде табуляции вертикально вниз по каждому из выпадающих списков элементов, затем вертикально вниз по каждому текстовому полю, затем вертикально вниз по каждой кнопке, а не по желанию, проходя через каждую строку, а затем вниз.

Пример пользовательского интерфейса:

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

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

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

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

<Control KeyboardNavigation.TabIndex="0" /> 

Answer 3

Если вы хотите сохранить 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 = «Локальный» в родительском контейнере исправляет его.