Discussion: Menus and buttons with duplicate functionality

[ghost]

Currently, there is duplicate functionality with MenuFlyout and CommandBarFlyout. They are very similar menus, but they use different item controls.

MenuBarFlyout:

• MenuFlyoutItem
• MenuFlyoutSubItem
• ToggleMenuFlyoutItem
• RadioMenuFlyoutItem
• MenuFlyoutSeparator

CommandBarFlyout

• AppBarButton
• AppBarToggleButton
• AppBarSeparator

It doesn't natively support sub items, so you'll need to handle that yourself.

There is also MenuBar, with its own item:

• MenuBarItem

MenuFlyout items are limited to having a vertical orientation, with MenuBarItem being used for a horizontal one, but CommandBar(Flyout) items support both orientations.

---

A solution would be to have a single button set for all menus:

• MenuItem (MenuFlyoutItem, MenuBarItem, AppBarButton)
• MenuToggleItem (ToggleMenuFlyoutItem, AppBarToggleButton)
• MenuRadioItem (RadioMenuFlyoutItem)
• MenuSubItem (MenuFlyoutSubItem)
  • could also be handled with a Flyout property instead
• MenuSeparator (MenuFlyoutSeparator, AppBarSeparator)

---

But what if you wanted a simple button with an icon? It's a pretty common use case, but you have to add one yourself as the content, and I think there should be a simpler way to do it.

AppBarButton is suggested to be used if you need icons, but it's a bit weird to use one next to a regular button, especially outside menus.
Even if it was replaced by a MenuItem, the same issue would continue existing.
And even if there was an IconButton, the issue still exists for SplitButton, ToggleButton, SplitToggleButton and DropDownButton.

A solution for that would be to give all of those an Icon property.

This way, you could simply use regular buttons for all menus:

<MenuFlyout>
  <Button Icon="Refresh" Text="Refresh" />
  <Button Icon="Personalize" Text="Personalize" />
  <DropDownButton Icon="Add" Text="New" >
    <DropDownButton.Flyout>
      <MenuFlyout>
	  <Button Icon="Folder" Text="Folder" />
	  <Button Icon="Document" Text="Text document" />
      </MenuFlyout>
    </DropDownButton.Flyout>
  </DropDownButton>
</MenuFlyout>

Menus could have their own button styles that adapt to orientation, allowing for #1473.

This would be a much simpler way to create menus.
The problem is that it kinda complicates the Button code. Maybe if you don't specify an icon, it would use a visual state or style without one, and there wouldn't really be a performance hit.

It would also be useful for #2310. See this comment for example usages.

[ojhad]

@ranjeshj FYI

[ojhad]

Thanks for your feedback and there are some good ideas here. Unfortunately, this most likely won't be something we'll be able to get to in the near term.