ترتيب علامة التبويب Dockpanel

Question

لدي dockpanel تم إعداد

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

أريد أن يملأ مربع النص كل المساحة المتبقية بين comboBoxes والزر. اضطررت إلى وضع مربع النص آخر في XAML لأن Dockpanel سوف يملأ الطفل الأخير فقط. تبدو جيدة؛ ومع ذلك ، فإن ترتيب علامة التبويب الآن مشدود. إنه الآن Tabs Combobox-Combobox-Button-Textbox بدلاً من Combobox-Combobox-Textbox-Butto-Button.

حاولت استخدام KeyboardNavigation.TabIndex خصائص على كل عنصر ، ولكن نظرًا لأن هذا عبارة عن datatemplate بالنسبة إلى heatscontrol (سيكون كل من هذه dockpanels لعنصر منفصل) ، مما جعل ترتيب علامة التبويب قفزة رأسياً في كل من العناصر comboBoxes ، ثم أسفل كل مربع نص. أسفل كل زر ، بدلاً من السلوك المطلوب للذهاب عبر كل صف ، ثم أسفل.

مثال واجهة المستخدم:

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

وإذا كنت تريدهم أن يتوافقوا بشكل جيد في الأعمدة المختلفة - فيمكنك استخدام مجموعة مشتركة.

Answer 2

إذا كنت ترغب في الاحتفاظ بـ 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>

كما وجدت ، إذا قمت فقط بتعيين قيم فهرس TAB لعناصر التحكم ، فهذه عالمية للنموذج ، لذلك يتم وضع كل tabindex = "0" في البداية ، ثم كل tabindex = "1" ، وهكذا. اضبط لوحة المفاتيح.

Answer 3

هل حاولت بشكل صريح تعيين ترتيب علامة التبويب؟

<Control KeyboardNavigation.TabIndex="0" />