Cross-platform solution for Right click context menu on desktop app

[ziaulhasanhamim]

Context-menu support in .NET MAUI

A context menu, often known as a right-click menu, offers contextual commands that are specific to the element being clicked on. In .NET MAUI a context menu can be added to any control that is a View, which includes all the controls that "take up space on the screen," such as Label, Entry, Image, Button, WebView, and many others.

Target platforms

• Windows: Fully supported
• MacCatalyst: Fully supported
• Other platforms: We will consider Android and iOS support at a later time

Note that even on supported platforms there are differences due to what each platform supports in their native context menu support.

New APIs

The main new API is a new ContextFlyout property on the View base type, via a new IContextFlyoutContainer interface. The pattern is very similar to how a MenuBarItem contains various flyout menu items.

Compatible menu flyout types and properties

Type	Windows properties	MacCatalyst properties
MenuFlyoutItem for menu items you can click	Text, IconImageSource, Clicked, Command[Parameter]	Text, IconImageSource, Clicked, Command[Parameter]
MenuFlyoutSubItem to contain sub-menu items	Text	Text
MenuFlyoutSeparator for horizontal lines	N/A	N/A

Usage examples and screenshots

A simple context menu to enable right-click support on a label has XAML like this:

    <Label Text="Right-click to pick my color" x:Name="ColorLabel">
        <Label.ContextActions>
            <MenuFlyoutItem Text="Make label red" Clicked="MakeLabelRed"></MenuFlyoutItem>
            <MenuFlyoutItem Text="Make label blue" Clicked="MakeLabelBlue"></MenuFlyoutItem>
        </Label.ContextActions>
    </Label>

