Microsoft-ui-xaml: MenuBarItem with no Items shows blank Dropdown

[michael-hawker]

Describe the bug
It's sometimes desirable to have a top-level MenuBarItem in a MenuBar that contains no items and is just effectively a 'button'. This is common in some apps for certain common functions or for a simple 'Help' or 'About' dialogs.

Steps to reproduce the bug

1. Copy Keyboard accelerator example from XAML Controls Gallery into XAML Studio
2. Add a blank MenuBarItem: <muxc:MenuBarItem Title="View"/>
3. Click on it, note: a blank menu drops down.

Expected behavior
No Menu to drop-down, should only act as a button.

Screenshots

Full XAML Example

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">

<muxc:MenuBar>
  <muxc:MenuBarItem Title="File">
    <MenuFlyoutItem Text="New">
      <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="N"/>
      </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
    <MenuFlyoutItem Text="Open...">
      <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="O"/>
      </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
    <MenuFlyoutItem Text="Save">
      <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="S"/>
      </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
    <MenuFlyoutItem Text="Exit">
      <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="E"/>
      </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
  </muxc:MenuBarItem>

  <muxc:MenuBarItem Title="Edit">
    <MenuFlyoutItem Text="Undo">
      <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="Z"/>
      </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
    <MenuFlyoutItem Text="Cut">
      <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="X"/>
      </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
    <MenuFlyoutItem Text="Copy">
      <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="C"/>
      </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
    <MenuFlyoutItem Text="Paste">
      <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="V"/>
      </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
  </muxc:MenuBarItem>

  <muxc:MenuBarItem Title="View"/>

  <muxc:MenuBarItem Title="Help">
    <MenuFlyoutItem Text="About">
      <MenuFlyoutItem.KeyboardAccelerators>
        <KeyboardAccelerator Modifiers="Control" Key="I"/>
      </MenuFlyoutItem.KeyboardAccelerators>
    </MenuFlyoutItem>
  </muxc:MenuBarItem>
</muxc:MenuBar>
</Page>

Version Info

NuGet package version: 2.3.191129002

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| May 2020 Update (19041) | Yes |
| November 2019 Update (18363) | |
| May 2019 Update (18362) | |
| October 2018 Update (17763) | |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |

| Device form factor | Saw the problem? |
| :----------------- | :--------------- |
| Desktop | Yes |
| Xbox | |
| Surface Hub | |
| IoT | |

Additional context
Related to gap for #2216

[Felix-Dev]

This would also match the behavior of WPF's Menu \ MenuItem control:

<Menu Grid.Row="0">
    <MenuItem Header="Options">
        <MenuItem.Items>
            <MenuItem Header="Option 1" />
            <MenuItem Header="Option 2" />
        </MenuItem.Items>
    </MenuItem>
    <MenuItem Header="Help" Click="MenuItem_Click" />
</Menu>

It's important to note here that WinUI's MenuBarItem currently does not have APIs to handle user input like a Click event or a Command property like WPF's MenuItem does. There is the inherited PointerPressed event from UIElement but that event is not raised for developers to use here.

As such, if it's agreed that it's a valid use case to have a MenuBarItem act like a button (when there are no child items) it makes sense to me that we should also add APIs like a Click event or a Command property to the MenuBarItem then.

[ranjeshj]

This seems like a reasonable behavior to have.

[Felix-Dev]

@michael-hawker Do you want to create a fleshed out proposal to get "button behavior" for the MenuBarItem control? Otherwise I'd be interested in creating one 😁

[michael-hawker]

Thanks @chingucoding for the PR, to clarify though it only solves the visual problem, eh? It doesn't address that there's no way to interact with that MenuBarItem via Click/Command/PointerPressed as @Felix-Dev pointed out here?

[chingucoding]

Yes, this only solved the empty flyout and did not add the new proposed API.

[Felix-Dev]

I will try to create the proposal this weekend though I'm not sure if every API of it can be added prior to WinUI going full open-source. The Command API for example can probably be best implemented by re-using internal WinUI Command logic (used for other Command properties in WinUI) and, from what I can tell after doign a quick check, that logic is not available in WinUI 2.

[StephenLPeters]

I will try to create the proposal this weekend though I'm not sure if every API of it can be added prior to WinUI going full open-source. The Command API for example can probably be best implemented by re-using internal WinUI Command logic (used for other Command properties in WinUI) and, from what I can tell after doign a quick check, that logic is not available in WinUI 2.

Did this get made? if so can we link back to this?

[Felix-Dev]

@StephenLPeters Sorry for the delay, I haven't yet created it. It's very high on my current Todo list though (as I did say I wanted to try create one over the past weekend).

[StephenLPeters]

@StephenLPeters Sorry for the delay, I haven't yet created it. It's very high on my current Todo list though (as I did say I wanted to try create one over the past weekend).

no problem, just don't want it to get lost in the sea of issues :)

[Felix-Dev]

@michael-hawker @StephenLPeters Created an API proposal here.

[StephenLPeters]

Thanks!