[Feature] SegmentedControl

[niels9001]

Segmented Control

Problem Statement

The WinUI controlset lacks a control that allows for configuring a view or setting. It allows developers to declare 2 to 5 items that can be (multi) selected to update a view or select a specific function.

Mobile platforms like iOS and Android have been using Segmented Control for years, but Windows does not. The Pivot control comes close, but hasn't been updated and is more used for navigation, not for selection.

Inspiration

Windows 11 Settings -> Apps -> Installed apps

Snip and Sketch vNext

iOS

Proposed Solution

• Simple and lightweight.
• Icon can be set
• Content can be set
• Multi-selection is supported
• By default, the first item is selected.
• Adhering to the Windows Visual Design specs to it feels native to WinUI.

<SegmentedControl>
      <SegmentedControlItem Icon="&#xEA3F;" Content="Item 1"/>
      <SegmentedControlItem Icon="&#xEA3F;" Content="Item 1"/>
      <SegmentedControlItem Icon="&#xEA3F;" Content="Item 1"/>
</SegmentedControl>

result:

To support other use cases seen across Windows, we could support the following styles out of the box (better naming needed :)):

DefaultSegmentedControlStyle

PillSegmentedControlStyle

ToggleButtonSegmentedControlStyle

Open Questions

API Reference Docs

References

• https://www.figma.com/file/XjuZJySxR0ydkkYIrqk7ps/Windows-UI-3-(Community)?node-id=43251%3A144750&t=z6U37IDcuHdal6xA-4
• https://developer.apple.com/design/human-interface-guidelines/components/selection-and-input/segmented-controls
• Grouped selection support microsoft/microsoft-ui-xaml#2310
• RadioButtons Style Improvements [Issue Collection] microsoft/microsoft-ui-xaml#3759

[nikolayvpavlov]

I would humbly suggest the following more features:

1. Support for state icon: selected / not selected / highlighted.

2. Support for rich content, i.e. not only text.

<SegmentedControlItem Icon="&#xEA3F;">
    <SegmentedControlItem.Content>
         <StackPanel>
             ...
         </StackPane>
    </SegmentedControlItem.Content>
</SegmentedControlItem>

3. Orientation: vertical and horizontal.

4. Responsive: show icon only, or icon and content, wrappable.

[michael-hawker]

This was shipped in the 8.0 Release, please update to use that version of the component. Any further issues/requests should start in the main repository.