Proposal: New resources for styling menus consistently

[ghost]

Proposal: New resources for styling menus consistently

Summary

I propose adding a couple new common resources to easily set the same padding, margin and item height among various menus.

Rationale

• There are many menus that are very similar in functionality and looks, but their design is implemented manually each time, and differences occur frequently.
• ControlCornerRadius and OverlayCornerRadius are used in almost all controls with rounded corners so that the values can be changed once for all of them.
• Users would be able to easily style all menus at once instead of setting values for each of them.

Scope

Capability	Priority
New resources are added	Must
Existing resources continue working	Must
Resources are added to controls as needed	Should

Important Notes

• Horizontal menus (e.g. CommandBar, NavigationView in top mode, MenuBar) HorizontalMenuPadding HorizontalMenuItemMargin HorizontalMenuItemHeight

• Vertical menus (all flyouts with a list of buttons) VerticalMenuPadding VerticalMenuItemMargin VerticalMenuItemHeight

Controls can be updated to use these resources. All existing lightweight resources should continue to work.

Where they can be used:

• MenuItemMargin, MenuItemHeight (for items): MenuFlyoutItem, MenuFlyoutSubItem, RadioMenuFlyoutItem, ToggleMenuFlyoutItem, NavigationViewItem, ComboBoxItem, AppBarButton, AppBarToggleButton
• MenuPadding (for containers): CommandBar, CommandBar.SecondaryCommands, CommandBarFlyout, MenuFlyout, NavigationView, ComboBox

Here is a working example of horizontal and vertical menus using those resources:

This proposal can solve all inconsistencies in #4383.

Most controls would only need to change explicit values to those resources. Some controls might need very minor changes.

Extra

CommandBar has resources to set an inner margin, which allows the item to be hovered from outside the visual. This would continue to work with this proposal, but it could be extended to the other menus in the future.

Open questions

• What would be better names for the resources?
• What should the default values be? Right now it seems that vertical menus are supposed to have 2px padding and 2px item margin.

Additional notes

If this is approved, I'd like to work on this.

[StephenLPeters]

I would love to increase the number of levels we do resource redirection at, however our system doens't really support this very well. When a resource lookup occurs in the framework, the systems starts looking for a resource with the key "foo" when it finds a resource somewhere in the tree that redirects to a different resource named "bar" the systems continues its lookup from the spot that it found "foo". This means that if "bar" was defined ad a narrower scope than we found "foo" at, the system would miss the "bar" declaration. This really prevents us from having a robust resourcing story, like what you suggesting would help us with. However it is much more performant.

[StephenLPeters]

So this proposal is dependent on https://github.com/microsoft/microsoft-ui-xaml/issues/2913