将键盘交互焦点设置为 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 个选项：

1. 左
2. 对
3. 底部

当用户通过键盘Enter 打开MenuFlyout 时，默认聚焦第一项 -> Left。我希望第二项 -> Right 得到关注。

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

Answer 1

您可以直接使用Control.Focus(FocusState) Method 使MenuFlyoutItem 进入焦点状态。我建议您在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;
        }
       
    }