Plugin.Maui.NativeContextMenus 1.0.0

Plugin.Maui.NativeContextMenus

Plugin.Maui.NativeContextMenus adds native context menus to views in a .NET MAUI app.

.NET MAUI has a context menu (FlyoutBase.ContextFlyout) only on Windows and Mac Catalyst. This plugin gives the same function on iOS and Android.

Screenshots

These screenshots show the sample app. The same XAML makes the menus on the two platforms.

	Menu with sections	Submenu with a radio group	Menu on a list item	Menu on a tap
iOS
Android

Supported Platforms

On Windows, use the .NET MAUI context menu.

Supported .NET Versions

The package has assemblies for .NET 9 and .NET 10.

Installation

<PackageReference Include="Plugin.Maui.NativeContextMenus" Version="1.0.0" />

The context menu does not need a registration call in MauiProgram.cs.

Usage

Add the XML namespace to the page:

xmlns:cm="clr-namespace:Plugin.Maui.NativeContextMenus;assembly=Plugin.Maui.NativeContextMenus"

Set the NativeContextMenus.ContextMenu attached property on a view:

<Border>
    <Label Text="Long press this card" />

    <cm:NativeContextMenus.ContextMenu>
        <cm:NativeContextMenu Title="Card">
            <cm:MenuNode Title="Copy" SystemIcon="Copy" Command="{Binding CopyCommand}" />
            <cm:MenuNode Title="Share" SystemIcon="Share" Command="{Binding ShareCommand}" />

            
            <cm:MenuNode>
                <cm:MenuNode Title="Favorite" IsCheckable="True" IsChecked="{Binding IsFavorite, Mode=TwoWay}" />

                
                <cm:MenuNode Title="Sort By">
                    <cm:MenuNode Title="Name" GroupKey="sort" IsCheckable="True" IsChecked="True" />
                    <cm:MenuNode Title="Date" GroupKey="sort" IsCheckable="True" />
                </cm:MenuNode>
            </cm:MenuNode>

            <cm:MenuNode Title="Delete" SystemIcon="Delete" Destructive="True" Command="{Binding DeleteCommand}" />
        </cm:NativeContextMenu>
    </cm:NativeContextMenus.ContextMenu>
</Border>

The menu gets the BindingContext of the view. Thus bindings in a MenuNode work the same as bindings in the view.

List items

In an item template, the BindingContext is the item. Use a RelativeSource binding to get a command from the page view model. Send the item as the parameter.

<CollectionView ItemsSource="{Binding Machines}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid Padding="12">
                <Label Text="{Binding Name}" />

                <cm:NativeContextMenus.ContextMenu>
                    <cm:NativeContextMenu>
                        <cm:MenuNode Title="Remove"
                                     Destructive="True"
                                     Command="{Binding RemoveCommand, Source={RelativeSource AncestorType={x:Type local:MachinesViewModel}}}"
                                     CommandParameter="{Binding .}" />
                    </cm:NativeContextMenu>
                </cm:NativeContextMenus.ContextMenu>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Open the menu on a tap

Set Trigger to Tap. The default is LongPress.

<cm:NativeContextMenu Trigger="Tap">
    <cm:MenuNode Title="Open" SystemIcon="Open" Command="{Binding OpenCommand}" />
</cm:NativeContextMenu>

On iOS, a menu that opens on a tap does not show the preview of the view.

Open the menu from code

Give the menu a name and call Show. This works with the two triggers.

<cm:NativeContextMenu x:Name="CardMenu">

CardMenu.Show();

NativeContextMenus.Show(view) opens the menu of a view.

C#

var menu = new NativeContextMenu();
menu.Items.Add(new MenuNode { Title = "Copy", Command = copyCommand });
menu.Items.Add(new MenuNode { Title = "Delete", Destructive = true, Command = deleteCommand });

NativeContextMenus.SetContextMenu(label, menu);

Set the property to null to remove the menu.

API

NativeContextMenu

MenuNode

A node with Children and a Title is a submenu. A node with Children and no Title is an inline section.

The plugin builds the native menu each time the menu opens. As a result, the menu always shows the current property values.

Icons

SystemIcon is the easiest way to set an icon. It is an enum, thus the editor shows the values (Copy, Share, Delete, Edit, and more).

<cm:MenuNode Title="Delete" SystemIcon="Delete" />

To use an icon of your own, set Icon. It has priority over SystemIcon on all platforms. To show no icon, do not set an icon property.

Android shows menu icons on API 29 or later.

Known Limits

• Android shows a PopupMenu. It does not show the lifted preview of the view that iOS shows.
• On Android, the plugin sets the long click listener of the platform view (the click listener when Trigger is Tap). A view cannot have a different listener of that type at the same time.
• On iOS, the plugin adds a clear button to the platform view. The button gets touches only when Trigger is Tap.
• The menu of a parent view does not open from a child view that handles touch input itself (for example a Button).

Toolbar Menus (experimental)

NativeContextMenuToolbarItem puts a MenuNode menu on a toolbar item. This part of the plugin is not complete. Refer to TOOLBAR_MENU_USAGE.md.

Sample App

The sample app has a page for the view context menu and a page for the toolbar menu.

License

MIT. Refer to LICENSE.

The Android icons are from Material Symbols (Apache License 2.0). Refer to THIRD-PARTY-NOTICES.md.