[Feature] TokenView

[niels9001]

TokenView

Problem Statement

Often, you'd like to present e.g. selectable options to users. Some examples: UI to filter a list, present contacts or other options. It can be cumbersome to tweak a List/GridView to achieve this - an out of the box control that presents options consistently using the W11 design language would be a timesaver!

Android has the ChipControl for this: https://m3.material.io/components/chips/overview

Inspiration

In W11 Search, this patterns is used to allow the user to filter search results:

In the W11 Store, there's a similiar control (although it has a different look and feel):

Proposed Solution

A lightweight control that allows for setting different tokens deriving off ListView. Additionally, multi-select can be enabled. It should adhere to the Windows Visual Design specs so it feels native to WinUI. There should be scroll buttons (instead of a scrollbar) that animates to the first or last item, similar to W11 Search.

 <TokenView>
     <TokenItem Content="All" />
     <TokenItem Content="Work" />
     <TokenItem Content="Apps" />
     <TokenItem Content="Documents" />
     <TokenItem Content="Web" />
     <TokenItem Content="Settings" />
     <TokenItem Content="People" />
     <TokenItem Content="Folders" />
     <TokenItem Content="Photos" />
</TokenView>

result:

Properties for TokenView:

Property name	Type	Comments
Orientation	TokenViewOrientation	Can be Horizontal (Default) or Wrapped. In Horizontal mode, scrollbuttons will appears. In Wrapped mode, TokenItems will be wrapped horizontally + vertically.
CanRemoveTokens	bool	This makes all child TokenItems removeable.
SelectionMode	ListViewSelectionMode	Allows for single / multi-selection

Properties for TokenViewItem:

Property name	Type	Comments
Icon	IconElement	Icon showing left of the Content
Content	object	Content of the TokenItem
IsRemoveable	bool	Determines if a TokenItem can be removed (using Del/Backspace or the remove button.
SelectionMode	ListViewSelectionMode	Allows for single / multi-selection

Open Questions

API Reference Docs

References

• https://www.figma.com/file/XjuZJySxR0ydkkYIrqk7ps/Windows-UI-3-(Community)?node-id=55073%3A246118&t=z6U37IDcuHdal6xA-4

[michael-hawker]

@niels9001 I think the general form of this would be the segmented control, eh? See WinUI proposal here with some prior discussion: microsoft/microsoft-ui-xaml#2310 - Also came up when looking at RadioButtons for similar experience, as I discussed here: microsoft/microsoft-ui-xaml#3759

[michael-hawker]

I think the common term for this control is a "Chips" control, eh? See original thread on Community Toolkit here: CommunityToolkit/WindowsCommunityToolkit#1738 - which led to the TokenizingTextBox (which would be the editable version I guess?)

See Material docs here for the control (covers the input scenarios as well): https://www.material.io/components/chips/android