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 inserire la casella di testo per ultimo nella XAML perché DockPanel riempirà solo l'ultimo figlio. Sembra grandioso; tuttavia, l'ordine di tabulazione è ora rovinato. Ora visualizza combobox-combobox-button-textbox invece di combobox-combobox-textbox-button.

Ho provato utilizzando KeyboardNavigation.TabIndex proprietà su ogni articolo, ma poiché questo è un DataTemplate per ItemsControl (ciascuno di questi dockpanels sarà un elemento separato), che ha reso l'ordine di tabulazione saltare verticalmente ciascuna comboboxes le voci, quindi verticalmente in basso in ogni casella di testo, quindi verticalmente in basso in ogni pulsante, piuttosto che il comportamento desiderato di attraversare ogni riga, quindi verso il basso.

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 aggiungo proprietà TabOrder, diventa Combo11,Combo21,Combo12,Combo22,Text1,Text2,Button1,Button2.

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

Qualcuno ha qualche idea su come risolvere questo problema di interfaccia utente?

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

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

<Control KeyboardNavigation.TabIndex="0" /> 

Answer 3

Se si desidera conservare DockPanel, è possibile utilizzare KeyboardNavigation.TabNavigation = "Locale" sul dockpan principale e quindi è possibile impostare i valori dell'indice di tabulazione sui controlli al suo interno.

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 l'avete trovato, se è sufficiente impostare i valori di indice scheda dei controlli, questi sono globali per la forma, quindi tutto il TabIndex = "0" vengono a schede in un primo momento, quindi tutti i TabIndex = "1" e così via. Set KeyboardNavigation.TabNavigation = "Locale" sul contenitore padre lo corregge.