UWP中如何通过键盘下箭头导航聚焦MenuFlyoutItem的Content？

核心思路 #

默认情况下，MenuFlyoutItem的焦点不会自动流转到内部嵌套的可交互控件（如ListView），需要通过手动拦截键盘事件、主动转移焦点，同时处理导航边界的焦点回退逻辑，实现连贯的键盘导航体验。

具体实现步骤 #

步骤1：调整XAML结构与控件属性 #

给包含ListView的MenuFlyoutItem绑定键盘事件，同时设置内部ListView的IsTabStop为False避免Tab键干扰，并给控件命名方便后台代码访问：

<MenuFlyout>
    <MenuFlyoutItem x:Name="NestedListViewItem" 
                    KeyDown="NestedListViewItem_KeyDown"
                    GotFocus="NestedListViewItem_GotFocus">
        <ListView x:Name="InnerListView" 
                  IsTabStop="False" 
                  SelectionMode="Single"
                  KeyDown="InnerListView_KeyDown">
            <x:String>Hai</x:String>
            <x:String>Hi</x:String>
            <x:String>Bye</x:String>
        </ListView>
    </MenuFlyoutItem>
    <!-- 其他MenuFlyoutItem -->
</MenuFlyout>

步骤2：处理MenuFlyoutItem的键盘导航触发 #

在后台代码中，拦截向下/向上箭头键，主动将焦点转移到内部ListView的对应项：

private void NestedListViewItem_KeyDown(object sender, KeyRoutedEventArgs e)
{
    var menuItem = sender as MenuFlyoutItem;
    if (menuItem == null || InnerListView == null) return;

    switch (e.Key)
    {
        case VirtualKey.Down:
            if (InnerListView.Items.Count > 0)
            {
                var firstItem = InnerListView.ContainerFromIndex(0) as ListViewItem;
                firstItem?.Focus(FocusState.Keyboard);
                e.Handled = true; // 阻止MenuFlyout默认导航逻辑
            }
            break;
        case VirtualKey.Up:
            if (InnerListView.Items.Count > 0)
            {
                var lastItem = InnerListView.ContainerFromIndex(InnerListView.Items.Count - 1) as ListViewItem;
                lastItem?.Focus(FocusState.Keyboard);
                e.Handled = true;
            }
            break;
    }
}

步骤3：处理ListView内部导航的边界回退 #

当在ListView中导航到首尾项时，需要将焦点回退到MenuFlyoutItem，或允许MenuFlyout继续全局导航：

private void InnerListView_KeyDown(object sender, KeyRoutedEventArgs e)
{
    var listView = sender as ListView;
    if (listView == null) return;

    switch (e.Key)
    {
        case VirtualKey.Up:
            if (listView.SelectedIndex == 0)
            {
                NestedListViewItem.Focus(FocusState.Keyboard);
                e.Handled = true;
            }
            break;
        case VirtualKey.Down:
            if (listView.SelectedIndex == listView.Items.Count - 1)
            {
                e.Handled = false; // 交给MenuFlyout处理下一个项的导航
            }
            break;
    }
}

步骤4：可选优化：焦点进入时自动选中ListView首项 #

给MenuFlyoutItem绑定GotFocus事件，在获得焦点时自动选中ListView第一项，提升导航连贯性：

private void NestedListViewItem_GotFocus(object sender, RoutedEventArgs e)
{
    if (InnerListView.Items.Count > 0)
    {
        InnerListView.SelectedIndex = 0;
    }
}

内容的提问来源于stack exchange，提问作者PremKumar Shanmugam