DockPanel Tab-Reihenfolge

Question

Ich habe ein DockPanel in der Datatemplate eines Items aufgebaut wie folgt:

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

ich die Textbox wollen alle den verbleibenden Platz zwischen den Comboboxen und die Schaltfläche füllen. Ich musste das Textfeld zuletzt im XAML platzieren, da DockPanel nur das letzte Kind füllt. Das sieht großartig aus; Allerdings ist die Tab-Reihenfolge jetzt vermasselt. Es gibt jetzt tabs combobox-combobox-button-textbox statt combobox-combobox-textbox-button.

Ich habe versucht, KeyboardNavigation.TabIndex Eigenschaften für jeden Artikel zu verwenden, aber da dies eine DataTemplate für ein ItemsControl ist (jeder dieser Dockpanels wird für einen separaten Artikel sein), die Tabulatorreihenfolge vertikal nach unten jeder Combobox der Artikel springen, dann vertikal nach unten in jedem Textfeld, dann vertikal nach unten auf jeden Knopf, anstatt das gewünschte Verhalten über jede Reihe zu gehen, dann nach unten.

Beispiel UI:

[Combo11] [Combo12] [Text1] [Button1] 
[Combo21] [Combo22] [Text2] [Button2] 

Im aktuellen Stand der Dinge, es geht Combo11,Combo12,Button1,Text1,Combo21,Combo22,Button2,Text2. Wenn ich TabOrder Eigenschaften hinzufüge, geht es Combo11,Combo21,Combo12,Combo22,Text1,Text2,Button1,Button2.

Ich möchte es gehen Combo11,Combo12,Text1,Button1,Combo21,Combo22,Text2,Button2.

Hat jemand irgendwelche Ideen, wie man dieses UI-Problem lösen kann?

Answer 1

könnten Sie ein Gitter anstelle des DockPanel, etwa 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> 

Und wenn Sie wollen, dass sie in den verschiedenen Spalten schön ausrichten - Sie SharedSizeGroup nutzen könnten.

Answer 2

Haben Sie versucht, die Tab-Reihenfolge explizit festzulegen?

<Control KeyboardNavigation.TabIndex="0" /> 

Answer 3

Wenn Sie das DockPanel beibehalten möchten, können Sie KeyboardNavigation.TabNavigation = "Local" auf dem übergeordneten Dockpanel verwenden, und dann können Sie die Registerindexwerte für die Steuerelemente darin festlegen.

Like this -

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

Wie Sie, wenn Sie die Registerkarte Indexwerte der Kontrollen nur eingestellt, sind diese auf die Form global, so dass alle die TabIndex = "0" in erster Tabbed, dann alle TabIndex = "1", und so weiter. Set KeyboardNavigation.TabNavigation = "Local" auf dem übergeordneten Container behebt es.