Add Page-Level Shortcuts in .NET MAUI with MenuFlyout

Learn to add page-level shortcuts in .NET MAUI using `FlyoutBase.ContextFlyout` and `KeyboardAccelerator` for a better user experience.

Add the following code to the root node of the Page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<FlyoutBase.ContextFlyout>
    <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>
</FlyoutBase.ContextFlyout>
Built with Hugo
Theme Stack designed by Jimmy