Context menu support for Windows and MacCatalyst

[Eilon]

Description of Change

Open Questions

1. Should ContextFlyout be an attached property? On WinUI the ContextFlyout is a property on UIElement which is the base class to everything so that would be the equivalent of us putting it on Element vs View. They also have FlyoutBase which is the left click version of a flyout which is an attached property? Made ContextFlyout an attached property on FlyoutBase
2. IContextFlyoutContainer vs IContextFlyoutElement Context menu support for Windows and MacCatalyst #9174 (comment) IContextFlyoutElement wins
3. should we rename ContextFlyout to MenuFlyout and then ContextFlyout is just the container for the attached property? I went with this approach because MenuFlyout is just a type of Flyout and we are most likely going to want to expand on the types that we can specify here. So now View just takes FlyoutBase and MenuFlyout inherits from FlyoutBase. At a later point we'll probably introduce FlyoutView

API CHANGES

MAUI.CORE

// Made this delegate public while working on context menus for webview
public class MauiWebViewUIDelegate

namespace Microsoft.Maui
{
	/// <summary>
	/// Represents a view that can contain a context flyout menu, which is usually represented as a right-click menu.
	/// </summary>
	public interface IContextFlyoutElement
	{
		/// <summary>
		/// Gets the <see cref="ContextFlyout "/> for the view. Menu flyouts, menu flyout subitems, and menu flyout separators can be added to the context flyout.
		/// </summary>
		IFlyout? ContextFlyout { get; }
	}
}

namespace Microsoft.Maui
{
	public interface IFlyout : IElement
	{

	}
}

namespace Microsoft.Maui
{
	public interface IMenuFlyout : IList<IMenuElement>, IFlyout
    { }
}

namespace Microsoft.Maui.Handlers
{
	public interface IMenuFlyoutHandler : IElementHandler
	{
		void Add(IMenuElement view);
		void Remove(IMenuElement view);
		void Clear();
		void Insert(int index, IMenuElement view);

		new PlatformView PlatformView { get; }
		new IMenuFlyout VirtualView { get; }
	}
}

Maui.Controls

namespace Microsoft.Maui.Controls
{
	public abstract class FlyoutBase : Element, IFlyout
	{
                 public static readonly BindableProperty ContextFlyoutProperty = BindableProperty.CreateAttached("ContextFlyout")
	}
}

namespace Microsoft.Maui.Controls
{
    public partial class MenuFlyout : FlyoutBase, IMenuFlyout
    {
    }
}

namespace Microsoft.Maui.Controls
{
     public partial class Element : IView, IPropertyMapperView, IHotReloadableView, IContextFlyoutElement
     {
               IFlyout IContextFlyoutElement.ContextFlyout => FlyoutBase.GetContextFlyout(this);

XAML Sample

<Button Text="Increment by 1 (or right-click me)" Clicked="OnIncrementByOneClicked" FontSize="30" BackgroundColor="DarkGray">
                    <FlyoutBase.ContextFlyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Text="Increment by 10" Clicked="OnIncrementMenuItemClicked" CommandParameter="10"></MenuFlyoutItem>
                            <MenuFlyoutItem Text="Increment by 20" Clicked="OnIncrementMenuItemClicked" CommandParameter="20"></MenuFlyoutItem>
                            <MenuFlyoutSubItem Text="More options">
                                <MenuFlyoutItem Text="Increment by 1,000!" Clicked="OnIncrementMenuItemClicked" CommandParameter="1000"></MenuFlyoutItem>
                                <MenuFlyoutItem Text="Increment by 1,000,000!" Clicked="OnIncrementMenuItemClicked" CommandParameter="1000000"></MenuFlyoutItem>
                            </MenuFlyoutSubItem>
                        </MenuFlyout>
                    </FlyoutBase.ContextFlyout>
                </Button>

Known Issues

Please refer to this comment to see what is and isn't supported.

Issues Fixed

Fixes #7777

[profix898]

I just started to experiment with the implementation of context menu for MAUI a few hours back. However, I started down a different path by using an attached property. I also considered a behaviour. Obviously, you decided to augment IView directly. Just wanted to point out alternatives.

Also here are links to docs on context menu for ios/macos and Android (which also supports this via 'PopupMenu' class):

https://developer.apple.com/documentation/uikit/uicontextmenuinteraction
https://developer.android.com/guide/topics/ui/menus#context-menu

[Eilon]

@profix898 thanks for sharing. I added directly to View because it seemed "most natural" to me, and roughly aligns with what WinUI and MacCatalyst do in their respective systems (which this MAUI implementation ultimately wraps). Do you see any pros/cons either way?

[Eilon]

To @PureWeen and any other reviewers:

Per the linked comment above, the mainline scenarios should work: define a context menu on a compatible control and it will show up on MacOS and Windows. The main thing that really should work, but doesn't is: using {Binding ...} doesn't work (just like the MenuBar issue). This is fixed and working now (@PureWeen)

I'd love to get this PR merged ASAP so that it can make its way to customers, while at the same time I can iterate on the missing features to continuously improve it. So, if you have concerns of what's in here, please do let me know, including whether the known limitations are acceptable at this time.

Thanks!

[PureWeen]

I think this was just an oversight and I was unaware that UIAction can just be used in the place of UICommand

#9332

[PureWeen]

#9359

[PureWeen]

@Eilon
#9362

[PureWeen]

This code appears to work fine on iOS13+. Not sure if there was a specific reason why we aren't letting this code just run on iOS13. I created a tracking issue here that we can address after we're API completely for NET7 since it shouldn't take any API changes to enable the handlers for iOS

[hartez]

One minor nitpick.

[jsuarezruiz]

❤️

[mattleibow]

???

Maybe the delegate should be a nullable string??

[PureWeen]

AFAIK because it's an override I can't change the delegate. The iOS SDK would have to change it or we'd do it by converting this whole thing to implement the interface ourselves

If I set it to Action<string?> then I get a compile error Nullability of reference types in type doesn't match overidden member

[mattleibow]

oh dear :( This sounds like a wrong API. Let me open an issue for that.