如何为一组单选按钮启用箭头键键盘导航和禁用选项卡导航？

Question

I was trying to implement a dialog box with layout as something like this


I wanted keyboard behavior as

1. Control at radio button 'a' OR 'b' OR 'c' -> Tab press -> Cancel button -> Tab press -> Save button -> Tab press -> Last selected radio button among 'a' OR 'b' or 'c' (even first radio button 'a' will do).
2. Arrow key navigation between 'a', 'b' and 'c' radio buttons.

A very easy way is to use <RadioButtons> to group individual <Radiobutton> but that is not affordable with the overall project as using the dependency library winui 2+ is messing up with other parts of the code and affecting functionality of some feature.

After researching on inte.net and reading through this documentation, I tried <ListView> which was causing two issues

1. Pressing spacebar button no longer selects any option.
2. Narrator always says "Selected" for each radio button even if the radio button is not selected.

Upon further search, I landed upon this .

Code:

<ContentDialog>
   <StackPanel>
        <StackPanel XYFocusKeyboardNavigation="Enabled" TabFocusNavigation="Once">
            <RadioButton Content="a" XYFocusKeyboardNavigation="Enabled" />
            <RadioButton Content="b" XYFocusKeyboardNavigation="Enabled" />
            <RadioButton Content="c" XYFocusKeyboardNavigation="Enabled" />
        </StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button x:Uid="Cancel" Name="CancelButton" Click="Cancel" Margin="5" IsEnabled="False"/>
            <Button x:Uid="Save" Name="SaveButton" Click="Save" Margin="5" IsEnabled="False"/>
        </StackPanel>
   </StackPanel>
</ContentDialog>

Upon implementation, most of the issues with narrator and navigation were gone, except for 1 issue:
The control never lands on 'b' radio button.
Being on 'a' radio button, pressing down arrow key doesn't works. Pressing up arrow key moves the control to 'c'.
Being on 'c' radio button, pressing up arrow key doesn't works. Pressing down arrow key moves the control to 'a'.

I even tried XYFocusDownNavigationStrategy="Projection" on 'c' radio button and XYFocusUpNavigationStrategy="Projection" on 'a' radio button, but it didn't work.

How to fix this issue?

Answer 1

The RadioButtons control from the WinUI 2 Library does exactly what you want. When you press tab, you leave the radio buttons group and jump to the next element, for example the cancel button. When one RadioButton is focused, pressing arrow down/arrow up moves selection to the next RadioButton.

With the control, your code would look like this:

<RadioButtons x:Name="BackgroundRadioButtons" Header="Options" 
    SelectionChanged="Options_SelectionChanged">
    <x:String>A</x:String>
    <x:String>B</x:String>
    <x:String>C</x:String>
</RadioButtons>

and in C#, you can handle the event:

private void Options_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // Handle event
}

For an interactive example of the control, you can also download the WinUI 2 Gallery .

Answer 2

I'd suggest that you could try the RadioButtons control in the WinUi 2.8 for UWP. It could meet all your requirement.

Here is the link about how to get started with WinUI2 in UWP: Getting started with the Windows UI 2 Library .

It's simple to use like the following:

 <StackPanel>
        <StackPanel >
            <muxc:RadioButtons  XYFocusKeyboardNavigation="Enabled"
                                SelectedIndex="0" SelectionChanged="RadioButtons_SelectionChanged" >
                <x:String>a</x:String>
                <x:String>b</x:String>
                <x:String>c</x:String>
            </muxc:RadioButtons>
          
        </StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
            <Button x:Uid="Cancel" Name="CancelButton" Click="Cancel" Margin="5" IsEnabled="True"/>
            <Button x:Uid="Save" Name="SaveButton" Click="Save" Margin="5" IsEnabled="True"/>
        </StackPanel>
    </StackPanel>

When you run the code, the first item- a is selected by default. When you press Tab-> a gets focused -> press Tab -> Cancel button gets focused -> press Tab -> Save button gets focused -> press Tab -> a gets focused again.

And when a gets focused again, you could use arrow key to navigate to b or c . It will never navigate to the buttons.