uwp - 将键盘交互焦点设置为 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. 底部

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

我怎样才能做到这一点。我已阅读此键盘交互官方文档，但没有找到任何想法。

Answer 1

您可以直接使用Control.Focus(FocusState) 方法使MenuFlyoutItem转到焦点状态。我建议您在Flyout.Opened 事件中执行此操作。

根据您的代码，我做了一个简单的演示，您可以检查一下。

xml:

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