how to focus through MenuFlyoutItem's Content while keyboard arrow(Down) navigation in UWP?

44 Views Asked by At

Is there any way to focus through Content inside MenuFlyoutItem. I have MenuFlyout which has MenuFlyoutItem and inside the menuFlyoutItem ,i'm having a Listview containing three items(Hai,Hi,Bye). After opening MenuFlyout , when i click down Arrow , the focus goes to first item inside MenuFlyout. After that when i click downArrow , the focus didn't goes to listview inside MenuFlyoutItem.

What I'm trying to achieve is , whenever MenuflyoutItem has content(ListView or any Control type),i want keyboard focus navigation inside the listview items also. how to Achieve?

My sample Project Link (KeyboardFocusNavigationSample)

1

There are 1 best solutions below

2
Junjie Zhu - MSFT On

According to your code, I added the ListView_Loaded event and used the Control.Focus(FocusState) Method to set focus state after the control is loaded.

The effect is that after opening the MenuFlyout, the focus is on the first row of the listview.

    private void RelativePanel_PointerPressed(object sender, PointerRoutedEventArgs e)
    {

        MenuFlyout menuflyout = new MenuFlyout { };

        //menuflyout.Items.Add(new MenuFlyoutItem { Text = "Prem", TabIndex = 0 });
        //MenuFlyoutItem item2 = new MenuFlyoutItem { Text = "Kumar" };
        //menuflyout.Items.Add(item2); ;


        RelativePanel panel = new RelativePanel();
        ListView listView = new ListView { };
        listView.ItemsSource = new List<string> { "Hai", "Hi", "Bye" };

        //add by junjie
        listView.Loaded += ListView_Loaded;
       
        panel.Children.Add(listView);

        MenuFlyoutItem menuFlyoutItem = new MenuFlyoutItem { Style = (Style)this.Resources["xx"], DataContext = new CustomMenuFlyoutItemModel(panel) };
        menuflyout.Items.Add(menuFlyoutItem);


        menuflyout.ShowAt(sender as RelativePanel);
        
    }


    private void ListView_Loaded(object sender, RoutedEventArgs e)
    {
        ListView listView =  sender as ListView;
        listView.SelectedIndex = 0;
        listView.Focus(FocusState.Programmatic);
    }