Porting TokenizingTextBox

Directory.Build.props

@@ -9,6 +9,7 @@
     <ToolkitEffectSourceProject>$(RepositoryDirectory)\components\Effects\src\CommunityToolkit.WinUI.Effects.csproj</ToolkitEffectSourceProject>
     <ToolkitBehaviorSourceProject>$(RepositoryDirectory)\components\Behaviors\src\CommunityToolkit.WinUI.Behaviors.csproj</ToolkitBehaviorSourceProject>
     <ToolkitAnimationSourceProject>$(RepositoryDirectory)\components\Animations\src\CommunityToolkit.WinUI.Animations.csproj</ToolkitAnimationSourceProject>
+    <ToolkitPrimitiveSourceProject>$(RepositoryDirectory)\components\Primitives\src\CommunityToolkit.WinUI.Controls.Primitives.csproj</ToolkitPrimitiveSourceProject>
   </PropertyGroup>
 
   <PropertyGroup Condition=" '$(Configuration)' == 'Release' ">

components/TokenizingTextBox/OpenSolution.bat

@@ -0,0 +1,3 @@
+@ECHO OFF
+
+powershell ..\..\tooling\ProjectHeads\GenerateSingleSampleHeads.ps1 -componentPath %CD% %*

components/TokenizingTextBox/samples/Dependencies.props

@@ -0,0 +1,31 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>

components/TokenizingTextBox/samples/SampleDataType.cs

@@ -0,0 +1,26 @@
+// 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.
+
+namespace TokenizingTextBoxExperiment.Samples;
+
+/// <summary>
+/// Sample of strongly-typed data for <see cref="CommunityToolkit.WinUI.Controls.TokenizingTextBox"/>.
+/// </summary>
+public class SampleDataType
+{
+    /// <summary>
+    /// Gets or sets symbol to display.
+    /// </summary>
+    public Symbol Icon { get; set; }
+
+    /// <summary>
+    /// Gets or sets text to display.
+    /// </summary>
+    public string? Text { get; set; }
+
+    public override string ToString()
+    {
+        return Text!;
+    }
+}

components/TokenizingTextBox/samples/TokenizingTextBox.Samples.csproj

@@ -0,0 +1,8 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <PropertyGroup>
+    <ToolkitComponentName>TokenizingTextBox</ToolkitComponentName>
+  </PropertyGroup>
+
+  <!-- Sets this up as a toolkit component's sample project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SampleProject.props" />
+</Project>

components/TokenizingTextBox/samples/TokenizingTextBox.md

@@ -0,0 +1,19 @@
+---
+title: TokenizingTextBox
+author: michael-hawker
+description: A text input control that auto-suggests and displays token items.
+keywords: TokenizingTextBox, control, tokens
+dev_langs:
+  - csharp
+category: Controls
+subcategory: Input
+discussion-id: 0
+issue-id: 0
+icon: Assets/TokenizingTextBox.png
+---
+
+# TokenizingTextBox
+
+The [TokenizingTextBox](/dotnet/api/microsoft.toolkit.uwp.ui.controls.tokenizingtextbox) is an advanced [AutoSuggestBox](/uwp/api/Windows.UI.Xaml.Controls.AutoSuggestBox) which will display selected items as tokens within the textbox. A user can easily see the picked items or remove them easily.
+
+> [!Sample TokenizingTextBoxSample]

components/TokenizingTextBox/samples/TokenizingTextBoxSample.xaml

