Menus redesign

[kekekeks]

The old way of always rendering menus manually isn't really cross-platform. Right now we have a way to define the global menu for the window, but the API looks like it was attached with a piece of a duct tape (fortunately, the blue one).

It also doesn't cover context menus that are also expected to match platform's look and feel.

So the proposed change it to make the NativeMenu model class to be the primary way of defining menus while still keeping the support for complex custom menu layouts for apps that need those.

The new classes would be:

• Menu = old NativeMenu - a visual-less list of menu items
• MenuItem = old NativeMenuItem - a visual-less representation of menu item: text, icon, check state, submenu
• TemplatedMenu,TemplatedMenuItem = refactored old Menu classes changed to accomodate
  Menu and MenuItem separation.

Control.ContextMenu should accept both Menu and TemplatedMenu and display Menu as native menu if platform supports it, or create a TemplatedMenu to display it as our custom-rendered menu

Window will now have Window.Menu property which accepts both Menu and TemplatedMenu. WindowMenuBar control will export Menu as the window menu or create a TemplatedMenu instance and render it instead.

The current Menu control will be replaced by TemplatedMenuBar that has Menu property which should also accept both Menu and TemplatedMenu classes.

That way we do the native menu drawing by default, fall back to our own menu implementations if native menus are unavailable and still keep a way to enforce customized menus while having a unified API.

[mqudsi]

Thank you! This was the first observation on "out-of-place" feel for Avalonia apps in our feedback testing.

[JaggerJo]

It's also a good default :)

[maxkatz6]

For reference, UWP has more flexible contextmenu/menu/appbar c.

UIElement.ContextFlyout (equivalent of ContextMenu) is defined as FlyoutBase. Developer can set either MenuFlyout (equivalent of TemplatedMenu but only for context menus) or Flyout (just any Content in context Popup).

For application menu developer can use CommandBar with buttons and AppBarButton.Flyout (which could use any FlyoutBase including MenuFlyout) or more typical for win32 world MenuBar. Developer can't use any FlyoutBase with MenuBar, but all MenuFlyoutItemBase classes are available for both MenuBar and MenuFlyout.

MenuFlyout (also supports child items in same way as MenuBar):

MenuBar:

CommandBarFlyout is used as TextBox context menu:

CommandBar as an alternative to MenuBar:

Notes:

1. Apart from MenuFlyout and Flyout, there are some specific flyouts like TextCommandBarFlyout and CommandBarFlyout.
2. Developer needs to use FlyoutBase + FlyoutPresenter to create custom Flyout, which could be used as context menu too (in case if Flyout.Content is not enough).
3. FlyoutBase uses Popup internally.

Links:

1. Flyouts
2. Menus and context menus
3. Command bar flyout
4. Command bar

[grokys]

A few problems that would need to be addressed with this design:

• Native menus automatically handle hotkeys, but Avalonia menus don't (and currently can't when populating menus from
  a template: MenuItem HotKey only works after the menu item has been displayed at least once. #2441) which means that currently when using NativeMenuBar one has to add logic to invoke the menu commands, and make it run conditionally depending on platform
• Gestures are not translated in a sensible way when using NativeMenuBar, e.g. CMD+O becomes Win+O on Windows which is never what was desired
• We should have a way to insert standard gestures with the correct hotkey in XAML
• Possibly a way of defining gestures conditionally by platform? This would probably come under a larger feature similar to https://docs.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/essential-xaml-syntax#platform-differences-with-onplatform

[IsaacMarovitz]

This issue seems to have gone stale so bumping this again. Working on improving the Menu in Ryujinx and I'm running into issues with the inconsistency between Native Menu and Menu.

[Hanprogramer]

MenuFlyout doesn't seems to work with ItemTemplate?

<Button Grid.Row="1" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Content="Add Component">
	<Button.Flyout>
		<MenuFlyout Items="{Binding AvailableComponents}">
			<MenuFlyout.ItemTemplate>
				<DataTemplate>
					<StackPanel>
						<Button Content="{Binding Name}"/>
						<Button Content="{Binding Name}"/>
						<Button Content="{Binding Name}"/>
						<TextBlock>asdasd</TextBlock>
					</StackPanel>
				</DataTemplate>
			</MenuFlyout.ItemTemplate>
		</MenuFlyout>
	</Button.Flyout>
</Button>

[jp2masa]

MenuFlyout doesn't seems to work with ItemTemplate?

What version are you using? There was a fix in 11.0.0-preview5: #10020.