How to Add Menu Shortcuts in .NET MAUI (Global & Page-Level)

Global shortcuts
Add the following code in the CreateMauiApp method

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


Microsoft.Maui.Handlers.PageHandler.Mapper.AppendToMapping(nameof(PageHandler), (handler, view) =>
            {
#if WINDOWS
                handler.PlatformView.PreviewKeyUp += (sender, e) =>
                {

                };
                handler.PlatformView.PreviewKeyDown += (sender, e) =>
                {

                };
                handler.PlatformView.KeyUp += (sender, e) =>
                {

                };
                handler.PlatformView.KeyDown += (sender, e) =>
                {

                };
#endif
            });

If you need to use keys like Space related to Tab key switching, set the Focus and TabStop properties of the control to false.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


ButtonHandler.Mapper.AppendToMapping("Project.Buttons.NoSystemFocus", (IButtonHandler handler, IButton view) =>
            {
                if (view is Button)
                {
                    handler.PlatformView.UseSystemFocusVisuals = false;
                    handler.PlatformView.IsTabStop = false;
                }
            });
            ImageButtonHandler.Mapper.AppendToMapping("Project.ImageBButtons.NoSystemFocus", (handler, view) =>
            {
                if (view is ImageButton)
                {
                    handler.PlatformView.UseSystemFocusVisuals = false;
                    handler.PlatformView.IsTabStop = false;
                }
            });

For controls like CollectionView that bind data in a list format, disabling Focus and TabStop needs to be done in the backend code of the page, passing the control object from the frontend to the backend.

1
2
3
4


<toolkit:EventToCommandBehavior                                                    
     EventName="ChildAdded"
     Command="{Binding CollectionViewChildAddedCommand}"
     CommandParameter="{Binding Source={x:Reference Listview}}"/>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


[RelayCommand]
void CollectionViewChildAdded(object sender)
{
    if (sender != null && sender is CollectionView collectionView)
    {
        if (collectionView.Handler != null && collectionView.Handler is CollectionViewHandler viewHandler)
        {
            foreach (var item in viewHandler.PlatformView.ItemsPanelRoot.Children)
            {
                item.IsTabStop = false;
            }
        }
    }
}

Page shortcuts
When using Shell mode, you can hide the navigation bar and use menu shortcuts to implement shortcut key operations on the page.

1

Shell.NavBarIsVisible="false"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<MenuFlyout>
    <MenuFlyoutItem Command="{Binding StartOrStopCommand}" IsEnabled="{Binding IsEnabledPage}">
        <MenuFlyoutItem.Text>
            <MultiBinding StringFormat="{}{0}/{1}">
                <Binding Path="LocalizationResourceManager[Start]"/>
                <Binding Path="LocalizationResourceManager[Stop]"/>
            </MultiBinding>
        </MenuFlyoutItem.Text>
        <MenuFlyoutItem.KeyboardAccelerators>
            <KeyboardAccelerator Modifiers="None" Key="Space" />
        </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
    <MenuFlyoutItem Text="{Binding LocalizationResourceManager[Reset]}" Command="{Binding SpirometryResetCommand}" IsEnabled="{Binding SpirometryStartCommand.IsRunning, Mode=OneWay}">
        <MenuFlyoutItem.KeyboardAccelerators>
            <KeyboardAccelerator Modifiers="None" Key="R" />
        </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
    <MenuFlyoutItem Text="{Binding LocalizationResourceManager[ReturnHome]}" Command="{Binding GoHomeCommand}" IsEnabled="{Binding SpirometryStartCommand.IsRunning, Mode=OneWay, Converter={StaticResource InvertedBoolConverter}}">
        <MenuFlyoutItem.KeyboardAccelerators>
            <KeyboardAccelerator Modifiers="None" Key="Escape" />
        </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
</MenuFlyout>