@@ -0,0 +1,83 @@
+<!--  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.  -->
+<Page x:Class="TokenizingTextBoxExperiment.Samples.TokenizingTextBoxSample"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:controls="using:CommunityToolkit.WinUI.Controls"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:local="using:TokenizingTextBoxExperiment.Samples"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      xmlns:ui="using:CommunityToolkit.WinUI"
+      mc:Ignorable="d">
+
+    <StackPanel Orientation="Vertical"
+                Spacing="4">
+        <controls:TokenizingTextBox x:Name="TokenBox"
+                                    MaxWidth="620"
+                                    HorizontalAlignment="Left"
+                                    ItemClick="TokenBox_ItemClick"
+                                    ItemsSource="{x:Bind SelectedTokens, Mode=TwoWay}"
+                                    Loaded="TokenBox_Loaded"
+                                    MaximumTokens="5"
+                                    PlaceholderText="Add actions"
+                                    QueryIcon="{ui:FontIconSource Glyph=&#xE721;,
+                                                                  FontSize=12}"
+                                    SuggestedItemsSource="{x:Bind _samples, Mode=OneWay}"
+                                    TextChanged="TextChanged"
+                                    TextMemberPath="Text"
+                                    TokenDelimiter=","
+                                    TokenItemAdding="TokenItemCreating">
+            <controls:TokenizingTextBox.Header>
+                <TextBlock>
+                    <Run Text="Start typing and select up to" />
+                    <Run FontWeight="SemiBold"
+                         Text="{Binding MaximumTokens, ElementName=TokenBox, Mode=OneWay}" />
+                    <Run Text="actions" />
+                </TextBlock>
+            </controls:TokenizingTextBox.Header>
+            <controls:TokenizingTextBox.SuggestedItemTemplate>
+                <DataTemplate>
+                    <StackPanel Orientation="Horizontal">
+                        <Viewbox Width="16">
+                            <SymbolIcon Symbol="{Binding Icon}" />
+                        </Viewbox>
+                        <TextBlock Padding="8,0,0,0"
+                                   Text="{Binding Text}" />
+                    </StackPanel>
+                </DataTemplate>
+            </controls:TokenizingTextBox.SuggestedItemTemplate>
+            <controls:TokenizingTextBox.TokenItemTemplate>
+                <DataTemplate>
+                    <StackPanel Orientation="Horizontal">
+                        <Viewbox Width="16">
+                            <SymbolIcon Symbol="{Binding Icon}" />
+                        </Viewbox>
+
+                        <TextBlock Padding="8,0,0,0"
+                                   Text="{Binding Text}" />
+                    </StackPanel>
+                </DataTemplate>
+            </controls:TokenizingTextBox.TokenItemTemplate>
+        </controls:TokenizingTextBox>
+
+
+        <TextBlock Margin="0,24,0,0"
+                   FontWeight="SemiBold"
+                   Text="Text:" />
+        <TextBlock x:Name="currentEdit" />
+
+        <TextBlock Margin="0,24,0,0"
+                   FontWeight="SemiBold"
+                   Text="SelectedTokenText:" />
+        <TextBlock x:Name="selectedItemsString" />
+
+        <TextBlock Margin="0,24,0,0"
+                   FontWeight="SemiBold"
+                   Text="Items:" />
+        <ItemsControl ItemsSource="{x:Bind SelectedTokens, Mode=OneWay}" />
+
+        <TextBlock Margin="0,24,0,0"
+                   FontWeight="SemiBold"
+                   Text="Clicked item:" />
+        <TextBlock x:Name="clickedItem" />
+    </StackPanel>
+</Page>

components/TokenizingTextBox/samples/TokenizingTextBoxSample.xaml.cs

