如何為一組單選按鈕啟用箭頭鍵鍵盤導航和禁用選項卡導航？

Question

我試圖用這樣的布局實現一個對話框


我想要鍵盤行為

1. 控制單選按鈕 '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'（即使是第一個單選按鈕'a'也可以）。
2. “a”、“b”和“c”單選按鈕之間的箭頭鍵導航。

一種非常簡單的方法是使用<RadioButtons>對單個<Radiobutton>進行分組，但這對於整個項目來說是負擔不起的，因為使用依賴庫 winui 2+ 會擾亂代碼的其他部分並影響某些功能的功能。

在研究了 inte.net 並通讀了這個文檔之后，我嘗試了<ListView> ，這導致了兩個問題

1. 按空格鍵按鈕不再選擇任何選項。
2. 講述人始終為每個單選按鈕說“已選擇”，即使未選擇單選按鈕也是如此。

經過進一步搜索，我找到了這個.

代碼：

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

實施后，講述人和導航的大部分問題都消失了，除了 1 個問題：
控件永遠不會落在“b”單選按鈕上。
在“a”單選按鈕上，按下箭頭鍵不起作用。 按向上箭頭鍵將控件移動到“c”。
在“c”單選按鈕上，按向上箭頭鍵不起作用。 按下箭頭鍵將控件移動到“a”。

我什至在“c”單選按鈕上嘗試XYFocusDownNavigationStrategy="Projection" ，在“a”單選按鈕上嘗試了 XYFocusUpNavigationStrategy="Projection XYFocusUpNavigationStrategy="Projection" ，但它沒有用。

如何解決這個問題？

Answer 1

WinUI 2 庫中的RadioButtons 控件完全可以滿足您的需求。 當您按下 Tab 鍵時，您將離開單選按鈕組並跳轉到下一個元素，例如取消按鈕。 當一個 RadioButton 獲得焦點時，按向下箭頭/向上箭頭會將選擇移動到下一個 RadioButton。

使用控件，您的代碼將如下所示：

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

而在C#，你可以處理事件：

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

對於控件的交互式示例，您還可以下載WinUI 2 Gallery 。

Answer 2

我建議您可以試試 WinUi 2.8 中的RadioButtons控件 for UWP。它可以滿足您的所有要求。

以下是 UWP 中有關如何開始使用 WinUI2 的鏈接： Windows UI 2 庫入門。

使用起來很簡單，如下所示：

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

運行代碼時，默認選擇第一項 - a 。 當您按 Tab-> a獲得焦點時 -> 按 Tab -> 取消按鈕獲得焦點 -> 按 Tab -> 保存按鈕獲得焦點 -> 按 Tab -> a再次獲得焦點。

當a再次聚焦時，您可以使用箭頭鍵導航到b或c 。 它永遠不會導航到按鈕。