🧪 [Experiment] Segmented

[niels9001]

Approved from Discussion

#314

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.

Overview

This experiment adds the following components:

• Segmented
• SegmentedItem

Using

You can try it out via the NuGet Packages here:

UWP
https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.Uwp.Segmented
WinUI 3
https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.WinUI.Segmented

Read more about Preview Packages here.

Code

<labs:Segmented SelectedIndex="0">
     <labs:SegmentedItem Content="Item 1" Icon="{ui:SymbolIcon Symbol=Play}" />
     <labs:SegmentedItem Content="Item long label 2" Icon="{ui:SymbolIcon Symbol=Pause}" />
     <labs:SegmentedItem Content="Item 3" Icon="{ui:SymbolIcon Symbol=Home}" />
</labs:Segmented>

<labs:Segmented Style="{StaticResource PivotSegmentedStyle}"... />

<labs:Segmented Style="{StaticResource ButtonSegmentedStyle}"... />

Result

Docs & samples
https://github.com/CommunityToolkit/Labs-Windows/tree/main/components/SegmentedControl/samples

• [] Pill indicator not completely centered

Additional info

No response

Implementation Requirements

• Working Prototype
• Feature Complete
• Documentation
• Samples
• Unit Tests
• Community Feedback / Usage Testimonies

Tested Platforms

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Technical Review

• Accessibility Audit
• API/Naming Review
• Code Quality/Style
• Dependency Review
• Design/Style Review
• Final Approval

Community Help?

Yes

[michael-hawker]

Ugh, the new behavior of linked prs automatically closing when they don't say 'fixed' is a bit annoying. Maybe this gets better with tasklists in the future...

[robloo]

I'm really liking these designs! Thanks so much for picking up this control. It is one of the clear missing points in WinUI and it appeared upstream didn't even understand the original discussion.

I'm not sure multiple designs should be supported out of the box though. WinUI doesn't usually do this. My vote would be for the PivotSegmentedStyle to be the only out-of-box style. Apps can customize it as needed.

[niels9001]

I'm really liking these designs! Thanks so much for picking up this control. It is one of the clear missing points in WinUI and it appeared upstream didn't even understand the original discussion.

I'm not sure multiple designs should be supported out of the box though. WinUI doesn't usually do this. My vote would be for the PivotSegmentedStyle to be the only out-of-box style. Apps can customize it as needed.

Great feedback :)! The default style is according to the design specs in the Windows Visual Library (Figma). In general, the Segmented control is not meant was a replacement for a Pivot or NavigationView but more trying to fill a gap between groups of Toggle/RadioButtons.