Grouped selection support

[LucaLindholm]

Proposal: Grouped selection support

Summary

Support for Fluent styling for grouped selection between choices. This type of control could be used in combination with others to display different views of the same or similar data, such as in map interfaces to switch between driving/walking/biking options. This lets a user pick from multiple choices, similar to Segmented Control in iOS.

Rationale

• provide a standardized horizontal selection UX
• in combination with FlipView or other controls, provide support for scenarios that were previously using Pivot

Scope

Capability	Priority
Horizontal selection of multiple options	Must
Support horizontal orientation	Must
Support vertical orientation	Should
Support styling for a Pivot-like header	Could

|
| Support styling for a group of buttons | Could |
| Multiple choice | Could |
| Every segment shall adapt to content width | Could |
| Limit the width of an item | Could |
| Respond to swipe on the control surface | Could |
| Overflow items into a dropdown menu | Could |
| Carousel items when resized | Could |
| Provide an area for content in the control itself | Won't |
| Take in data and display it differently based on selection | Won't |

Important Notes

@mdtauk created this mockup:

Mockups

Open Questions

• In what scenarios would a user need to (and be able to tell from the control's design) that they can select multiple items?
• Should each 'segment' adapt to content width, or all segments be limited to some default or developer-defined width?
• How should resizing be handled: in a dropdown menu (like NavView) or carouseling (like Pivot)?
• Could this be a restyle of RadioButtons? Likely not if we want to support multiple selection, swipe, carouseling, or other more complicated functionality

[robloo]

[mdtauk]

WinUI has the Pivot control that does this

[robloo]

The pivot is more like a tab view. This control would be a multi-toggle button. It wouldn't necessarily be used to switch views.

[mdtauk]

The pivot is more like a tab view. This control would be a multi-toggle button. It wouldn't necessarily be used to switch views.

Are there any other examples of a segmented control being multi-select?

I see macOS supports it, and it is like a list of filters applied to a view. (iOS does not seem to support it)

The Segmented control is not really a concept in Windows UI, either Xaml or Win32. If you can find existing windows apps that would benefit from this kind of control, it would be helpful to judge how necessary this suggestion would be to the community.

---

If it were to be implemented, the Pivot control could be given a multi-select behaviour, and the Pivot could be moved from a view switcher, to allow for a filtering situation (which is part of what it was originally envisaged to be)

[mdtauk]

Windows fluent UIs tend to use this method for filtering UX

[weltkante]

Its not about filtering.

I see this regularly in applications with complex UI, especially if they are visual editing tools. I've even seen it in Microsoft products like the Expression Blend/Design tools, though the edges aren't always rounded. Blender had this kind of visual grouping of controls for a very long time.

Its basically about grouping checkboxes and radiobuttons together visually, like you used to do on a classic Windows toolbar with seperators, except that it is a more modern style. Note that they don't have to be restricted to horizontal stack, vertical makes just as much sense (and are also used in practice).

I also used it a few times myself in WPF, using existing checkbox/radiobutton controls and adjusting their frames to visualize that they belong together. Obviously its very tedious to achieve manually, especially when UI is dynamic and its not fixed which control is the last in the list and needs its edges rounded.

I understand the visual style is something to argue about, but what I think is missing is an easy way to group checkbox / radio buttons together so they can be restyled as one unit. You can do it but its a lot of work. What you want is something as easy as restyling a listbox, except that you can't use a listbox because it changes selection with focus. You could think about it as a restyled listbox-like control with single/multi selection where you have to explicitly confirm that you change selection.

[mdtauk]

Its not about filtering.

Well the control is used for filtering as well as applying multiple attributes to a selection, and any number of other uses.

I see this regularly in applications with complex UI, especially if they are visual editing tools. I've even seen it in Microsoft products like the Expression Blend/Design tools, though the edges aren't always rounded. Blender had this kind of visual grouping of controls for a very long time.

I encounter it a lot too, but it is still useful to gather any uses that Microsoft have had for such a control UX - to convince the WinUI team of the need for this kind of control. My linking it to the Pivot, was attempting to make it easier to sell.

Its basically about grouping checkboxes and radiobuttons together visually, like you used to do on a classic Windows toolbar with seperators, except that it is a more modern style. Note that they don't have to be restricted to horizontal stack, vertical makes just as much sense (and are also used in practice).

The control would need to work as Icons, Text, and combinations of the two - and would need to visually align to the Fluent design. The RadioButtons control came about out of a need, and this control would be a similar group, with a shared item template, and support both single select and multi-select behaviour.

I also used it a few times myself in WPF, using existing checkbox/radiobutton controls and adjusting their frames to visualize that they belong together. Obviously its very tedious to achieve manually, especially when UI is dynamic and its not fixed which control is the last in the list and needs its edges rounded.

I understand the visual style is something to argue about, but what I think is missing is an easy way to group checkbox / radio buttons together so they can be restyled as one unit. You can do it but its a lot of work. What you want is something as easy as restyling a listbox, except that you can't use a listbox because it changes selection with focus. You could think about it as a restyled listbox-like control with single/multi selection where you have to explicitly confirm that you change selection.

The list of Musts on the original issue, could be finessed to the point where visually it can be made to fit the Fluent design language. I would imagine this control would use an ItemRepeater, as most of these ListView based controls are moving to use it.

I would like to see this control exist, but it would need to visually align to the design language - and be flexible enough to cover most scenarios.

[weltkante]

I see where you are going. From a quick check all examples I find in the fluent design language are using separators and not framing to group buttons that belong together. (Context menus like you've shown, Ribbons use grouping but with seperators, etc.) Since there's no common frame they are not running into the problem of not having a control for this kind of grouping.

[mdtauk]

Some quick ideas

[StephenLPeters]

What would the accessibility story look like here? would it report as a collection of items, would it report out selection states?

@kikisaints This looks pretty similar to radio buttons, but maybe with multi select. @chigy has some ideas.