ドックパネルタブオーダー
-
30-09-2019 - |
質問
以下のように、項目コントロールのデータセットにドックパネルをセットアップしています。
<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に最後に配置する必要がありました。見栄えがよくあります。ただし、タブの順序がねじ込まれました。 Combobox-ComboBox-Textbox-Buttonの代わりに、ComboBox-ComboBox-Button-Textboxをタブにします。
使ってみました KeyboardNavigation.TabIndex
各アイテムのプロパティですが、これはアイテムコントロール(これらの各ドックパネルは個別のアイテム用になります)のデータセテンプであるため、各アイテムのコンボボックスを垂直方向にジャンプし、各テキストボックスを垂直に垂直に垂直にジャンプしました。各行を横切るという望ましい動作ではなく、各ボタンを下ってから下ります。
例UI:
[Combo11] [Combo12] [Text1] [Button1]
[Combo21] [Combo22] [Text2] [Button2]
現在の状況では、それは行きます Combo11,Combo12,Button1,Text1,Combo21,Combo22,Button2,Text2
. 。タブオーダープロパティを追加すると、それは行きます Combo11,Combo21,Combo12,Combo22,Text1,Text2,Button1,Button2
.
行きたいです Combo11,Combo12,Text1,Button1,Combo21,Combo22,Text2,Button2
.
このUIの問題を解決する方法について誰かが何かアイデアを持っていますか?
解決
ドックパネルの代わりにグリッドを使用できます。
<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を使用できます。
他のヒント
ドックパネルを保持する場合は、keyboardnavigation.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"などになります。 keyboardnavigation.tabnavigation = "local"を親コンテナに設定します。
TAB注文を明示的に設定してみましたか?
<Control KeyboardNavigation.TabIndex="0" />