'Radio Button' Style Menu Items

[adambarlow]

The WinUI Team has completed this feature. How-to and API documentation is now live.

Proposal: 'Radio Button' Style Menu Items

Summary

Many applications, including visual studio, allow for the addition of checkboxes in the menu options of their MenuBars. These have been an important part of applications which use MenuBar for a very long time. The XAML MenuBar currently supports checkboxes.

However, another lesser used pattern is radio-button style menu options. This patter presents options that automatically swap selection within their group of items. While this patter is used less frequently, it does find precedent in various UIs and is a customer request.

Below is an example of this usage from the Win10 desktop context menu--

Rationale

Implementing this request will:

• Allow for radio-button style options in XAML MenuBars without having to custom implement the logic (e.g. for 'view' menus, etc.)
• Provide a consistent look and feel for this scenario (if we don't support this it will be implemented in various ways and will not be consistent)

Functional Requirements

#	Feature	Priority
1	API is straightforward and simple	Must
2	API doesn’t require styling, e.g. the 'dot' comes for free	Must
3	API allows for the styling of the glyph used for the 'dot'	Should

Detailed Feature Design

We plan to create a RadioMenuFlyoutItem in WinUI that derives from ToggleMenuFlyoutItem
It would have the following additional APIs:

• String GroupName
  • All RadioMenuFlyoutItems within a MenuFlyout with the same GroupName will be grouped together
  • Note: This works the same as in RadioButton today

Open Questions

• What should the visual distinction around the groups look like, if any?

Release Checklists

Prerelease readiness

• Dev: quality review + code review done
• Dev: test coverage added
• Dev: initial accessibility review done
• Dev: data metrics plan ready
• PM: spec up to date
• PM: feature ready for feedback
• PM: docs.microsoft.com updates ready

Stable release readiness

• Dev: feature previously shipped in a prerelease NuGet package
• Dev: Azure CI tests passing
• Dev: data metrics ready
• Dev: accessibility review done
• Dev: API review done
• Dev: IDL attribute switched from preview to public
• PM: spec done
• PM: glob/loc, privacy, security, license compliance ready
• PM: customer validation done
• PM: docs.microsoft.com updated
• PM: Xaml Controls Gallery updated

[mdtauk]

Perhaps a hollow circle/ring for unselected items, and a filled one for selected.

[adambarlow]

@mdtauk, thanks for the suggestion, we will add that as a suggestion as design takes a look at this.

[michael-hawker]

@mdtauk I think the key of how this works in existing patterns is that they're always grouped together in a section of the menu, so the user sees this is clearly a group by that construction.

If these items can be placed anywhere though with the same name, a developer isn't bound by that design constraint though and this could lead to messy UX by a developer. I'd almost like to see a RadioMenuFlyoutGroup collection item which is added to a menu and contains the set of items to be grouped. This would force construction to behave like existing system implementations and provide a consistent UX where it's not possible to have radio menu items placed across a menu, e.g.

( We Don't Want This )
-- Radio Option 1
-- Some Checked Item
-- Radio Option 2

[mdtauk]

Of course, they would need to be grouped. I would agree it needs to be done in a way where RadioMenuItems have to be placed within a RadioMenuGroup.

At present with the Win32 menus, there is no indicator for unchecked items. That would also work with the constraint of placing the items in a group. For that matter, would there also be a case for including an unticked indicator for toggle menu items?

[msft-github-bot]

Testing: @jevansaks docs and samples are ready for review