🧪 [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.

[robloo]

more trying to fill a gap between groups of Toggle/RadioButtons.

Makes sense. I think a group of toggle buttons is fundamentally the only new thing a segmented control can do. It's already possible to restyle a group of radio buttons and has been for some time.

The real power of this control though is not filling that one little "grouped toggle buttons" feature gap. It's generalizing both the designs and control API to unify all these settings/option type use cases into one control.

I also know the TabStrip type view selection mode is technically a violation of standard conventions. But because there is no TabStrip in WinUI I think this control again serves as an interesting option. It again unifies some things that at first appear to be different but perhaps, fundamentally, are not.

[robloo]

@niels9001 @michael-hawker I realized that this control is actually a SelectionStrip a general-purpose control of which TabStrip is a special case. This is similar to WinUI where it was moving towards the "grouped selection support" terminology.

What this means is in the controls hierarchy TabStrip : SelectionStrip is how things should have been done to support this in WPF (if the concept was around back then). It is not so different than an ItemsControl with selection (Selector). However, it newly supports setting selection persistence (whether a clicked item will stay clicked).

A SelectionMode of a SelectionStrip can control whether one or more items can be selected at once. SelectionType/SelectionPersistence type property could control whether to allow toggle support (Selector behavior) or simple button functionality.

[ghost1372]

It was announced on the call yesterday that a new control, Segmented Control will be added in version 1.4.2.
I guess that the new control will be written from scratch for supporting C#/C++,... and Labs control will not be used.
If it is correct... should we say goodbye to the segmented (labs)?
@michael-hawker

[michael-hawker]

@robloo appreciate your breakdown here. We do have the selection mode option on the current control. Our original intent wasn't really to provide functionality for a tab-strip, though @niels9001 did just add a sample for a pivot like experience in a PR here: CommunityToolkit/Windows#236

If the platform does implement a Segmented control, I'm not sure which approach to compositing they'll take, but it's something we can certainly highlight. On that note...

@ghost1372 yes, it's on their roadmap for 1.5 to investigate (not 1.4.2). FYI, we've also shipped the Segmented control in the 8.0 release in our main repo. If the platform decides to invest in this type of experience/control, we'll work with them, as we've done in the past, to help share what we've built, its experience, and feedback as a starting point.

Since we've shipped this experiment, I'm going to close this issue, as we don't need it for tracking anymore. Anything new should open a discussion on the main repo. Thanks!

[robloo]

@michael-hawker Yea, my point is this control hasn't reached the correct level of generalization yet. I think it's fundamentally a SelectionStrip and represents a whole class of controls.

Several people are putting various ideas together separately but it's hasn't been brought together yet. I think the whole thing needs to be generalized to a SelectionStrip before wide release.