CODEWITHSUNDEEP
c#uwp
PremKumar Shanmugam
PremKumar Shanmugam

Reputation: 441

MenuFlyout always focus second item of it When down Key is Pressed in UWP?

I have the following code:

Button b=new Button();
Button.Content="Button";
Button.Click+=Click;
MenuFlyout MenuFlyout = new MenuFlyout();
MenuFlyoutItem MenuFlyoutItem1 = new MenuFlyoutItem();
MenuFlyoutItem MenuFlyoutItem2 = new MenuFlyoutItem();
MenuFlyoutItem MenuFlyoutItem3 = new MenuFlyoutItem();
MenuFlyoutItem1.Text="Prem";
MenuFlyoutItem2.Text="Kumar";
MenuFlyoutItem3.Text="Deepak";
MenuFlyout.Items.Add(MenuFlyoutItem1);
MenuFlyout.Items.Add(MenuFlyoutItem2);
MenuFlyout.Items.Add(MenuFlyoutItem3);


private void Click(object sender, RoutedEventArgs e)
{
      Button.ContextFlyout = menuFlyout;
      menuFlyout.ShowAt(Button, new Point(-20, 20));   
}

MenuFlyout opens perfectly, but when MenuFlyout is opened, if I press Down Key it always focuses the second MenuFlyoutItem. I Don't know why it does not focus the first MenuFlyoutItem. I Want it to focus first MenuFlyoutItem when down key is pressed and so on.

Upvotes: 0

Views: 188

Answers (1)

Martin Zikmund
Martin Zikmund

Reputation: 39072

In fact, when you click, the first menu item is focused, although it is not visible visually. You can confirm that by clicking the button and then pressing the Enter key. The fact the item is not visually highlighted is you clicked with a mouse, so the control assumes you will continue your interaction with a mouse, which has hover effects instead.

Starting click by mouse

If you, instead, click the button by pressing Enter in the first place, it will now actually show you the highlight rectangle around the first menu item to indicate it is focused, as you have started the interaction with the keyboard.

Keyboard click

This behavior is consistent with the rest of the system, so it is best to keep it as users may depend on it.

As an additional tip, you don't have to attach the flyout during the click event, but you can just set Button.Flyout beforehand and just remove the Click handler:

b.Flyout = MenuFlyout;

ContextFlyout is in general used for right-click event. To ensure the flyout opens below the control, you can set its Placement property:

MenuFlyout.Placement = FlyoutPlacementMode.Bottom;

Upvotes: 2

Related Questions