DockPanel Ordine di tabulazione

Question

Ho un DockPanel allestito nella DataTemplate di un ItemsControl come di seguito:

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

Voglio la casella di testo per riempire tutto lo spazio rimanente tra le caselle combinate e il pulsante. Ho dovuto mettere la casella di testo ultima in XAML, perché DockPanel sarà solo riempire l'ultimo figlio. Sembra grandioso; tuttavia, l'ordine di tabulazione viene ora avvitato. Ora le schede combobox-combobox-button-box invece di combobox--testo-tasto combobox.

Ho provato ad utilizzare le proprietà KeyboardNavigation.TabIndex su ogni articolo, ma poiché questo è un DataTemplate per ItemsControl (ciascuno di questi dockpanels sarà un elemento separato), che ha fatto il salto ordine di tabulazione verticalmente ciascuna comboboxes le voci, allora verticalmente ciascuna casella di testo, quindi verticalmente ciascun pulsante, piuttosto che il comportamento desiderato che attraversa ogni riga, poi giù.

Esempio UI:

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

Allo stato attuale delle cose, va Combo11,Combo12,Button1,Text1,Combo21,Combo22,Button2,Text2. Se posso aggiungere proprietà TabOrder, va Combo11,Combo21,Combo12,Combo22,Text1,Text2,Button1,Button2.

Mi piacerebbe per andare Combo11,Combo12,Text1,Button1,Combo21,Combo22,Text2,Button2.

Qualcuno ha qualche idea su come risolvere questo problema UI?

Answer 1

Si potrebbe utilizzare una griglia al posto del DockPanel, in questo modo:

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

E se si vuole loro di allineare bene nelle diverse colonne -. Si potrebbe usare SharedSizeGroup

Answer 2

Se si desidera mantenere la DockPanel, è possibile utilizzare KeyboardNavigation.TabNavigation = "locale" alla DockPanel genitore, e quindi è possibile impostare i valori di indice scheda sui controlli all'interno di esso.

Ti piace questa -

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

Come hai trovato, se è sufficiente impostare i valori di indice scheda dei controlli, questi sono globali per la forma, quindi tutto il TabIndex = "0" sono a schede in un primo momento, poi tutto il TabIndex = "1", e così su. Set KeyboardNavigation.TabNavigation = "locale" a correzioni contenitore genitore.

Answer 3

Hai provato a impostare in modo esplicito l'ordine di tabulazione?

<Control KeyboardNavigation.TabIndex="0" />