dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.21k stars 1.74k forks source link

There's no provision for Alt Key Menu Bar Item activation. Keyboard Accelerators are defined at the MenuFlyoutItem level. #18782

Open egvijayanand opened 11 months ago

egvijayanand commented 11 months ago

Description

Usually, a shortcut key would be assigned for each top-level menu item (like F -> File meu, E -> Edit menu), and upon pressing the Alt key, the corresponding menu item gets activated (it gets displayed).

When the Alt key alone is pressed, the corresponding shortcut key gets highlighted in the menu bar.

In classic Windows desktop app models like WinForms, while providing the menu item text, the Ampersand char needs to be prefixed with the preferred shortcut key like &File and &Edit.

This enables us to work with the menu items using the Keyboard.

Public API Changes

A similar approach can be followed like how it's done in the classic scenario.

MenuBarItem has a Text property, the Ampersand char can be prefixed to the intended shortcut key.

Internally, while processing, the shortcut key needs to be activated by parsing the Text property.

This can be extended to MenuFlyoutItem as well so that menu items can also be activated with Keyboard.

File -> Exit as Alt + F + X for the below snippet

Since it's XAML (XML-based), the Ampersand key is encoded as &

<MenuBarItem Text="&amp;File">
  <MenuFlyoutItem Text="E&amp;xit" />
</MenuBarItem>

Intended Use-Case

This enables us to work with the menu items using the Keyboard.

The missing piece of the Keyboard Accelerators and makes it feature complete.

egvijayanand commented 11 months ago

Setting the AccessKey property enables this Alt key menu activation in the WinUI desktop app.

Assuming the below XML namespace is imported for this menu code snippet.

xmlns:ui="using:Microsoft.UI.Xaml.Controls"

<ui:MenuBar>
  <ui:MenuBarItem
    Title="File"
    AccessKey="F">
    <ui:MenuFlyoutItem
      AccessKey="N"
      Text="New" />
    <ui:MenuFlyoutItem
      AccessKey="X"
      Text="Exit" />
  </ui:MenuBarItem>
</ui:MenuBar>
egvijayanand commented 11 months ago

Have tried a sample with the AccessKey property and it worked fine for the WinUI app. Will upload the sample to my GitHub repo and share the URL.

Here's the screenshot.

image
egvijayanand commented 11 months ago

Sample app now made available here: https://github.com/egvijayanand/maui-issue-18782

egvijayanand commented 11 months ago

Have tried to make use of this Alt key mnemonic feature with a variety of controls (Button. CheckBox, Entry), it works like a charm and it'll prove to be a great value addition to the Desktop apps.

On the Windows platform, the AccessKey property is defined at the UIElement level, so it can be applied to any Visual control. The property needs to be defined at the appropriate base control in .NET MAUI so those dummy interfaces and classes can be removed from the sample.

Have pushed the newer version of the source to the same repo.

Here's the updated screenshot:

image

@jsuarezruiz @davidortinau @maddymontaquila