Need to modfy the default tab order of child elements

Question

I have custom control like below. When press tab key focus will move in the order elements arrangement.

Query:

When stackpanel receive tab focus I need to change default tab order toggle button present in stackpanel

Default Tab Order:

DockPanel--Border---StackPanel-->Button1-->button2-->button3

Expected Order

DockPanel--Border---StackPanel-->Button3-->button2-->button1

I need update TabOrder based on its parent. Please suggestion solution modify the tab order based on parent

Note: I need UI as like below arrangements, only i need to modify the tab order for buttons

<DockPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <Border x:Name="MainBorder">
                <StackPanel>
                    <ToggleButton>Button 1</ToggleButton>
                    <ToggleButton>Button 3</ToggleButton>
                    <ToggleButton>Button 3</ToggleButton>
                </StackPanel>
            </Border>
        </DockPanel>

`StackPanel` should support editing the `Children` collection, you should be able to modify the order of the children UI elements by removing all the children and then reinserting the children in the required order, just like you would do in a list when reordering the elements — zafar, May 11 '20 at 10:05
with custom panel you can do like ,Overridig ArrangeOverride and modify the order.. in stackpanel, get children, remove them from visualtree and add it in needed index — WPFUser, May 11 '20 at 10:07
I mean i donot know the existing tab index for child element, because the tab index is assigned based on arrangement, but when stackpanel recevies focus, i need to update tab order as like 3,2,1, for buttons inside stack panel — Magesh Maggi, May 11 '20 at 10:08
@zafar I want UI to be in the Existing order only, but I need to update Tab focus order only based on my requirement. — Magesh Maggi, May 11 '20 at 10:09
You have to set the `Control.TabIndex` property on each panel child to define a custom order. — BionicCode, May 11 '20 at 10:14
@MageshMaggi modify the tab order as mentioned by BionicCode — zafar, May 11 '20 at 10:37
@BionicCode If i Set TabIndex = 1 for Button 1 then, tab focus will directly move to button 1 instead move to parent(StackPanel) — Magesh Maggi, May 11 '20 at 10:48
You can't navigate to any `Panel` or `Border` using tab. Tab navigation only works for `Control`. — BionicCode, May 11 '20 at 12:36

Rekshino · Accepted Answer · 2020-05-11T11:36:28.860

As mentioned in comments do set the TabIndex property. To step within control do use KeyboardNavigation.TabNavigation attached property.

<DockPanel VerticalAlignment="Center" HorizontalAlignment="Center">
    <Border x:Name="MainBorder">
        <StackPanel KeyboardNavigation.TabNavigation="Local">
            <ToggleButton KeyboardNavigation.TabIndex="3">Button 1</ToggleButton>
            <ToggleButton KeyboardNavigation.TabIndex="2">Button 2</ToggleButton>
            <ToggleButton KeyboardNavigation.TabIndex="1">Button 3</ToggleButton>
        </StackPanel>
    </Border>
</DockPanel>

If you want to modify the tab order at run time I would advice you to create a behavior for it. See Use of Behavior in WPF MVVM? To access attached property from code see Get and set WPF custom attached property from code behind

Need to modfy the default tab order of child elements

1 Answers1