@@ -0,0 +1,96 @@
+// 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.
+
+using CommunityToolkit.WinUI.Controls;
+
+namespace TokenizingTextBoxExperiment.Samples;
+
+[ToolkitSample(id: nameof(TokenizingTextBoxSample), "Basic sample", description: $"A sample for showing how to create and use a {nameof(TokenizingTextBox)}.")]
+public sealed partial class TokenizingTextBoxSample : Page
+{
+    public readonly List<SampleDataType> _samples = new List<SampleDataType>()
+        {
+            new SampleDataType() { Text = "Account", Icon = Symbol.Account },
+            new SampleDataType() { Text = "Add friend", Icon = Symbol.AddFriend },
+            new SampleDataType() { Text = "Attach", Icon = Symbol.Attach },
+            new SampleDataType() { Text = "Attach camera", Icon = Symbol.AttachCamera },
+            new SampleDataType() { Text = "Audio", Icon = Symbol.Audio },
+            new SampleDataType() { Text = "Block contact", Icon = Symbol.BlockContact },
+            new SampleDataType() { Text = "Calculator", Icon = Symbol.Calculator },
+            new SampleDataType() { Text = "Calendar", Icon = Symbol.Calendar },
+            new SampleDataType() { Text = "Camera", Icon = Symbol.Camera },
+            new SampleDataType() { Text = "Contact", Icon = Symbol.Contact },
+            new SampleDataType() { Text = "Favorite", Icon = Symbol.Favorite },
+            new SampleDataType() { Text = "Link", Icon = Symbol.Link },
+            new SampleDataType() { Text = "Mail", Icon = Symbol.Mail },
+            new SampleDataType() { Text = "Map", Icon = Symbol.Map },
+            new SampleDataType() { Text = "Phone", Icon = Symbol.Phone },
+            new SampleDataType() { Text = "Pin", Icon = Symbol.Pin },
+            new SampleDataType() { Text = "Rotate", Icon = Symbol.Rotate },
+            new SampleDataType() { Text = "Rotate camera", Icon = Symbol.RotateCamera },
+            new SampleDataType() { Text = "Send", Icon = Symbol.Send },
+            new SampleDataType() { Text = "Tags", Icon = Symbol.Tag },
+            new SampleDataType() { Text = "UnFavorite", Icon = Symbol.UnFavorite },
+            new SampleDataType() { Text = "UnPin", Icon = Symbol.UnPin },
+            new SampleDataType() { Text = "Zoom", Icon = Symbol.Zoom },
+            new SampleDataType() { Text = "ZoomIn", Icon = Symbol.ZoomIn },
+            new SampleDataType() { Text = "ZoomOut", Icon = Symbol.ZoomOut },
+        };
+
+    public ObservableCollection<SampleDataType> SelectedTokens { get; set; }
+
+    public TokenizingTextBoxSample()
+    {
+        this.InitializeComponent();
+        SelectedTokens = new()
+        {
+            _samples[0],
+            _samples[1]
+        };
+
+    }
+
+    private void TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
+    {
+        currentEdit.Text = TokenBox.Text;
+        SetSelectedTokenText();
+    }
+
+    private void SetSelectedTokenText()
+    {
+        selectedItemsString.Text = TokenBox.SelectedTokenText;
+    }
+
+    private void TokenItemCreating(object sender, TokenItemAddingEventArgs e)
+    {
+        // Take the user's text and convert it to our data type (if we have a matching one).
+#if !HAS_UNO
+        e.Item = _samples.FirstOrDefault((item) => item.Text!.Contains(e.TokenText, StringComparison.CurrentCultureIgnoreCase));
+#else
+        e.Item = _samples.FirstOrDefault((item) => item.Text!.Contains(e.TokenText));
+#endif
+        // Otherwise, create a new version of our data type
+        if (e.Item == null)
+        {
+            e.Item = new SampleDataType()
+            {
+                Text = e.TokenText,
+                Icon = Symbol.OutlineStar
+            };
+        }
+    }
+
+    private void TokenBox_ItemClick(object sender, ItemClickEventArgs e)
+    {
+        if (e.ClickedItem is SampleDataType selectedItem)
+        {
+            clickedItem.Text = selectedItem.Text!;
+        }
+    }
+
+    private void TokenBox_Loaded(object sender, RoutedEventArgs e)
+    {
+        SetSelectedTokenText();
+    }
+}

components/TokenizingTextBox/src/AdditionalAssemblyInfo.cs

