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?