And some C# code to handle the events like this:

	private void MakeLabelRed(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.Red;
	private void MakeLabelBlue(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.LightBlue;

And this is what it looks like on Windows:

And slightly more advanced with sub-menus and icons in XAML:

    <Label Text="Right-click to pick my color" x:Name="ColorLabel">
        <Label.ContextActions>
            <MenuFlyoutItemText="Make label red" Clicked="MakeLabelRed">
                <MenuFlyoutItem.IconImageSource>
                    <FontImageSource Glyph="X" FontFamily="Arial" Color="Red" />
                </MenuFlyoutItem.IconImageSource>
            </MenuFlyoutItem>
            <MenuFlyoutItem Text="Make label blue" Clicked="MakeLabelBlue">
                <MenuFlyoutItem.IconImageSource>
                    <FontImageSource Glyph="X" FontFamily="Arial" Color="Blue" />
                </MenuFlyoutItem.IconImageSource>
            </MenuFlyoutItem>
            <MenuFlyoutSubItem Text="More colors">
                <MenuFlyoutItem Text="Hot pink" Clicked="MakeLabelHotPink">
                    <MenuItem.IconImageSource>
                        <FontImageSource Glyph="X" FontFamily="Arial" Color="HotPink" />
                    </MenuItem.IconImageSource>
                </MenuFlyoutItem>
                <MenuFlyoutItem Text="Pale Goldenrod" Clicked="MakeLabelPaleGoldenrod">
                    <MenuItem.IconImageSource>
                        <FontImageSource Glyph="X" FontFamily="Arial" Color="PaleGoldenrod" />
                    </MenuItem.IconImageSource>
                </MenuFlyoutItem>
            </MenuFlyoutSubItem>
        </Label.ContextActions>
    </Label>

And similar C# event handlers:

	private void MakeLabelRed(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.Red;
	private void MakeLabelBlue(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.LightBlue;
	private void MakeLabelHotPink(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.HotPink;
	private void MakeLabelPaleGoldenrod(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.PaleGoldenrod;

And you get this lovely user interface on Windows:

And similarly on MacOS (note that there are no icons supported):

Custom context menus with Entry (textbox)

• On Windows, this works automatically
• On MacOS this does not yet work (you always get the default MacOS menu with clipboard functions, etc.)

Custom context menus with WebView

• On Windows you need code like this to disable WebView2's default menu:

                      // In the constructor, after calling InitializeComponent();
  #if WINDOWS
  			ContextMenuWebView.HandlerChanged += OnWebViewHandlerChanged;
  #endif
  
  #if WINDOWS
  	void OnWebViewHandlerChanged(object sender, EventArgs e)
  	{
  		if (ContextMenuWebView.Handler != null)
  		{
  			var webView2 = (Microsoft.UI.Xaml.Controls.WebView2)ContextMenuWebView.Handler.PlatformView;
  			webView2.CoreWebView2Initialized += OnWebView2CoreWebView2Initialized;
  		}
  	}
  
  	private void OnWebView2CoreWebView2Initialized(Microsoft.UI.Xaml.Controls.WebView2 sender, Microsoft.UI.Xaml.Controls.CoreWebView2InitializedEventArgs args)
  	{
  		sender.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
  	}
  #endif

• On MacOS this is being investigated.

Custom context menu location

Not yet supported. The context menu shows up exactly where the pointer was right-clicked, and opens in the appropriate orientation for the device.

Dynamic context menu items

Changing the contents of the context menus dynamically is not fully supported at this time. The code in the PR contains some comments to that effect. It should be implemented in both Windows and macOS.

Using {Binding ...} for context menu items

There are some limitations with binding in menu items. This is related to the following issues:

• Command bound with MenuFlyoutItem is not getting executed, whereas Clicked event is working fine Command bound with MenuFlyoutItem is not getting executed, whereas Clicked event is working fine #5382
  • Draft PR here: Preserve the correct binding context for menu items Preserve the correct binding context for menu items #7358
• Possible fix also as seen here: https://github.com/dotnet/maui/blob/main/src/Controls/src/Core/BindableObject.cs#L264-L275

Original Description

Description

Right-click context menus are a very very important feature for desktop apps. Almost every desktop app needs this feature. But I don't think there is a cross-platform way to do it in MAUI.

Public API Changes

Have to introduce a new control for the context menu like other desktop frameworks.

Intended Use-Case

This can be very useful for providing desktop-specific options or when you are building a desktop-only app with MAUI

[janseris]

This is also useful on mobile apps.
The use case is long tap on anything on Android -> context menu or trigger multiselect.
This is equivalent to rightclick for desktop. Also in browser frameworks (touch vs mouse).

Considering the fact that an alternative for context menu which is swipe menu doesn't work with custom items (it's been 2 months but yet it is still included in the official docs) (#6018), this is a really needed feature.

[ziaulhasanhamim]

@janseris agreed. On mobile, it is also useful. But normally I see them used more on the desktop side. I know ios/maccatalyst has native controls for context menu. WinUi and android also might have something like that.

[ziaulhasanhamim]

At least, on Windows for now

It wouldn't be harder to do on ios and mac either. They have specific control for that. Just using that wouldn't be easy?

[janseris]

Looks like MacCatalyst is indeed fairly easy:

The code is still in veeeeeeeery early stages so it will be quite some work to get it ship-ready. But it's looking good!

What about Android? We are currently using a workaround with Display Alert with string options to simulate context menu for collectionview items but that isn't really a robust solution, the menu item needs an object binding, just like Tag property in Windows Forms controls and anything to display, not just plain string.

[Eilon]

Yeah Android will be interesting and I haven't thought about it much. My aim is to first have a good desktop experience where context menus are most expected. Once I get that working reasonably well, I'll look at iOS/iPadOS and Android.

[Eilon]

Context-menu support in .NET MAUI

A context menu, often known as a right-click menu, offers contextual commands that are specific to the element being clicked on. In .NET MAUI a context menu can be added to any control that is a View, which includes all the controls that "take up space on the screen," such as Label, Entry, Image, Button, WebView, and many others.

Target platforms

• Windows: Fully supported
• MacCatalyst: Fully supported
• Other platforms: We will consider Android and iOS support at a later time

Note that even on supported platforms there are differences due to what each platform supports in their native context menu support.

New APIs

The main new API is a new ContextFlyout property on the View base type, via a new IContextFlyoutContainer interface. The pattern is very similar to how a MenuBarItem contains various flyout menu items.

Compatible menu flyout types and properties

Type	Windows properties	MacCatalyst properties
MenuFlyoutItem for menu items you can click	Text, IconImageSource, Clicked, Command[Parameter]	Text, IconImageSource, Clicked, Command[Parameter]
MenuFlyoutSubItem to contain sub-menu items	Text	Text
MenuFlyoutSeparator for horizontal lines	N/A	N/A

Usage examples and screenshots

A simple context menu to enable right-click support on a label has XAML like this:

    <Label Text="Right-click to pick my color" x:Name="ColorLabel">
        <Label.ContextActions>
            <MenuFlyoutItem Text="Make label red" Clicked="MakeLabelRed"></MenuFlyoutItem>
            <MenuFlyoutItem Text="Make label blue" Clicked="MakeLabelBlue"></MenuFlyoutItem>
        </Label.ContextActions>
    </Label>

And some C# code to handle the events like this:

	private void MakeLabelRed(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.Red;
	private void MakeLabelBlue(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.LightBlue;

And this is what it looks like on Windows:

And slightly more advanced with sub-menus and icons in XAML:

    <Label Text="Right-click to pick my color" x:Name="ColorLabel">
        <Label.ContextActions>
            <MenuFlyoutItemText="Make label red" Clicked="MakeLabelRed">
                <MenuFlyoutItem.IconImageSource>
                    <FontImageSource Glyph="X" FontFamily="Arial" Color="Red" />
                </MenuFlyoutItem.IconImageSource>
            </MenuFlyoutItem>
            <MenuFlyoutItem Text="Make label blue" Clicked="MakeLabelBlue">
                <MenuFlyoutItem.IconImageSource>
                    <FontImageSource Glyph="X" FontFamily="Arial" Color="Blue" />
                </MenuFlyoutItem.IconImageSource>
            </MenuFlyoutItem>
            <MenuFlyoutSubItem Text="More colors">
                <MenuFlyoutItem Text="Hot pink" Clicked="MakeLabelHotPink">
                    <MenuItem.IconImageSource>
                        <FontImageSource Glyph="X" FontFamily="Arial" Color="HotPink" />
                    </MenuItem.IconImageSource>
                </MenuFlyoutItem>
                <MenuFlyoutItem Text="Pale Goldenrod" Clicked="MakeLabelPaleGoldenrod">
                    <MenuItem.IconImageSource>
                        <FontImageSource Glyph="X" FontFamily="Arial" Color="PaleGoldenrod" />
                    </MenuItem.IconImageSource>
                </MenuFlyoutItem>
            </MenuFlyoutSubItem>
        </Label.ContextActions>
    </Label>

And similar C# event handlers:

	private void MakeLabelRed(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.Red;
	private void MakeLabelBlue(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.LightBlue;
	private void MakeLabelHotPink(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.HotPink;
	private void MakeLabelPaleGoldenrod(object sender, EventArgs e) => ColorLabel.BackgroundColor = Colors.PaleGoldenrod;

And you get this lovely user interface on Windows:

And similarly on MacOS (note that there are no icons supported):

Custom context menus with Entry (textbox)

• On Windows, this works automatically
• On MacOS this does not yet work (you always get the default MacOS menu with clipboard functions, etc.)

Custom context menus with WebView

• On Windows you need code like this to disable WebView2's default menu:

                      // In the constructor, after calling InitializeComponent();
  #if WINDOWS
  			ContextMenuWebView.HandlerChanged += OnWebViewHandlerChanged;
  #endif
  
  #if WINDOWS
  	void OnWebViewHandlerChanged(object sender, EventArgs e)
  	{
  		if (ContextMenuWebView.Handler != null)
  		{
  			var webView2 = (Microsoft.UI.Xaml.Controls.WebView2)ContextMenuWebView.Handler.PlatformView;
  			webView2.CoreWebView2Initialized += OnWebView2CoreWebView2Initialized;
  		}
  	}
  
  	private void OnWebView2CoreWebView2Initialized(Microsoft.UI.Xaml.Controls.WebView2 sender, Microsoft.UI.Xaml.Controls.CoreWebView2InitializedEventArgs args)
  	{
  		sender.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
  	}
  #endif

• On MacOS this is being investigated.

Custom context menu location

Not yet supported. The context menu shows up exactly where the pointer was right-clicked, and opens in the appropriate orientation for the device.

Dynamic context menu items

Changing the contents of the context menus dynamically is not fully supported at this time. The code in the PR contains some comments to that effect. It should be implemented in both Windows and macOS.

Using {Binding ...} for context menu items

There are some limitations with binding in menu items. This is related to the following issues:

• Command bound with MenuFlyoutItem is not getting executed, whereas Clicked event is working fine Command bound with MenuFlyoutItem is not getting executed, whereas Clicked event is working fine #5382
  • Draft PR here: Preserve the correct binding context for menu items Preserve the correct binding context for menu items #7358
• Possible fix also as seen here: https://github.com/dotnet/maui/blob/main/src/Controls/src/Core/BindableObject.cs#L264-L275

[janseris]

@Eilon please consider Android as soon as possible

[Eilon]

@Eilon please consider Android as soon as possible

For sure. It's all about priorities and what we can get done in time for .NET 7, so we will have to see how far we can get.

[Qws]

Remember the right click context menu style of Windows 8 Metro apps?

Right-click (or hold-tap) on an item, and the Windows 8 style option bar fades in.

It's simple and functional, and would work on any screen size.

[Eilon]

@Qws that's an interesting idea but out-of-scope for the current feature set. Right now we're aiming to get "regular" context menus available for desktop apps.

[hybridherbst]

I was wondering if this is also related to shell context menu methods coming to MAUI – a way to specify these in a cross-platform way would be very welcome (e.g. right click a folder in windows > specific shell menus come up).