Microsoft-ui-xaml: Proposal: Make it easier to extend default Context Menus provided by controls

[michael-hawker]

Proposal: Make it easier to extend default Context Menus provided by controls

Summary

Some controls like TextBox/AutoSuggestBox/RichEditBox provide a rich and reactive default context menu for copying/pasting text or selecting the text. However, for some cases, developers may want to add new commands to these experiences for their application's commands. E.g. search for text elsewhere in app or on the web.

Currently, the developer needs to recreate and replace the entire menu as per existing docs and old sample from 2013.

Rationale

We want the toolkit's TokenizingTextBox to have a menu item to select all the tokens when the user right-clicks in the autosuggestbox potion of the control (just as we have on the custom menu we own for the tokens themselves).

To do this currently, it appears we'd have to re-implement all the logic of the base control to display the context menus that provide the basic text functions in addition to adding our new command.

Scope

| Capability | Priority |
| :---------- | :------- |
| This proposal will allow developers to accomplish extending a control's default context menu | Must |
| This proposal will allow developers to add to a context menu during an event so they can add their own reactive logic | Must |
| This proposal will allow developers to add to a context menu easily in XAML | Should |
| This proposal will allow developers to accomplish a sub-classed control to further extend an extended context menu | Could |

Important Notes

I could see this as an attached property added to the control like:

<TextBox Text="Some Amazing Content">
  <FlyoutBase.AdditionalItems>
    <MenuFlyoutItem Text="Share" >
      <MenuFlyoutItem.Icon>
        <FontIcon Glyph="&#xE72D;" />
      </MenuFlyoutItem.Icon>
    </MenuFlyoutItem>
  </FlyoutBase.AdditionalItems>
</TextBox>

Or by passing the contextmenu flyout object to the ContextMenuOpening event args for the developer to manipulate the menu before it's displayed:

<TextBox Text="Some Amazing Content" ContextMenuOpening="OnContextMenuOpening"/>

private void OnContextMenuOpening(object sender, ContextMenuEventArgs args)
{
    if (args.ContextMenu != null && args.ContextMenu.Items.Count > 2)
    {
       args.ContextMenu.Items.Insert(2, new MenuFlyoutItem() {
           Text = "Share",
           Command = MyShareCommand
       });
    }
}

There should also be a way for library developers who provide a context menu in their default control implementation to mark a placeholder item like MenuFlyoutAdditionalItemsPresenter to indicate where they'd like the additional items in the XAML example to go.

However, in either case, it's probably preferred that if the sub-control used a TextBox type control and extended the menu, that whoever is also wanting to extend the sub-control could also add additional items to the menu still easily.

Open Questions

• [ ] API surface for double-extensions for library scenarios based off of base winui controls that may need further additional items.

[michael-hawker]

Great to see support for this already! 🙂

To add to the rationale based on the investigations @DavidShoe has been doing. We've actually had issues trying to replace the default menu in its entirety as well. I'll coordinate with him next week after we ship the toolkit to file a bug with details on what we've tried and have had issues with there.

Thanks!

[YuliKl]

I've updated our documentation (tracked with Fixes https://github.com/MicrosoftDocs/windows-uwp/issues/2120) to point to a Xaml Controls Gallery example of how to add more commands to a context menu.

The remaining suggestion in this proposal is to allow adding commands in markup in addition to code-behind.

[michael-hawker]

Just realized re-searching for my own issue that this seems to be closely related to #911 as well, which is very similar. Maybe this should be combined with that one?

[YuliKl]

@michael-hawker agreed. I'll close this issue for now.