将键盘交互焦点设置为 MenuFlyoutItem

Question

在 UWP 应用程序中，我使用 MenuFlyoutItem 显示下拉列表。这是xaml代码

    <DropDownButton Style="{StaticResource DropDownButtonStyle1}" Name="MyDropDownButton" 
                Content="{Binding SelectedLanguage}" 
                RelativePanel.AlignRightWithPanel="True" 
                Margin="0,20,20,0" 
                FontSize="14">
        <DropDownButton.Flyout>
            <MenuFlyout x:Name="OptionMenu"
                        Placement="BottomEdgeAlignedRight">
            </MenuFlyout>
        </DropDownButton.Flyout>
    </DropDownButton>

我以编程方式将 MenuFlyoutItem 添加到 MenuFlyout

foreach (Option option in _viewModel.Options)
{
    MenuFlyoutItem item = new MenuFlyoutItem();
    item.Text = option.text;
    LanguagesMenu.Items.Add(item);
}

问题： 当用户使用带有键盘交互的应用程序时，第一个 MenuFlyoutItem 被聚焦。我想要不同的项目获得焦点（可能是用户之前选择的项目应该获得焦点）。

示例：

我有 3 个选项：

左
右
底部

当用户通过键盘 Enter 打开 MenuFlyout 时，它默认聚焦第一个项目 -> Left。我希望第 2 项 -> Right 成为焦点。

我怎样才能做到这一点。我已阅读 this Keyboard Interaction 官方文档，但没有找到任何想法。

Answer 1

您可以直接使用 Control.Focus(FocusState) Method to make the MenuFlyoutItem go to the focus state. I suggest you do this in the Flyout.Opened Event。

根据你的代码，我做了一个简单的demo，你可以看看

Xaml:

  <DropDownButton.Flyout>
            <MenuFlyout x:Name="OptionMenu"  Placement="BottomEdgeAlignedRight" Opened="OptionMenu_Opened">
            </MenuFlyout>
        </DropDownButton.Flyout>

后面的代码：

private void OptionMenu_Opened(object sender, object e)
    {
        // let's say we need to set the seconed item as focused
        var list = OptionMenu.Items;
        MenuFlyoutItem item2 = list[1] as MenuFlyoutItem;

        item2.Focus(FocusState.Keyboard);
    }

更新：

仅在按下 Enter 键时使项目成为焦点。

public Boolean IsKeyPressed = false;

  private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        // same code 
        MenuFlyoutItem item = new MenuFlyoutItem();
        item.Text = "Left";

        MenuFlyoutItem item2 = new MenuFlyoutItem();
        item2.Text = "Right";

        MenuFlyoutItem item3 = new MenuFlyoutItem();
        item3.Text = "Bottom";

        OptionMenu.Items.Add(item);
        OptionMenu.Items.Add(item2);
        OptionMenu.Items.Add(item3);
        // handle the button keydown event.
        MyDropDownButton.PreviewKeyDown += MyDropDownButton_PreviewKeyDown;
    }

    private void MyDropDownButton_PreviewKeyDown(object sender, KeyRoutedEventArgs e)
    {
        //check if it is the Enter key
        if (e.Key == VirtualKey.Enter)
        {
            IsKeyPressed = true;
            Debug.WriteLine("Enter");
        }
        else 
        {
            return;
        }
    }

    private void OptionMenu_Opened(object sender, object e)
    {
        Debug.WriteLine("Open");

        if (IsKeyPressed) 
        {
            // let's say we need to set the seconed item as focused
            var list = OptionMenu.Items;
            MenuFlyoutItem item2 = list[1] as MenuFlyoutItem;

            item2.Focus(FocusState.Keyboard);
            //reset the flag  
            // You could do this in other places if you want.
            IsKeyPressed = false;
        }
       
    }

将键盘交互焦点设置为 MenuFlyoutItem

Set keyboard interaction focus to a MenuFlyoutItem

accessibility

tabstop

uwp

keyboard-focus