Skip to content

Commit d95a2d6

Browse files
niels9001Arlodotexemichael-hawker
authored
🧪 [Experiment] TokenView (#348)
* Init * Init * Name changes * New samples * Binding support * XAML formatting * Sample updates * Renaming * Update CommunityToolkit.Labs.WinUI.TokenView.csproj * Update TokenView.Samples.csproj * Uno exceptions * Improve samples * Cleanup * Update TokenView.xaml * CI fixes and adding Header/Footer support * Update TokenView.ItemsSource.cs * Fix * Migrated TokenView to new component layout * Cleanup * Fix for selection and design improvements * Update TokenView.cs * Cleanup * Update for common to tooling folder rename Update/fix namespace for building * Moving to IsWrapped * Small clean-up from PR review (no functional changes) * Update components/TokenView/src/TokenView/TokenView.Events.cs * Fix issue with TokenView sample not showing when no item is selected Simplified from an event callback to an old-style binding x:Bind doesn't work great here due to microsoft/microsoft-ui-xaml#2166 --------- Co-authored-by: Arlo Godfrey <arlo.godfrey@outlook.com> Co-authored-by: michael-hawker <24302614+michael-hawker@users.noreply.github.com>
1 parent 96a6fe0 commit d95a2d6

31 files changed

+1902
-0
lines changed

‎components/TokenView/OpenSolution.bat‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@ECHO OFF
2+
3+
powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

‎components/TokenView/samples/Dependencies.props‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!--
2+
WinUI 2 under UWP uses TargetFramework uap10.0.*
3+
WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
4+
However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
5+
6+
MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
7+
8+
For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
9+
For UWP / WinAppSDK / Uno packages, place the package references here.
10+
-->
11+
<Project>
12+
<!-- WinUI 2 / UWP -->
13+
<ItemGroup Condition="'$(IsUwp)' == 'true'">
14+
<!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
15+
</ItemGroup>
16+
17+
<!-- WinUI 2 / Uno -->
18+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
19+
<!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
20+
</ItemGroup>
21+
22+
<!-- WinUI 3 / WinAppSdk -->
23+
<ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
24+
<!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
25+
</ItemGroup>
26+
27+
<!-- WinUI 3 / Uno -->
28+
<ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
29+
<!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
30+
</ItemGroup>
31+
</Project>

‎components/TokenView/samples/TokenView.Samples.csproj‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
2+
<PropertyGroup>
3+
<ToolkitComponentName>TokenView</ToolkitComponentName>
4+
</PropertyGroup>
5+
6+
<ItemGroup>
7+
<UpToDateCheckInput Remove="TokenViewBasicSample.xaml" />
8+
<UpToDateCheckInput Remove="TokenViewItemsSourceSample.xaml" />
9+
<UpToDateCheckInput Remove="TokenViewRemoveSample.xaml" />
10+
11+
<Compile Update="TokenViewRemoveSample.cs">
12+
<DependentUpon>TokenViewRemoveSample.xaml</DependentUpon>
13+
</Compile>
14+
<Compile Update="TokenViewBasicSample.xaml.cs">
15+
<DependentUpon>TokenViewBasicSample.xaml</DependentUpon>
16+
</Compile>
17+
<Compile Update="TokenViewItemsSourceSample.xaml.cs">
18+
<DependentUpon>TokenViewItemsSourceSample.xaml</DependentUpon>
19+
</Compile>
20+
</ItemGroup>
21+
22+
<!-- Sets this up as a toolkit component's sample project -->
23+
<Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
24+
</Project>

‎components/TokenView/samples/TokenView.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
title: TokenView
3+
author: niels9001
4+
description: The TokenView can be used to display and select tokens.
5+
keywords: TokenView, Control, TokenItem, ChipsControl
6+
dev_langs:
7+
- csharp
8+
category: Controls
9+
subcategory: Layout
10+
discussion-id: 323
11+
issue-id: 0
12+
---
13+
14+
<!-- To know about all the available Markdown syntax, Check out https://docs.microsoft.com/contribute/markdown-reference -->
15+
<!-- Ensure you remove all comments before submission, to ensure that there are no formatting issues when displaying this page. -->
16+
<!-- It is recommended to check how the Documentation will look in the sample app, before Merging a PR -->
17+
<!-- **Note:** All links to other docs.microsoft.com pages should be relative without locale, i.e. for the one above would be /contribute/markdown-reference -->
18+
<!-- Included images should be optimized for size and not include any Intellectual Property references. -->
19+
20+
<!-- Be sure to update the discussion/issue numbers above with your Labs discussion/issue id numbers in order for UI links to them from the sample app to work. -->
21+
22+
# TokenView
23+
24+
The TokenView is used to display `Tokens` in a consistent way that is inline with the Windows 11 design language. This control can be easily used to to display e.g. filters, contacts or other snippets of information.
25+
26+
Tokens allow for setting the `Icon` and `Content` while they can be removed as well.
27+
28+
## IsWrapped
29+
30+
By default, `TokenItems` are laid out horizontally and scrollbuttons will automatically appear upon control resizing. When `IsWrapped` is set, all items will be vertically stacked if the width of the items is larger than the available space.
31+
> [!Sample TokenViewBasicSample]
32+
33+
## Removing TokenItems
34+
35+
TokenItems can be removed from the collection by setting the `IsRemoveable` property on the TokenItem- or by setting the `CanRemoveTokens` property on the TokenView itself.
36+
37+
> [!Sample TokenViewRemoveSample]
38+
39+
## Binding
40+
41+
Binding is supported. Collections can be bound by setting a collection of items. You can use the `ItemTemplate` to define how your data object is represented.
42+
43+
> [!Sample TokenViewItemsSourceSample]

‎components/TokenView/samples/TokenViewBasicSample.xaml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2+
<Page x:Class="TokenViewExperiment.Samples.TokenViewBasicSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
7+
xmlns:local="using:TokenViewExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<Grid>
12+
<labs:TokenView AllowDrop="True"
13+
CanReorderItems="True"
14+
IsWrapped="{x:Bind IsWrapped, Mode=OneWay}"
15+
SelectedIndex="2"
16+
SelectionMode="{x:Bind local:TokenViewBasicSample.ConvertStringToListViewSelectionMode(SelectionMode), Mode=OneWay}">
17+
<labs:TokenItem Content="All" />
18+
19+
<labs:TokenItem Content="Apps">
20+
<labs:TokenItem.Icon>
21+
<FontIcon Glyph="&#xECAA;" />
22+
</labs:TokenItem.Icon>
23+
</labs:TokenItem>
24+
<labs:TokenItem Content="Work">
25+
<labs:TokenItem.Icon>
26+
<FontIcon Glyph="&#xE821;" />
27+
</labs:TokenItem.Icon>
28+
</labs:TokenItem>
29+
<labs:TokenItem Content="Documents">
30+
<labs:TokenItem.Icon>
31+
<FontIcon Glyph="&#xE8A5;" />
32+
</labs:TokenItem.Icon>
33+
</labs:TokenItem>
34+
<labs:TokenItem Content="Web">
35+
<labs:TokenItem.Icon>
36+
<FontIcon Glyph="&#xE12B;" />
37+
</labs:TokenItem.Icon>
38+
</labs:TokenItem>
39+
<labs:TokenItem Content="Settings">
40+
<labs:TokenItem.Icon>
41+
<FontIcon Glyph="&#xE115;" />
42+
</labs:TokenItem.Icon>
43+
</labs:TokenItem>
44+
<labs:TokenItem Content="People">
45+
<labs:TokenItem.Icon>
46+
<FontIcon Glyph="&#xE13D;" />
47+
</labs:TokenItem.Icon>
48+
</labs:TokenItem>
49+
<labs:TokenItem Content="Folders">
50+
<labs:TokenItem.Icon>
51+
<FontIcon Glyph="&#xE8B7;" />
52+
</labs:TokenItem.Icon>
53+
</labs:TokenItem>
54+
<labs:TokenItem Content="Photos">
55+
<labs:TokenItem.Icon>
56+
<FontIcon Glyph="&#xE91B;" />
57+
</labs:TokenItem.Icon>
58+
</labs:TokenItem>
59+
</labs:TokenView>
60+
</Grid>
61+
</Page>

‎components/TokenView/samples/TokenViewBasicSample.xaml.cs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.Labs.WinUI;
6+
7+
namespace TokenViewExperiment.Samples;
8+
9+
/// <summary>
10+
/// Sample of the basic properties of the TokenView
11+
/// </summary>
12+
[ToolkitSampleBoolOption("IsWrapped", false, Title = "IsWrapped")]
13+
[ToolkitSampleMultiChoiceOption("SelectionMode", "Single", "Multiple", Title = "Selection mode")]
14+
[ToolkitSample(id: nameof(TokenViewBasicSample), "TokenView", description: $"A sample for showing how to create and use a {nameof(TokenView)} control.")]
15+
public sealed partial class TokenViewBasicSample : Page
16+
{
17+
public TokenViewBasicSample()
18+
{
19+
this.InitializeComponent();
20+
}
21+
22+
// TODO: See https://github.com/CommunityToolkit/Labs-Windows/issues/149
23+
public static ListViewSelectionMode ConvertStringToListViewSelectionMode(string mode) => mode switch
24+
{
25+
"Single" => ListViewSelectionMode.Single,
26+
"Multiple" => ListViewSelectionMode.Multiple,
27+
_ => throw new System.NotImplementedException(),
28+
};
29+
}

‎components/TokenView/samples/TokenViewItemsSourceSample.xaml‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2+
<Page x:Class="TokenViewExperiment.Samples.TokenViewItemsSourceSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
7+
xmlns:local="using:TokenViewExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<StackPanel Orientation="Vertical"
12+
Spacing="12">
13+
<labs:TokenView x:Name="TokenView"
14+
CanRemoveTokens="{x:Bind CanRemoveTokens, Mode=OneWay}"
15+
ItemsSource="{x:Bind MyDataSet, Mode=OneWay}"
16+
SelectedIndex="1"
17+
SelectionMode="Single">
18+
<labs:TokenView.ItemTemplate>
19+
<DataTemplate x:DataType="local:MyDataModel">
20+
<Grid>
21+
<TextBlock Margin="16,0,16,0"
22+
Style="{StaticResource CaptionTextBlockStyle}"
23+
Text="{x:Bind Name}" />
24+
</Grid>
25+
</DataTemplate>
26+
</labs:TokenView.ItemTemplate>
27+
</labs:TokenView>
28+
<TextBlock Margin="0,0,12,0"
29+
VerticalAlignment="Center">
30+
<Run Text="Selected:" />
31+
<Run FontWeight="SemiBold"
32+
Text="{Binding SelectedItem.Name, ElementName=TokenView, FallbackValue='None'}" />
33+
</TextBlock>
34+
</StackPanel>
35+
</Page>

‎components/TokenView/samples/TokenViewItemsSourceSample.xaml.cs‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.Labs.WinUI;
6+
7+
namespace TokenViewExperiment.Samples;
8+
9+
/// <summary>
10+
/// Sample of the basic properties of the TokenView
11+
/// </summary>
12+
[ToolkitSampleBoolOption("CanRemoveTokens", false, Title = "Can tokens be removed")]
13+
[ToolkitSample(id: nameof(TokenViewItemsSourceSample), "TokenView Binding", description: $"A sample for showing how to create and use a {nameof(TokenView)} control.")]
14+
public sealed partial class TokenViewItemsSourceSample : Page
15+
{
16+
public ObservableCollection<MyDataModel> MyDataSet = new() {
17+
new()
18+
{
19+
Name = "Item 1",
20+
},
21+
new()
22+
{
23+
Name = "Item 2",
24+
},
25+
new()
26+
{
27+
Name = "Item 3",
28+
},
29+
new()
30+
{
31+
Name = "Item 4",
32+
},
33+
new()
34+
{
35+
Name = "Item 5",
36+
},
37+
new()
38+
{
39+
Name = "Item 6",
40+
},
41+
new()
42+
{
43+
Name = "Item 7",
44+
},
45+
new()
46+
{
47+
Name = "Item 8",
48+
},
49+
new()
50+
{
51+
Name = "Item 9",
52+
},
53+
new()
54+
{
55+
Name = "Item 10",
56+
},
57+
new()
58+
{
59+
Name = "Item 11",
60+
},
61+
new()
62+
{
63+
Name = "Item 12",
64+
},
65+
};
66+
67+
public TokenViewItemsSourceSample()
68+
{
69+
this.InitializeComponent();
70+
}
71+
}
72+
73+
public class MyDataModel
74+
{
75+
public string? Name { get; set; }
76+
}

‎components/TokenView/samples/TokenViewRemoveSample.cs‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// Licensed to the .NET Foundation under one or more agreements.
2+
// The .NET Foundation licenses this file to you under the MIT license.
3+
// See the LICENSE file in the project root for more information.
4+
5+
using CommunityToolkit.Labs.WinUI;
6+
7+
namespace TokenViewExperiment.Samples;
8+
9+
/// <summary>
10+
/// An example sample page of a custom control inheriting from Panel.
11+
/// </summary>
12+
[ToolkitSampleBoolOption("CanRemoveTokens", false, Title = "Can tokens be removed")]
13+
14+
[ToolkitSample(id: nameof(TokenViewRemoveSample), "Remove sample", description: $"A sample for showing how to create and use a {nameof(TokenView)} control.")]
15+
public sealed partial class TokenViewRemoveSample : Page
16+
{
17+
18+
public TokenViewRemoveSample()
19+
{
20+
this.InitializeComponent();
21+
}
22+
}

‎components/TokenView/samples/TokenViewRemoveSample.xaml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!-- Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information. -->
2+
<Page x:Class="TokenViewExperiment.Samples.TokenViewRemoveSample"
3+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6+
xmlns:labs="using:CommunityToolkit.Labs.WinUI"
7+
xmlns:local="using:TokenViewExperiment.Samples"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<labs:TokenView CanRemoveTokens="{x:Bind CanRemoveTokens, Mode=OneWay}"
12+
SelectionMode="Single">
13+
<labs:TokenItem Content="All" />
14+
<labs:TokenItem Content="Work" />
15+
<labs:TokenItem Content="Apps" />
16+
<labs:TokenItem Content="Documents" />
17+
<labs:TokenItem Content="Web"
18+
IsRemoveable="True" />
19+
<labs:TokenItem Content="Settings" />
20+
<labs:TokenItem Content="People" />
21+
<labs:TokenItem Content="Folders" />
22+
<labs:TokenItem Content="Photos" />
23+
</labs:TokenView>
24+
</Page>

0 commit comments

Comments
 (0)