@@ -0,0 +1,13 @@
+// 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.
+
+using System.Runtime.CompilerServices;
+
+// These `InternalsVisibleTo` calls are intended to make it easier for
+// for any internal code to be testable in all the different test projects
+// used with the Labs infrastructure.
+[assembly: InternalsVisibleTo("TokenizingTextBox.Tests.Uwp")]
+[assembly: InternalsVisibleTo("TokenizingTextBox.Tests.WinAppSdk")]
+[assembly: InternalsVisibleTo("CommunityToolkit.Tests.Uwp")]
+[assembly: InternalsVisibleTo("CommunityToolkit.Tests.WinAppSdk")]

components/TokenizingTextBox/src/CommunityToolkit.WinUI.Controls.TokenizingTextBox.csproj

@@ -0,0 +1,23 @@
+<Project Sdk="MSBuild.Sdk.Extras/3.0.23">
+  <PropertyGroup>
+    <ToolkitComponentName>TokenizingTextBox</ToolkitComponentName>
+    <Description>This package contains TokenizingTextBox.</Description>
+    <Version>0.0.1</Version>
+
+    <!-- Rns suffix is required for namespaces shared across projects. See https://github.com/CommunityToolkit/Labs-Windows/issues/152 -->
+    <RootNamespace>CommunityToolkit.WinUI.Controls.TokenizingTextBoxRns</RootNamespace>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <ProjectReference Include="$(ToolkitExtensionSourceProject)" />
+    <ProjectReference Include="$(ToolkitHelperSourceProject)" />
+    <ProjectReference Include="$(ToolkitPrimitiveSourceProject)" />    
+  </ItemGroup>
+
+  <!-- Sets this up as a toolkit component's source project -->
+  <Import Project="$(ToolingDirectory)\ToolkitComponent.SourceProject.props" />
+
+   <PropertyGroup>
+    <PackageId>$(PackageIdPrefix).$(PackageIdVariant).Controls.$(ToolkitComponentName)</PackageId>
+  </PropertyGroup>
+</Project>

components/TokenizingTextBox/src/Dependencies.props

@@ -0,0 +1,31 @@
+<!--
+    WinUI 2 under UWP uses TargetFramework uap10.0.*
+    WinUI 3 under WinAppSdk uses TargetFramework net6.0-windows10.*
+    However, under Uno-powered platforms, both WinUI 2 and 3 can share the same TargetFramework.
+
+    MSBuild doesn't play nicely with this out of the box, so we've made it easy for you.
+
+    For .NET Standard packages, you can use the Nuget Package Manager in Visual Studio.
+    For UWP / WinAppSDK / Uno packages, place the package references here.
+-->
+<Project>
+    <!-- WinUI 2 / UWP -->
+    <ItemGroup Condition="'$(IsUwp)' == 'true'">
+        <!-- <PackageReference Include="Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 2 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '2'">
+        <!-- <PackageReference Include="Uno.Microsoft.Toolkit.Uwp.UI.Controls.Primitives" Version="7.1.11"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / WinAppSdk -->
+    <ItemGroup Condition="'$(IsWinAppSdk)' == 'true'">
+        <!-- <PackageReference Include="CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.2"/> -->
+    </ItemGroup>
+
+    <!-- WinUI 3 / Uno -->
+    <ItemGroup Condition="'$(IsUno)' == 'true' AND '$(WinUIMajorVersion)' == '3'">
+        <!-- <PackageReference Include="Uno.CommunityToolkit.WinUI.UI.Controls.Primitives" Version="7.1.100-dev.15.g12261e2626"/> -->
+    </ItemGroup>
+</Project>

components/TokenizingTextBox/src/ITokenStringContainer.cs

@@ -0,0 +1,21 @@
+// 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.
+
+namespace CommunityToolkit.WinUI.Controls;
+
+/// <summary>
+/// Provides access to unresolved token string values within the tokenizing text box control
+/// </summary>
+public interface ITokenStringContainer
+{
+    /// <summary>
+    /// Gets or sets the string text for this unresolved token
+    /// </summary>
+    string Text { get; set; }
+
+    /// <summary>
+    /// Gets a value indicating whether this is the last text based token in the collection as it will always remain at the end.
+    /// </summary>
+    bool IsLast { get; }
+}