🧪 [Experiment] TokenView

[niels9001]

Approved from Discussion

#323

Problem Statement

An easy way to visualize filters / selected data / options.

Overview

This experiment adds the following components:

• TokenView
• TokenItem

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.TokenView
• WinUI 3: https://dev.azure.com/dotnet/CommunityToolkit/_artifacts/feed/CommunityToolkit-Labs/NuGet/CommunityToolkit.Labs.WinUI.TokenView
  Read more about Preview Packages here.

Code

 <labs:TokenView>
            <labs:TokenItem Content="All" />
            <labs:TokenItem Content="Apps">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xECAA;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Work">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE821;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Documents">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE8A5;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Web">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE12B;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
            <labs:TokenItem Content="Settings">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="&#xE115;" />
                </labs:TokenItem.Icon>
            </labs:TokenItem>
        </labs:TokenView>

Result

Documentation & samples
https://github.com/CommunityToolkit/Labs-Windows/tree/main/components/TokenView/samples

Additional info

No response

### Implementation Requirements
- [X] Working Prototype
- [X] Feature Complete
- [X] Documentation
- [X] Samples
- [ ] Unit Tests
- [ ] Community Feedback / Usage Testimonies

### Tested Platforms
- [x] UWP
- [x] WinAppSDK / WinUI 3
- [x] 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?

None

[jp-weber]

I have noticed a few small things:

The corner radius could not be overwritten uniformly and was defined differently than in the standard.
Static corner radius (99):
https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/TokenView/src/TokenItem/TokenItem.xaml#L294

Definition of TokenItemCornerRadius
https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/TokenView/src/TokenItem/TokenItem.xaml#L129

    <x:Double x:Key="TokenItemCornerRadius">16</x:Double>

Standard e.g. https://github.com/microsoft/microsoft-ui-xaml/blob/4041a77fa1468062ef45bfe7a136aeca6e9044f2/dev/ProgressBar/ProgressBar_themeresources.xaml#L40

<CornerRadius x:Key="ProgressBarCornerRadius">1.5</CornerRadius>

The foreground of the remove Button is always black:

[niels9001]

I have noticed a few small things:

The corner radius could not be overwritten uniformly and was defined differently than in the standard. Static corner radius (99): https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/TokenView/src/TokenItem/TokenItem.xaml#L294

Definition of TokenItemCornerRadius https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/TokenView/src/TokenItem/TokenItem.xaml#L129

    <x:Double x:Key="TokenItemCornerRadius">16</x:Double>

Standard e.g. https://github.com/microsoft/microsoft-ui-xaml/blob/4041a77fa1468062ef45bfe7a136aeca6e9044f2/dev/ProgressBar/ProgressBar_themeresources.xaml#L40

<CornerRadius x:Key="ProgressBarCornerRadius">1.5</CornerRadius>

The foreground of the remove Button is always black:

@jp-weber Great feedback! I'll have a look at this!

EDIT: @jp-weber issues are now resolved in the latest version.

[yaira2]

Is it possible to set an item source for this control?

[niels9001]

Is it possible to set an item source for this control?

Yep.. see a sample here: https://github.com/CommunityToolkit/Labs-Windows/blob/main/components/TokenView/samples/TokenViewItemsSourceSample.xaml

[Jay-o-Way]

Question: why is radius = 16? Generally, controls would use 8. It looks nice and semi-circle with this size, but what if the OS uses a bigger font size? (Not to be confused with general scaling)

[niels9001]

Question: why is radius = 16? Generally, controls would use 8. It looks nice and semi-circle with this size, but what if the OS uses a bigger font size? (Not to be confused with general scaling)

It's implemented according to the design specification per Windows Visual Library (Figma). It can be easily styled by overriding the TokenItemCornerRadius. There always might be visual inconsistencies on different, non-standard text scales - feel free to open an issue if needed!

[jp-weber]

I am currently working on the exemplary implementation in my application. But if I use a TokenItem in the DataTemplate , it looks like a TokenItem is generated in a TokenItem. Have I missed something?

<labs:TokenView 
    ItemsSource="{x:Bind ViewModel.TempAccountCategoryList,Mode=OneWay}"
    IsItemClickEnabled="True"
    SelectionMode="Multiple" 
    ItemClick="TokenView_ItemClick" >
    <labs:TokenView.ItemTemplate>
        <DataTemplate x:DataType="models:CategoryModel">
            <labs:TokenItem 
                Content="{x:Bind Name,Mode=OneWay}" 
                IsSelected="{x:Bind IsSelected,Mode=TwoWay}">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="{x:Bind Glyph,Mode=OneWay}"/>
                </labs:TokenItem.Icon>
            </labs:TokenItem>
        </DataTemplate>
    </labs:TokenView.ItemTemplate>
</labs:TokenView>

[niels9001]

I am currently working on the exemplary implementation in my application. But if I use a TokenItem in the DataTemplate , it looks like a TokenItem is generated in a TokenItem. Have I missed something?

<labs:TokenView 
    ItemsSource="{x:Bind ViewModel.TempAccountCategoryList,Mode=OneWay}"
    IsItemClickEnabled="True"
    SelectionMode="Multiple" 
    ItemClick="TokenView_ItemClick" >
    <labs:TokenView.ItemTemplate>
        <DataTemplate x:DataType="models:CategoryModel">
            <labs:TokenItem 
                Content="{x:Bind Name,Mode=OneWay}" 
                IsSelected="{x:Bind IsSelected,Mode=TwoWay}">
                <labs:TokenItem.Icon>
                    <FontIcon Glyph="{x:Bind Glyph,Mode=OneWay}"/>
                </labs:TokenItem.Icon>
            </labs:TokenItem>
        </DataTemplate>
    </labs:TokenView.ItemTemplate>
</labs:TokenView>

The ItemTemplate is part of the TokenItem already, so no need to add a TokenItem within the DataTemplate. So you should be able to use e.g. a Grid and add a TextBlock to bind the Name. See:

Labs-Windows/components/TokenView/samples/TokenViewItemsSourceSample.xaml

Line 19 in 255e9a5

<DataTemplate x:DataType="local:MyDataModel">

TokenView derives from ListViewBase, so you should be able to re-use ListView specific samples as well (there are a lot of ListView binding examples out there),

[jp-weber]

TokenView derives from ListViewBase, so you should be able to re-use ListView specific samples as well (there are a lot of ListView binding examples out there),

Thanks you are right. I hadn't thought about that at all and was focused on the TokenItem because I wanted to bind 'IsSelected', which is of course feasible with the ListViewBase with SelectedItems.