fix #1633

src/Snap.Hutao/Snap.Hutao/App.xaml

@@ -7,7 +7,6 @@
             <ResourceDictionary.MergedDictionaries>
                 <XamlControlsResources/>
                 <ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.SettingsControls/SettingsCard/SettingsCard.xaml"/>
-                <ResourceDictionary Source="ms-appx:///CommunityToolkit.WinUI.Controls.TokenizingTextBox/TokenizingTextBox.xaml"/>
                 <ResourceDictionary Source="ms-appx:///CommunityToolkit.Labs.WinUI.TokenView/TokenItem/TokenItem.xaml"/>
                 <ResourceDictionary Source="ms-appx:///UI/Xaml/Control/Elevation.xaml"/>
                 <ResourceDictionary Source="ms-appx:///UI/Xaml/Control/ItemIcon.xaml"/>
@@ -39,6 +38,7 @@
                 <ResourceDictionary Source="ms-appx:///UI/Xaml/Control/Theme/TransitionCollection.xaml"/>
                 <ResourceDictionary Source="ms-appx:///UI/Xaml/Control/Theme/Uri.xaml"/>
                 <ResourceDictionary Source="ms-appx:///UI/Xaml/Control/Theme/WindowOverride.xaml"/>
+                <ResourceDictionary Source="ms-appx:///UI/Xaml/Control/TokenizingTextBox/TokenizingTextBox.xaml"/>
             </ResourceDictionary.MergedDictionaries>
 
             <Style

src/Snap.Hutao/Snap.Hutao/Resource/Localization/SH.resx

@@ -162,6 +162,12 @@
   <data name="ControlPanelPanelSelectorDropdownListName" xml:space="preserve">
     <value>列表</value>
   </data>
+  <data name="ControlTokenizingTextBoxRemoveMenuItem" xml:space="preserve">
+    <value>删除</value>
+  </data>
+  <data name="ControlTokenizingTextBoxSelectAllMenuItem" xml:space="preserve">
+    <value>选择全部</value>
+  </data>
   <data name="CoreExceptionServiceDatabaseCorruptedMessage" xml:space="preserve">
     <value>数据库已损坏：{0}</value>
   </data>

src/Snap.Hutao/Snap.Hutao/Snap.Hutao.csproj

@@ -115,6 +115,7 @@
     <None Remove="UI\Xaml\Control\Theme\TransitionCollection.xaml" />
     <None Remove="UI\Xaml\Control\Theme\Uri.xaml" />
     <None Remove="UI\Xaml\Control\Theme\WindowOverride.xaml" />
+    <None Remove="UI\Xaml\Control\TokenizingTextBox\TokenizingTextBox.xaml" />
     <None Remove="GuideWindow.xaml" />
     <None Remove="IdentifyMonitorWindow.xaml" />
     <None Remove="IdentityStructs.json" />
@@ -421,4 +422,9 @@
       <Generator>MSBuild:Compile</Generator>
     </Page>
   </ItemGroup>
+  <ItemGroup>
+    <Page Update="UI\Xaml\Control\TokenizingTextBox\TokenizingTextBox.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
 </Project>

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/AutoSuggestBox/AutoSuggestTokenBox.cs

@@ -1,12 +1,10 @@
 // Copyright (c) DGP Studio. All rights reserved.
 // Licensed under the MIT license.
 
-using CommunityToolkit.WinUI;
-using CommunityToolkit.WinUI.Controls;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
-using Microsoft.UI.Xaml.Controls.Primitives;
 using Snap.Hutao.UI.Input;
+using Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
 using System.Collections;
 
 namespace Snap.Hutao.UI.Xaml.Control.AutoSuggestBox;
@@ -14,47 +12,38 @@ namespace Snap.Hutao.UI.Xaml.Control.AutoSuggestBox;
 [DependencyProperty("FilterCommand", typeof(ICommand))]
 [DependencyProperty("FilterCommandParameter", typeof(object))]
 [DependencyProperty("AvailableTokens", typeof(IReadOnlyDictionary<string, SearchToken>))]
-internal sealed partial class AutoSuggestTokenBox : TokenizingTextBox
+internal sealed partial class AutoSuggestTokenBox : TokenizingTextBox.TokenizingTextBox
 {
     public AutoSuggestTokenBox()
     {
-        DefaultStyleKey = typeof(TokenizingTextBox);
+        DefaultStyleKey = typeof(TokenizingTextBox.TokenizingTextBox);
-        TextChanged += OnFilterSuggestionRequested;
-        QuerySubmitted += OnQuerySubmitted;
-        TokenItemAdding += OnTokenItemAdding;
-        TokenItemAdded += OnTokenItemCollectionChanged;
-        TokenItemRemoved += OnTokenItemCollectionChanged;
-        Loaded += OnLoaded;
     }
 
-    private void OnLoaded(object sender, RoutedEventArgs e)
+    public IEnumerable<SearchToken> Tokens
     {
-        if (this.FindDescendant("SuggestionsPopup") is Popup { Child: Border { Child: ListView listView } border })
+        get => ((IList)ItemsSource).OfType<SearchToken>();
+    }
+
+    public override void OnTextChanged(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
+    {
+        if (IsTokenLimitReached())
         {
-            IAppResourceProvider appResourceProvider = this.ServiceProvider().GetRequiredService<IAppResourceProvider>();
+            return;
-
-            listView.Background = null;
-            listView.Margin = appResourceProvider.GetResource<Thickness>("AutoSuggestListPadding");
-
-            border.Background = appResourceProvider.GetResource<Microsoft.UI.Xaml.Media.Brush>("AutoSuggestBoxSuggestionsListBackground");
-            CornerRadius overlayCornerRadius = appResourceProvider.GetResource<CornerRadius>("OverlayCornerRadius");
-            CornerRadiusFilterConverter cornerRadiusFilterConverter = new() { Filter = CornerRadiusFilterKind.Bottom };
-            border.CornerRadius = (CornerRadius)cornerRadiusFilterConverter.Convert(overlayCornerRadius, typeof(CornerRadius), default, default);
         }
-    }
 
-    private void OnFilterSuggestionRequested(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
-    {
         if (string.IsNullOrWhiteSpace(Text))
         {
             sender.ItemsSource = AvailableTokens
+                .ExceptBy(Tokens, kvp => kvp.Value)
                 .OrderBy(kvp => kvp.Value.Kind)
+                .ThenBy(kvp => kvp.Value.Order)
                 .Select(kvp => kvp.Value);
         }
 
         if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
         {
             sender.ItemsSource = AvailableTokens
+                .ExceptBy(Tokens, kvp => kvp.Value)
                 .Where(kvp => kvp.Value.Value.Contains(Text, StringComparison.OrdinalIgnoreCase))
                 .OrderBy(kvp => kvp.Value.Kind)
                 .ThenBy(kvp => kvp.Value.Order)
@@ -63,7 +52,7 @@ internal sealed partial class AutoSuggestTokenBox : TokenizingTextBox
         }
     }
 
-    private void OnQuerySubmitted(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
+    public override void OnQuerySubmitted(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
     {
         if (args.ChosenSuggestion is not null)
         {
@@ -73,7 +62,7 @@ internal sealed partial class AutoSuggestTokenBox : TokenizingTextBox
         CommandInvocation.TryExecute(FilterCommand, FilterCommandParameter);
     }
 
-    private void OnTokenItemAdding(TokenizingTextBox sender, TokenItemAddingEventArgs args)
+    public override void OnTokenItemAdding(TokenizingTextBox.TokenizingTextBox sender, TokenItemAddingEventArgs args)
     {
         if (string.IsNullOrWhiteSpace(args.TokenText))
         {
@@ -90,13 +79,21 @@ internal sealed partial class AutoSuggestTokenBox : TokenizingTextBox
         }
     }
 
-    private void OnTokenItemCollectionChanged(TokenizingTextBox sender, object args)
+    public override void OnTokenItemAdded(TokenizingTextBox.TokenizingTextBox sender, object args)
     {
         if (args is SearchToken { Kind: SearchTokenKind.None } token)
         {
-            ((IList)sender.ItemsSource).Remove(token);
+            ((IList)ItemsSource).Remove(token);
         }
 
+        base.OnTokenItemAdded(sender, args);
+
+        FilterCommand.TryExecute(FilterCommandParameter);
+    }
+
+    public override void OnTokenItemRemoved(TokenizingTextBox.TokenizingTextBox sender, object args)
+    {
+        base.OnTokenItemRemoved(sender, args);
         FilterCommand.TryExecute(FilterCommandParameter);
     }
 }

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/ITokenStringContainer.cs

@@ -0,0 +1,11 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+namespace Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
+
+internal interface ITokenStringContainer
+{
+    string Text { get; set; }
+
+    bool IsLast { get; }
+}

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/InterspersedObservableCollection.cs

@@ -0,0 +1,355 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using CommunityToolkit.WinUI.Helpers;
+using System.Collections;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+
+namespace Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
+
+internal sealed class InterspersedObservableCollection : IList, IEnumerable<object>, INotifyCollectionChanged
+{
+    private readonly Dictionary<int, object> interspersedObjects = [];
+    private bool isInsertingOriginal;
+
+    public InterspersedObservableCollection()
+        : this(new ObservableCollection<object>())
+    {
+    }
+
+    public InterspersedObservableCollection(object itemsSource)
+    {
+        if (itemsSource is not IList list)
+        {
+            throw new ArgumentException("The input items source must be assignable to the System.Collections.IList type.");
+        }
+
+        ItemsSource = list;
+
+        if (ItemsSource is INotifyCollectionChanged notifier)
+        {
+            WeakEventListener<InterspersedObservableCollection, object?, NotifyCollectionChangedEventArgs> weakPropertyChangedListener = new(this)
+            {
+                OnEventAction = static (instance, source, eventArgs) => instance.OnCollectionChanged(source, eventArgs),
+                OnDetachAction = (weakEventListener) => notifier.CollectionChanged -= weakEventListener.OnEvent, // Use Local Reference Only
+            };
+            notifier.CollectionChanged += weakPropertyChangedListener.OnEvent;
+        }
+    }
+
+    public event NotifyCollectionChangedEventHandler? CollectionChanged;
+
+    public IList ItemsSource { get; private set; }
+
+    public bool IsFixedSize => false;
+
+    public bool IsReadOnly => false;
+
+    public int Count => ItemsSource.Count + interspersedObjects.Count;
+
+    public bool IsSynchronized => false;
+
+    public object SyncRoot => new();
+
+    public object? this[int index]
+    {
+        get
+        {
+            if (interspersedObjects.TryGetValue(index, out object? value))
+            {
+                return value;
+            }
+
+            // Find out the number of elements in our dictionary with keys below ours.
+            return ItemsSource[ToInnerIndex(index)];
+        }
+        set => throw new NotImplementedException();
+    }
+
+    public void Insert(int index, object? obj)
+    {
+        MoveKeysForward(index, 1); // Move existing keys at index over to make room for new item
+
+        ArgumentNullException.ThrowIfNull(obj);
+        interspersedObjects[index] = obj;
+
+        CollectionChanged?.Invoke(this, new(NotifyCollectionChangedAction.Add, obj, index));
+    }
+
+    public void InsertAt(int outerIndex, object obj)
+    {
+        // Find out our closest index based on interspersed keys
+        int index = outerIndex - interspersedObjects.Keys.Count(key => key < outerIndex); // Note: we exclude the = from ToInnerIndex here
+
+        // If we're inserting where we would normally, then just do that, otherwise we need extra room to not move other keys
+        if (index != outerIndex)
+        {
+            MoveKeysForward(outerIndex, 1); // Skip over until the current spot unlike normal
+
+            isInsertingOriginal = true; // Prevent Collection callback from moving keys forward on insert
+        }
+
+        // Insert into original collection
+        ItemsSource.Insert(index, obj);
+
+        // TODO: handle manipulation/notification if not observable
+    }
+
+    public IEnumerator<object> GetEnumerator()
+    {
+        int i = 0; // Index of our current 'virtual' position
+        int count = 0;
+        int realized = 0;
+
+        foreach (object element in ItemsSource)
+        {
+            while (interspersedObjects.TryGetValue(i++, out object? obj))
+            {
+                realized++; // Track interspersed items used
+
+                yield return obj;
+            }
+
+            count++; // Track original items used
+
+            yield return element;
+        }
+
+        // Add any remaining items in our interspersed collection past the index we reached in the original collection
+        if (realized < interspersedObjects.Count)
+        {
+            // Only select items past our current index, but make sure we've sorted them by their index as well.
+            foreach ((int _, object value) in interspersedObjects.Where(kvp => kvp.Key >= i).OrderBy(kvp => kvp.Key))
+            {
+                yield return value;
+            }
+        }
+    }
+
+    public int Add(object? value)
+    {
+        ArgumentNullException.ThrowIfNull(value);
+        int index = ItemsSource.Add(value); //// TODO: If the collection isn't observable, we should do manipulations/notifications here...?
+        return ToOuterIndex(index);
+    }
+
+    public void Clear()
+    {
+        ItemsSource.Clear();
+        interspersedObjects.Clear();
+    }
+
+    public bool Contains(object? value)
+    {
+        ArgumentNullException.ThrowIfNull(value);
+        return interspersedObjects.ContainsValue(value) || ItemsSource.Contains(value);
+    }
+
+    public int IndexOf(object? value)
+    {
+        ArgumentNullException.ThrowIfNull(value);
+        if (ItemKeySearch(value, out int key))
+        {
+            return key;
+        }
+
+        int index = ItemsSource.IndexOf(value);
+
+        // Find out the number of elements in our dictionary with keys below ours.
+        return index == -1 ? -1 : ToOuterIndex(index);
+    }
+
+    public void Remove(object? value)
+    {
+        ArgumentNullException.ThrowIfNull(value);
+        if (ItemKeySearch(value, out int key))
+        {
+            interspersedObjects.Remove(key);
+
+            MoveKeysBackward(key, 1); // Move other interspersed items back
+
+            CollectionChanged?.Invoke(this, new NotifyCollectionChangedEventArgs(NotifyCollectionChangedAction.Remove, value, key));
+
+            return;
+        }
+
+        ItemsSource.Remove(value);
+    }
+
+    public void RemoveAt(int index)
+    {
+        throw new NotImplementedException();
+    }
+
+    public void CopyTo(Array array, int index)
+    {
+        throw new NotImplementedException();
+    }
+
+    IEnumerator IEnumerable.GetEnumerator()
+    {
+        return GetEnumerator();
+    }
+
+    private void OnCollectionChanged(object? source, NotifyCollectionChangedEventArgs eventArgs)
+    {
+        switch (eventArgs.Action)
+        {
+            case NotifyCollectionChangedAction.Add:
+                // Shift any existing interspersed items after the inserted item
+                ArgumentNullException.ThrowIfNull(eventArgs.NewItems);
+                int count = eventArgs.NewItems.Count;
+
+                if (count > 0)
+                {
+                    if (!isInsertingOriginal)
+                    {
+                        MoveKeysForward(eventArgs.NewStartingIndex, count);
+                    }
+
+                    isInsertingOriginal = false;
+
+                    CollectionChanged?.Invoke(this, new(NotifyCollectionChangedAction.Add, eventArgs.NewItems, ToOuterIndex(eventArgs.NewStartingIndex)));
+                }
+
+                break;
+            case NotifyCollectionChangedAction.Remove:
+                ArgumentNullException.ThrowIfNull(eventArgs.OldItems);
+                count = eventArgs.OldItems.Count;
+
+                if (count > 0)
+                {
+                    int outerIndex = ToOuterIndexAfterRemoval(eventArgs.OldStartingIndex);
+
+                    MoveKeysBackward(outerIndex, count);
+
+                    CollectionChanged?.Invoke(this, new(NotifyCollectionChangedAction.Remove, eventArgs.OldItems, outerIndex));
+                }
+
+                break;
+            case NotifyCollectionChangedAction.Reset:
+
+                ReadjustKeys();
+
+                // TODO: ListView doesn't like this notification and throws a visual tree duplication exception...
+                // Not sure what to do with that yet...
+                CollectionChanged?.Invoke(this, eventArgs);
+                break;
+        }
+    }
+
+    private void MoveKeysForward(int pivot, int amount)
+    {
+        // Sort in reverse order to work from highest to lowest
+        foreach (int key in interspersedObjects.Keys.OrderByDescending(v => v))
+        {
+            if (key < pivot) //// If it's the last item in the collection, we still want to move our last key, otherwise we'd use <=
+            {
+                break;
+            }
+
+            interspersedObjects[key + amount] = interspersedObjects[key];
+            interspersedObjects.Remove(key);
+        }
+    }
+
+    private void MoveKeysBackward(int pivot, int amount)
+    {
+        // Sort in regular order to work from the earliest indices onwards
+        foreach (int key in interspersedObjects.Keys.OrderBy(v => v))
+        {
+            // Skip elements before the pivot point
+            if (key <= pivot) //// Include pivot point as that's the point where we start modifying beyond
+            {
+                continue;
+            }
+
+            interspersedObjects[key - amount] = interspersedObjects[key];
+            interspersedObjects.Remove(key);
+        }
+    }
+
+    private void ReadjustKeys()
+    {
+        int count = ItemsSource.Count;
+        int existing = 0;
+
+        foreach (int key in interspersedObjects.Keys.OrderBy(v => v))
+        {
+            if (key <= count)
+            {
+                existing++;
+                continue;
+            }
+
+            interspersedObjects[count + existing++] = interspersedObjects[key];
+            interspersedObjects.Remove(key);
+        }
+    }
+
+    private int ToInnerIndex(int outerIndex)
+    {
+        ArgumentOutOfRangeException.ThrowIfGreaterThanOrEqual(outerIndex, Count);
+
+        if (interspersedObjects.ContainsKey(outerIndex))
+        {
+            throw new ArgumentException("The outer index can't be inserted as a key to the original collection.");
+        }
+
+        return outerIndex - interspersedObjects.Keys.Count(key => key <= outerIndex);
+    }
+
+    private int ToOuterIndex(int innerIndex)
+    {
+        ArgumentOutOfRangeException.ThrowIfGreaterThanOrEqual(innerIndex, ItemsSource.Count);
+
+        foreach ((int key, object _) in interspersedObjects.OrderBy(v => v.Key))
+        {
+            if (innerIndex >= key)
+            {
+                innerIndex++;
+                continue;
+            }
+
+            break;
+        }
+
+        return innerIndex;
+    }
+
+    private int ToOuterIndexAfterRemoval(int innerIndexToProject)
+    {
+        ArgumentOutOfRangeException.ThrowIfGreaterThanOrEqual(innerIndexToProject, ItemsSource.Count + 1);
+
+        //// TODO: Deal with bounds (0 / Count)? Or is it the same?
+
+        foreach ((int key, object _) in interspersedObjects.OrderBy(v => v.Key))
+        {
+            if (innerIndexToProject >= key)
+            {
+                innerIndexToProject++;
+                continue;
+            }
+
+            break;
+        }
+
+        return innerIndexToProject;
+    }
+
+    private bool ItemKeySearch(object value, out int key)
+    {
+        if (interspersedObjects.ContainsValue(value))
+        {
+            key = value is null
+                ? interspersedObjects.First(kvp => kvp.Value is null).Key
+                : interspersedObjects.First(kvp => kvp.Value.Equals(value)).Key;
+
+            return true;
+        }
+
+        key = default;
+        return false;
+    }
+}

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/PretokenStringContainer.cs

@@ -0,0 +1,27 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+
+namespace Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
+
+[DependencyProperty("Text", typeof(string))]
+internal sealed partial class PretokenStringContainer : DependencyObject, ITokenStringContainer
+{
+    public PretokenStringContainer(bool isLast = false)
+    {
+        IsLast = isLast;
+    }
+
+    public PretokenStringContainer(string text)
+    {
+        Text = text;
+    }
+
+    public bool IsLast { get; private set; }
+
+    public override string ToString()
+    {
+        return Text;
+    }
+}

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/TokenItemAddingEventArgs.cs

@@ -0,0 +1,18 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using CommunityToolkit.Common.Deferred;
+
+namespace Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
+
+internal sealed class TokenItemAddingEventArgs : DeferredCancelEventArgs
+{
+    public TokenItemAddingEventArgs(string token)
+    {
+        TokenText = token;
+    }
+
+    public string TokenText { get; private set; }
+
+    public object? Item { get; set; }
+}

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/TokenItemRemovingEventArgs.cs

@@ -0,0 +1,19 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using CommunityToolkit.Common.Deferred;
+
+namespace Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
+
+internal sealed class TokenItemRemovingEventArgs : DeferredCancelEventArgs
+{
+    public TokenItemRemovingEventArgs(object item, TokenizingTextBoxItem token)
+    {
+        Item = item;
+        Token = token;
+    }
+
+    public object Item { get; private set; }
+
+    public TokenizingTextBoxItem Token { get; private set; }
+}

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/TokenizingTextBox.cs

@@ -0,0 +1,902 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using CommunityToolkit.WinUI;
+using CommunityToolkit.WinUI.Helpers;
+using Microsoft.UI.Dispatching;
+using Microsoft.UI.Input;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Automation.Peers;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Input;
+using Windows.ApplicationModel.DataTransfer;
+using Windows.Foundation.Metadata;
+using Windows.UI.Core;
+using VirtualKey = Windows.System.VirtualKey;
+
+namespace Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
+
+[DependencyProperty("AutoSuggestBoxStyle", typeof(Style))]
+[DependencyProperty("AutoSuggestBoxTextBoxStyle", typeof(Style))]
+[DependencyProperty("MaximumTokens", typeof(int), -1, nameof(OnMaximumTokensChanged))]
+[DependencyProperty("PlaceholderText", typeof(string))]
+[DependencyProperty("QueryIcon", typeof(IconSource))]
+[DependencyProperty("SuggestedItemsSource", typeof(object))]
+[DependencyProperty("SuggestedItemTemplate", typeof(DataTemplate))]
+[DependencyProperty("SuggestedItemTemplateSelector", typeof(DataTemplateSelector))]
+[DependencyProperty("SuggestedItemContainerStyle", typeof(Style))]
+[DependencyProperty("TabNavigateBackOnArrow", typeof(bool), false)]
+[DependencyProperty("Text", typeof(string), default, nameof(OnTextPropertyChanged))]
+[DependencyProperty("TextMemberPath", typeof(string))]
+[DependencyProperty("TokenItemTemplate", typeof(DataTemplate))]
+[DependencyProperty("TokenItemTemplateSelector", typeof(DataTemplateSelector))]
+[DependencyProperty("TokenDelimiter", typeof(string), " ")]
+[DependencyProperty("TokenSpacing", typeof(double))]
+[TemplatePart(Name = NormalState, Type = typeof(VisualState))]
+[TemplatePart(Name = PointerOverState, Type = typeof(VisualState))]
+[TemplatePart(Name = FocusedState, Type = typeof(VisualState))]
+[TemplatePart(Name = UnfocusedState, Type = typeof(VisualState))]
+[TemplatePart(Name = MaxReachedState, Type = typeof(VisualState))]
+[TemplatePart(Name = MaxUnreachedState, Type = typeof(VisualState))]
+internal partial class TokenizingTextBox : ListViewBase
+{
+    public const string NormalState = "Normal";
+    public const string PointerOverState = "PointerOver";
+    public const string FocusedState = "Focused";
+    public const string UnfocusedState = "Unfocused";
+    public const string MaxReachedState = "MaxReached";
+    public const string MaxUnreachedState = "MaxUnreached";
+
+    private InterspersedObservableCollection innerItemsSource;
+    private ITokenStringContainer currentTextEdit; // Don't update this directly outside of initialization, use UpdateCurrentTextEdit Method
+    private ITokenStringContainer lastTextEdit;
+
+    public TokenizingTextBox()
+    {
+        innerItemsSource = [];
+        currentTextEdit = lastTextEdit = new PretokenStringContainer(true);
+        innerItemsSource.Insert(innerItemsSource.Count, currentTextEdit);
+        ItemsSource = innerItemsSource;
+
+        DefaultStyleKey = typeof(TokenizingTextBox);
+
+        RegisterPropertyChangedCallback(ItemsSourceProperty, OnItemsSourceChanged);
+        PreviewKeyDown += OnPreviewKeyDown;
+        PreviewKeyUp += OnPreviewKeyUp;
+        CharacterReceived += OnCharacterReceived;
+        ItemClick += OnItemClick;
+    }
+
+    private enum MoveDirection
+    {
+        Next,
+        Previous,
+    }
+
+    public static bool IsControlPressed
+    {
+        get => InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Control).HasFlag(CoreVirtualKeyStates.Down);
+    }
+
+    public static bool IsShiftPressed
+    {
+        get => InputKeyboardSource.GetKeyStateForCurrentThread(VirtualKey.Shift).HasFlag(CoreVirtualKeyStates.Down);
+    }
+
+    public static bool IsXamlRootAvailable { get; } = ApiInformation.IsPropertyPresent("Windows.UI.Xaml.UIElement", "XamlRoot");
+
+    public bool IsClearingForClick { get; set; }
+
+    public bool PauseTokenClearOnFocus { get; set; }
+
+    public string SelectedTokenText
+    {
+        get => PrepareSelectionForClipboard();
+    }
+
+    public void AddToken(object data, bool atEnd = false)
+    {
+        if (MaximumTokens >= 0 && IsTokenLimitReached())
+        {
+            return;
+        }
+
+        if (data is string str)
+        {
+            TokenItemAddingEventArgs tiaea = new(str);
+            OnTokenItemAdding(this, tiaea);
+
+            if (tiaea.Cancel)
+            {
+                return;
+            }
+
+            if (tiaea.Item is not null)
+            {
+                data = tiaea.Item;
+            }
+        }
+
+        // Custom: Avoid add same token
+        if (innerItemsSource.Contains(data))
+        {
+            return;
+        }
+
+        // If we've been typing in the last box, just add this to the end of our collection
+        if (atEnd || currentTextEdit == lastTextEdit)
+        {
+            innerItemsSource.InsertAt(innerItemsSource.Count - 1, data);
+        }
+        else
+        {
+            // Otherwise, we'll insert before our current box
+            ITokenStringContainer edit = currentTextEdit;
+            int index = innerItemsSource.IndexOf(edit);
+
+            // Insert our new data item at the location of our textbox
+            innerItemsSource.InsertAt(index, data);
+
+            // Remove our textbox
+            innerItemsSource.Remove(edit);
+        }
+
+        TokenizingTextBoxItem last = (TokenizingTextBoxItem)ContainerFromItem(lastTextEdit);
+        ArgumentNullException.ThrowIfNull(last.AutoSuggestTextBox);
+        last.AutoSuggestTextBox.Focus(FocusState.Keyboard);
+
+        OnTokenItemAdded(this, data);
+        UpdatePlaceholderVisibility();
+    }
+
+    public void Clear()
+    {
+        while (innerItemsSource.Count > 1)
+        {
+            if (ContainerFromItem(innerItemsSource[0]) is TokenizingTextBoxItem container)
+            {
+                if (!RemoveToken(container, innerItemsSource[0]))
+                {
+                    break;
+                }
+            }
+        }
+
+        Text = string.Empty;
+    }
+
+    public void DeselectAllTokensAndText(TokenizingTextBoxItem? ignoreItem = default)
+    {
+        this.DeselectAll();
+        ClearAllTextSelections(ignoreItem);
+    }
+
+    public bool IsTokenLimitReached()
+    {
+        return innerItemsSource.ItemsSource.Count >= MaximumTokens;
+    }
+
+    public void RefreshTokenCounter()
+    {
+        if (ContainerFromIndex(Items.Count - 1) is not TokenizingTextBoxItem { AutoSuggestBox: { } autoSuggestBox, AutoSuggestTextBox: { } autoSuggestTextBox })
+        {
+            return;
+        }
+
+        if (autoSuggestBox.FindDescendant("TextTokensCounter") is not Microsoft.UI.Xaml.Controls.TextBlock maxTokensCounter)
+        {
+            return;
+        }
+
+        int currentTokens = innerItemsSource.ItemsSource.Count;
+        int maxTokens = MaximumTokens;
+
+        maxTokensCounter.Text = $"{currentTokens}/{maxTokens}";
+        maxTokensCounter.Visibility = Visibility.Visible;
+
+        string targetState = IsTokenLimitReached()
+            ? MaxReachedState
+            : MaxUnreachedState;
+
+        VisualStateManager.GoToState(autoSuggestTextBox, targetState, true);
+    }
+
+    public void RemoveAllSelectedTokens()
+    {
+        while (SelectedItems.Count > 0)
+        {
+            if (ContainerFromItem(SelectedItems[0]) is TokenizingTextBoxItem container)
+            {
+                if (IndexFromContainer(container) != Items.Count - 1)
+                {
+                    // if its a text box, remove any selected text, and if its then empty remove the container, unless its focused
+                    if (SelectedItems[0] is ITokenStringContainer)
+                    {
+                        ArgumentNullException.ThrowIfNull(container.AutoSuggestTextBox);
+                        TextBox astb = container.AutoSuggestTextBox;
+
+                        // grab any selected text
+                        string tempStr = astb.SelectionStart is 0
+                            ? string.Empty
+                            : astb.Text[..astb.SelectionStart];
+                        tempStr += astb.SelectionStart + astb.SelectionLength < astb.Text.Length
+                                ? astb.Text[(astb.SelectionStart + astb.SelectionLength)..]
+                                : string.Empty;
+
+                        if (tempStr.Length is 0)
+                        {
+                            RemoveToken(container);
+                        }
+                        else
+                        {
+                            astb.Text = tempStr;
+                        }
+                    }
+                    else
+                    {
+                        RemoveToken(container);
+                    }
+                }
+                else
+                {
+                    if (SelectedItems.Count is 1)
+                    {
+                        // Only remains the default textbox.
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    [Command("SelectAllTokensAndTextCommand")]
+    public void SelectAllTokensAndText()
+    {
+        void SelectAllTokensAndTextCore()
+        {
+            this.SelectAllSafe();
+
+            // need to synchronize the select all and the focus behavior on the text box
+            // because there is no way to identify that the focus has been set from this point
+            // to avoid instantly clearing the selection of tokens
+            PauseTokenClearOnFocus = true;
+
+            foreach (object? item in Items)
+            {
+                if (item is not ITokenStringContainer)
+                {
+                    continue;
+                }
+
+                // grab any selected text
+                if (ContainerFromItem(item) is TokenizingTextBoxItem pretoken)
+                {
+                    ArgumentNullException.ThrowIfNull(pretoken.AutoSuggestTextBox);
+                    pretoken.AutoSuggestTextBox.SelectionStart = 0;
+                    pretoken.AutoSuggestTextBox.SelectionLength = pretoken.AutoSuggestTextBox.Text.Length;
+                }
+            }
+
+            if (ContainerFromIndex(Items.Count - 1) is TokenizingTextBoxItem container)
+            {
+                container.Focus(FocusState.Programmatic);
+            }
+        }
+
+        _ = DispatcherQueue.EnqueueAsync(SelectAllTokensAndTextCore, DispatcherQueuePriority.Normal);
+    }
+
+    public bool SelectNextItem(TokenizingTextBoxItem item)
+    {
+        return SelectNewItem(item, 1, i => i < Items.Count - 1);
+    }
+
+    public bool SelectPreviousItem(TokenizingTextBoxItem item)
+    {
+        return SelectNewItem(item, -1, i => i > 0);
+    }
+
+    public virtual void OnQuerySubmitted(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
+    {
+    }
+
+    public virtual void OnSuggestionsChosen(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
+    {
+    }
+
+    public virtual void OnTextChanged(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
+    {
+    }
+
+    public virtual void OnTokenItemAdded(TokenizingTextBox sender, object args)
+    {
+        RefreshTokenCounter();
+    }
+
+    public virtual void OnTokenItemAdding(TokenizingTextBox sender, TokenItemAddingEventArgs args)
+    {
+    }
+
+    public virtual void OnTokenItemRemoved(TokenizingTextBox sender, object args)
+    {
+        RefreshTokenCounter();
+    }
+
+    public virtual void OnTokenItemRemoving(TokenizingTextBox sender, TokenItemRemovingEventArgs args)
+    {
+    }
+
+    protected void UpdateCurrentTextEdit(ITokenStringContainer edit)
+    {
+        currentTextEdit = edit;
+
+        Text = edit.Text; // Update our text property.
+    }
+
+    /// <inheritdoc/>
+    protected override DependencyObject GetContainerForItemOverride()
+    {
+        return new TokenizingTextBoxItem();
+    }
+
+    /// <inheritdoc/>
+    protected override bool IsItemItsOwnContainerOverride(object item)
+    {
+        return item is TokenizingTextBoxItem;
+    }
+
+    /// <inheritdoc/>
+    protected override AutomationPeer OnCreateAutomationPeer()
+    {
+        return new TokenizingTextBoxAutomationPeer(this);
+    }
+
+    /// <inheritdoc/>
+    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
+    {
+        base.PrepareContainerForItemOverride(element, item);
+
+        if (element is TokenizingTextBoxItem tokenItem)
+        {
+            tokenItem.Owner = this;
+
+            tokenItem.ContentTemplateSelector = TokenItemTemplateSelector;
+            tokenItem.ContentTemplate = TokenItemTemplate;
+
+            tokenItem.ClearAllAction -= OnItemClearAllAction;
+            tokenItem.ClearAllAction += OnItemClearAllAction;
+
+            tokenItem.GotFocus -= OnItemGotFocus;
+            tokenItem.GotFocus += OnItemGotFocus;
+
+            tokenItem.LostFocus -= OnItemLostFocus;
+            tokenItem.LostFocus += OnItemLostFocus;
+        }
+    }
+
+    private static void OnMaximumTokensChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is TokenizingTextBox { MaximumTokens: >= 0 } ttb && e.NewValue is int newMaxTokens)
+        {
+            int tokenCount = ttb.innerItemsSource.ItemsSource.Count;
+            if (tokenCount > 0 && tokenCount > newMaxTokens)
+            {
+                int tokensToRemove = tokenCount - Math.Max(newMaxTokens, 0);
+
+                // Start at the end, remove any extra tokens.
+                for (int i = tokenCount; i > tokenCount - tokensToRemove; --i)
+                {
+                    if (ttb.innerItemsSource.ItemsSource[i - 1] is { } token)
+                    {
+                        // Force remove the items. No warning and no option to cancel.
+                        ttb.innerItemsSource.Remove(token);
+                        ttb.OnTokenItemRemoved(ttb, token);
+                    }
+                }
+            }
+        }
+    }
+
+    private static void OnTextPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        if (d is TokenizingTextBox { currentTextEdit: { } } ttb)
+        {
+            if (e.NewValue is string newValue)
+            {
+                ttb.currentTextEdit.Text = newValue;
+
+                // Notify inner container of text change, see issue #4749
+                if (ttb.ContainerFromItem(ttb.currentTextEdit) is TokenizingTextBoxItem item)
+                {
+                    item.UpdateText(newValue);
+                }
+            }
+        }
+    }
+
+    private void ClearAllTextSelections(TokenizingTextBoxItem? ignoreItem)
+    {
+        // Clear any selection in the text box
+        foreach (object? item in Items)
+        {
+            if (item is not ITokenStringContainer)
+            {
+                continue;
+            }
+
+            if (ContainerFromItem(item) is TokenizingTextBoxItem container)
+            {
+                if (container != ignoreItem)
+                {
+                    ArgumentNullException.ThrowIfNull(container.AutoSuggestTextBox);
+                    container.AutoSuggestTextBox.SelectionLength = 0;
+                }
+            }
+        }
+    }
+
+    private void CopySelectedToClipboard()
+    {
+        DataPackage dataPackage = new()
+        {
+            RequestedOperation = DataPackageOperation.Copy,
+        };
+
+        string tokenString = PrepareSelectionForClipboard();
+
+        if (!string.IsNullOrEmpty(tokenString))
+        {
+            dataPackage.SetText(tokenString);
+            Clipboard.SetContent(dataPackage);
+        }
+    }
+
+    private void FocusPrimaryAutoSuggestBox()
+    {
+        if (Items.Count > 0)
+        {
+            if (ContainerFromIndex(Items.Count - 1) is TokenizingTextBoxItem container)
+            {
+                container.Focus(FocusState.Programmatic);
+            }
+        }
+    }
+
+    private TokenizingTextBoxItem? GetCurrentContainerItem()
+    {
+        return IsXamlRootAvailable && XamlRoot is not null
+            ? FocusManager.GetFocusedElement(XamlRoot) as TokenizingTextBoxItem
+            : FocusManager.GetFocusedElement() as TokenizingTextBoxItem;
+    }
+
+    private object GetFocusedElement()
+    {
+        return IsXamlRootAvailable && XamlRoot is not null
+            ? FocusManager.GetFocusedElement(XamlRoot)
+            : FocusManager.GetFocusedElement();
+    }
+
+    private bool MoveFocusAndSelection(MoveDirection direction)
+    {
+        bool ret = false;
+
+        if (GetCurrentContainerItem() is { } currentContainerItem)
+        {
+            object? currentItem = ItemFromContainer(currentContainerItem);
+            int previousIndex = Items.IndexOf(currentItem);
+            int index = previousIndex;
+
+            switch (direction)
+            {
+                case MoveDirection.Previous:
+                    if (previousIndex > 0)
+                    {
+                        index -= 1;
+                        break;
+                    }
+
+                    if (TabNavigateBackOnArrow)
+                    {
+                        FocusManager.TryMoveFocus(FocusNavigationDirection.Previous, new()
+                        {
+                            SearchRoot = XamlRoot.Content,
+                        });
+                    }
+
+                    ret = true;
+
+                    break;
+                case MoveDirection.Next:
+                    if (previousIndex < Items.Count - 1)
+                    {
+                        index += 1;
+                    }
+
+                    break;
+            }
+
+            // Only do stuff if the index is actually changing
+            if (index != previousIndex)
+            {
+                if (ContainerFromIndex(index) is TokenizingTextBoxItem newItem)
+                {
+                    // Check for the new item being a text control.
+                    // this must happen before focus is set to avoid seeing the caret
+                    // jump in come cases
+                    if (Items[index] is ITokenStringContainer && !IsShiftPressed)
+                    {
+                        ArgumentNullException.ThrowIfNull(newItem.AutoSuggestTextBox);
+                        newItem.AutoSuggestTextBox.SelectionLength = 0;
+                        newItem.AutoSuggestTextBox.SelectionStart = direction switch
+                        {
+                            MoveDirection.Previous => newItem.AutoSuggestTextBox.Text.Length,
+                            MoveDirection.Next => 0,
+                            _ => throw new NotSupportedException(),
+                        };
+                    }
+
+                    newItem.Focus(FocusState.Keyboard);
+
+                    // if no control keys are selected then the selection also becomes just this item
+                    if (IsShiftPressed)
+                    {
+                        // What we do here depends on where the selection started
+                        // if the previous item is between the start and new position then we add the new item to the selected range
+                        // if the new item is between the start and the previous position then we remove the previous position
+                        int newDistance = Math.Abs(SelectedIndex - index);
+                        int oldDistance = Math.Abs(SelectedIndex - previousIndex);
+
+                        if (newDistance > oldDistance)
+                        {
+                            SelectedItems.Add(Items[index]);
+                        }
+                        else
+                        {
+                            SelectedItems.Remove(Items[previousIndex]);
+                        }
+                    }
+                    else if (!IsControlPressed)
+                    {
+                        SelectedIndex = index;
+
+                        // This looks like a bug in the underlying ListViewBase control.
+                        // Might need to be reviewed if the base behavior is fixed
+                        // When two consecutive items are selected and the navigation moves between them,
+                        // the first time that happens the old focused item is not unselected
+                        if (SelectedItems.Count > 1)
+                        {
+                            SelectedItems.Clear();
+                            SelectedIndex = index;
+                        }
+                    }
+
+                    ret = true;
+                }
+            }
+        }
+
+        return ret;
+    }
+
+    private void OnCharacterReceived(UIElement sender, CharacterReceivedRoutedEventArgs args)
+    {
+        if (ContainerFromItem(currentTextEdit) is TokenizingTextBoxItem container && !(GetFocusedElement().Equals(container.AutoSuggestTextBox) || char.IsControl(args.Character)))
+        {
+            if (SelectedItems.Count > 0)
+            {
+                int index = innerItemsSource.IndexOf(SelectedItems.First());
+
+                RemoveAllSelectedTokens();
+
+                void RemoveOldItems()
+                {
+                    // If we're before the last textbox and it's empty, redirect focus to that one instead
+                    if (index == innerItemsSource.Count - 1 && string.IsNullOrWhiteSpace(lastTextEdit.Text))
+                    {
+                        if (ContainerFromItem(lastTextEdit) is TokenizingTextBoxItem lastContainer)
+                        {
+                            lastContainer.UseCharacterAsUser = true;
+
+                            lastTextEdit.Text = string.Empty + args.Character;
+                            UpdateCurrentTextEdit(lastTextEdit);
+
+                            ArgumentNullException.ThrowIfNull(lastContainer.AutoSuggestTextBox);
+                            lastContainer.AutoSuggestTextBox.SelectionStart = 1;
+                            lastContainer.AutoSuggestTextBox.Focus(FocusState.Keyboard);
+                        }
+                    }
+                    else
+                    {
+                        // Otherwise, create a new textbox for this text.
+                        UpdateCurrentTextEdit(new PretokenStringContainer((string.Empty + args.Character).Trim()));
+                        innerItemsSource.Insert(index, currentTextEdit);
+
+                        void Containerization()
+                        {
+                            if (ContainerFromIndex(index) is TokenizingTextBoxItem newContainer)
+                            {
+                                newContainer.UseCharacterAsUser = true;
+
+                                void WaitForLoad(object s, RoutedEventArgs eargs)
+                                {
+                                    if (newContainer.AutoSuggestTextBox is not null)
+                                    {
+                                        newContainer.AutoSuggestTextBox.SelectionStart = 1;
+                                        newContainer.AutoSuggestTextBox.Focus(FocusState.Keyboard);
+                                    }
+
+                                    newContainer.AutoSuggestTextBoxLoaded -= WaitForLoad;
+                                }
+
+                                newContainer.AutoSuggestTextBoxLoaded += WaitForLoad;
+                            }
+                        }
+
+                        // Need to wait for containerization
+                        _ = DispatcherQueue.EnqueueAsync(Containerization, DispatcherQueuePriority.Normal);
+                    }
+                }
+
+                // Wait for removal of old items
+                _ = DispatcherQueue.EnqueueAsync(RemoveOldItems, DispatcherQueuePriority.Normal);
+            }
+            else
+            {
+                // If no items are selected, send input to the last active string container.
+                // This code is only fires during an edgecase where an item is in the process of being deleted and the user inputs a character before the focus has been redirected to a string container.
+                if (innerItemsSource[^1] is ITokenStringContainer textEdit)
+                {
+                    if (ContainerFromIndex(Items.Count - 1) is TokenizingTextBoxItem last) // Should be our last text box
+                    {
+                        ArgumentNullException.ThrowIfNull(last.AutoSuggestTextBox);
+                        string text = last.AutoSuggestTextBox.Text;
+                        int selectionStart = last.AutoSuggestTextBox.SelectionStart;
+                        int position = Math.Min(selectionStart, text.Length);
+                        textEdit.Text = text[..position] + args.Character + text[position..];
+
+                        last.AutoSuggestTextBox.SelectionStart = position + 1;
+                        last.AutoSuggestTextBox.Focus(FocusState.Keyboard);
+                    }
+                }
+            }
+        }
+    }
+
+    private void OnItemClearAllAction(TokenizingTextBoxItem sender, RoutedEventArgs args)
+    {
+        int newSelectedIndex = SelectedRanges.Count > 0
+            ? SelectedRanges[0].FirstIndex - 1
+            : -1;
+
+        RemoveAllSelectedTokens();
+
+        SelectedIndex = newSelectedIndex;
+
+        if (newSelectedIndex is -1)
+        {
+            newSelectedIndex = Items.Count - 1;
+        }
+
+        // focus the item prior to the first selected item
+        if (ContainerFromIndex(newSelectedIndex) is TokenizingTextBoxItem container)
+        {
+            container.Focus(FocusState.Keyboard);
+        }
+    }
+
+    private void OnItemClick(object sender, ItemClickEventArgs e)
+    {
+        if (!IsControlPressed)
+        {
+            IsClearingForClick = true;
+            ClearAllTextSelections(default);
+        }
+    }
+
+    private void OnItemGotFocus(object sender, RoutedEventArgs e)
+    {
+        if (sender is TokenizingTextBoxItem { AutoSuggestBox: { } autoSuggestBox, Content: ITokenStringContainer text } item)
+        {
+            UpdateCurrentTextEdit(text);
+
+            // Custom: Show all items when focus on the textbox
+            OnTextChanged(autoSuggestBox, new());
+        }
+    }
+
+    private void OnItemLostFocus(object sender, RoutedEventArgs e)
+    {
+        // Keep track of our currently focused textbox
+        if (sender is TokenizingTextBoxItem { Content: ITokenStringContainer text } && string.IsNullOrWhiteSpace(text.Text) && text != lastTextEdit)
+        {
+            // We're leaving an inner textbox that's blank, so we'll remove it
+            innerItemsSource.Remove(text);
+
+            UpdateCurrentTextEdit(lastTextEdit);
+
+            UpdatePlaceholderVisibility();
+        }
+    }
+
+    private void OnItemsSourceChanged(DependencyObject sender, DependencyProperty dp)
+    {
+        // If we're given a different ItemsSource, we need to wrap that collection in our helper class.
+        if (ItemsSource is { } and not InterspersedObservableCollection)
+        {
+            innerItemsSource = new(ItemsSource);
+
+            if (MaximumTokens >= 0 && IsTokenLimitReached())
+            {
+                // Reduce down to below the max as necessary.
+                int endCount = MaximumTokens > 0 ? MaximumTokens : 0;
+                for (int i = innerItemsSource.ItemsSource.Count - 1; i >= endCount; --i)
+                {
+                    innerItemsSource.Remove(innerItemsSource[i]);
+                }
+            }
+
+            // Add our text box at the end of items and set its default value to our initial text, fix for #4749
+            currentTextEdit = lastTextEdit = new PretokenStringContainer(true) { Text = Text };
+            innerItemsSource.Insert(innerItemsSource.Count, currentTextEdit);
+            ItemsSource = innerItemsSource;
+        }
+    }
+
+    private void OnPreviewKeyDown(object sender, KeyRoutedEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case VirtualKey.C:
+                if (IsControlPressed)
+                {
+                    CopySelectedToClipboard();
+                    e.Handled = true;
+                    return;
+                }
+
+                break;
+
+            case VirtualKey.X:
+                if (IsControlPressed)
+                {
+                    CopySelectedToClipboard();
+
+                    // now clear all selected tokens and text, or all if none are selected
+                    RemoveAllSelectedTokens();
+                }
+
+                break;
+
+            // For moving between tokens
+            case VirtualKey.Left:
+                e.Handled = MoveFocusAndSelection(MoveDirection.Previous);
+                return;
+
+            case VirtualKey.Right:
+                e.Handled = MoveFocusAndSelection(MoveDirection.Next);
+                return;
+
+            case VirtualKey.A:
+                // modify the select-all behavior to ensure the text in the edit box gets selected.
+                if (IsControlPressed)
+                {
+                    SelectAllTokensAndText();
+                    e.Handled = true;
+                    return;
+                }
+
+                break;
+        }
+    }
+
+    private void OnPreviewKeyUp(object sender, KeyRoutedEventArgs e)
+    {
+        switch (e.Key)
+        {
+            case VirtualKey.Escape:
+                // Clear any selection and place the focus back into the text box
+                DeselectAllTokensAndText();
+                FocusPrimaryAutoSuggestBox();
+                break;
+        }
+    }
+
+    private string PrepareSelectionForClipboard()
+    {
+        string tokenString = string.Empty;
+        bool addSeparator = false;
+
+        // Copy all items if none selected (and no text selected)
+        foreach (object? item in SelectedItems.Count > 0 ? SelectedItems : Items)
+        {
+            if (addSeparator)
+            {
+                tokenString += TokenDelimiter;
+            }
+            else
+            {
+                addSeparator = true;
+            }
+
+            if (item is ITokenStringContainer)
+            {
+                // grab any selected text
+                if (ContainerFromItem(item) is TokenizingTextBoxItem { AutoSuggestTextBox: { } textBox })
+                {
+                    tokenString += textBox.Text.Substring(textBox.SelectionStart, textBox.SelectionLength);
+                }
+            }
+            else
+            {
+                tokenString += item.ToString();
+            }
+        }
+
+        return tokenString;
+    }
+
+    [Command("RemoveItemCommand")]
+    private void RemoveToken(TokenizingTextBoxItem item)
+    {
+        RemoveToken(item, default);
+    }
+
+    private bool RemoveToken(TokenizingTextBoxItem item, object? data)
+    {
+        data ??= ItemFromContainer(item);
+
+        TokenItemRemovingEventArgs tirea = new(data, item);
+        OnTokenItemRemoving(this, tirea);
+
+        if (tirea.Cancel)
+        {
+            return false;
+        }
+
+        innerItemsSource.Remove(data);
+
+        OnTokenItemRemoved(this, data);
+        UpdatePlaceholderVisibility();
+
+        return true;
+    }
+
+    private bool SelectNewItem(TokenizingTextBoxItem item, int increment, Func<int, bool> testFunc)
+    {
+        // find the item in the list
+        int currentIndex = IndexFromContainer(item);
+
+        // Select previous token item (if there is one).
+        if (testFunc(currentIndex))
+        {
+            if (ContainerFromItem(Items[currentIndex + increment]) is ListViewItem newItem)
+            {
+                newItem.Focus(FocusState.Keyboard);
+                SelectedItems.Add(Items[currentIndex + increment]);
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    private void UpdatePlaceholderVisibility()
+    {
+        if (ContainerFromItem(lastTextEdit)?.FindDescendant("PlaceholderTextContentPresenter") is not { } placeholder)
+        {
+            return;
+        }
+
+        // Fix layout issue
+        placeholder.Visibility = Visibility.Collapsed;
+
+        _ = CompositionTargetHelper.ExecuteAfterCompositionRenderingAsync(() =>
+        {
+            int currentTokens = innerItemsSource.ItemsSource.Count;
+            int maxTokens = MaximumTokens;
+            placeholder.Visibility = currentTokens >= maxTokens
+                ? Visibility.Collapsed
+                : Visibility.Visible;
+        });
+    }
+}

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/TokenizingTextBox.xaml

@@ -0,0 +1,179 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:cw="using:CommunityToolkit.WinUI"
+    xmlns:cwc="using:CommunityToolkit.WinUI.Controls"
+    xmlns:shuxct="using:Snap.Hutao.UI.Xaml.Control.TokenizingTextBox"
+    xmlns:shuxm="using:Snap.Hutao.UI.Xaml.Markup"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="ms-appx:///UI/Xaml/Control/TokenizingTextBox/TokenizingTextBoxItem.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <!--  Resources for TokenizingTextBox  -->
+    <Thickness x:Key="TokenizingTextBoxPadding">3,2,3,2</Thickness>
+    <Thickness x:Key="TokenizingTextBoxPresenterMargin">0,0,6,0</Thickness>
+    <x:Double x:Key="TokenizingTextBoxTokenSpacing">2</x:Double>
+
+    <shuxct:TokenizingTextBoxStyleSelector
+        x:Key="TokenizingTextBoxStyleSelector"
+        TextStyle="{StaticResource TokenizingTextBoxItemTextStyle}"
+        TokenStyle="{StaticResource TokenizingTextBoxItemTokenStyle}"/>
+
+    <!--  Default style for TokenizingTextBox  -->
+    <Style BasedOn="{StaticResource DefaultTokenizingTextBoxStyle}" TargetType="shuxct:TokenizingTextBox"/>
+
+    <Style x:Key="DefaultTokenizingTextBoxStyle" TargetType="shuxct:TokenizingTextBox">
+        <Setter Property="AutoSuggestBoxTextBoxStyle" Value="{StaticResource TokenizingTextBoxTextBoxStyle}"/>
+        <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}"/>
+        <Setter Property="Background" Value="{ThemeResource TextControlBackground}"/>
+        <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}"/>
+        <Setter Property="BorderThickness" Value="{StaticResource TextControlBorderThemeThickness}"/>
+        <Setter Property="IsTabStop" Value="False"/>
+        <Setter Property="TabNavigation" Value="Once"/>
+        <win:Setter Property="IsSwipeEnabled" Value="False"/>
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+        <Setter Property="Padding" Value="{StaticResource TokenizingTextBoxPadding}"/>
+        <Setter Property="SelectionMode" Value="Extended"/>
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
+        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
+        <win:Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
+        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
+        <win:Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
+        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
+        <win:Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
+        <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
+        <Setter Property="TokenSpacing" Value="{StaticResource TokenizingTextBoxTokenSpacing}"/>
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
+        <Setter Property="IsItemClickEnabled" Value="True"/>
+        <win:Setter Property="ItemContainerTransitions">
+            <Setter.Value>
+                <TransitionCollection/>
+            </Setter.Value>
+        </win:Setter>
+        <Setter Property="ItemsPanel">
+            <Setter.Value>
+                <ItemsPanelTemplate>
+                    <cwc:WrapPanel
+                        cw:FrameworkElementExtensions.AncestorType="shuxct:TokenizingTextBox"
+                        HorizontalSpacing="{Binding (cw:FrameworkElementExtensions.Ancestor).TokenSpacing, RelativeSource={RelativeSource Self}}"
+                        StretchChild="Last"
+                        VerticalSpacing="{Binding (cw:FrameworkElementExtensions.Ancestor).TokenSpacing, RelativeSource={RelativeSource Self}}"/>
+                </ItemsPanelTemplate>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="ItemContainerStyleSelector" Value="{StaticResource TokenizingTextBoxStyleSelector}"/>
+        <Setter Property="Template" Value="{StaticResource TokenizingTextBoxTemplate}"/>
+    </Style>
+
+    <ControlTemplate x:Key="TokenizingTextBoxTemplate" TargetType="shuxct:TokenizingTextBox">
+        <Grid Name="RootPanel">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
+                <RowDefinition Height="*"/>
+                <RowDefinition Height="Auto"/>
+            </Grid.RowDefinitions>
+
+            <Grid.ContextFlyout>
+                <MenuFlyout>
+                    <MenuFlyoutItem Command="{Binding SelectAllTokensAndTextCommand, RelativeSource={RelativeSource Mode=TemplatedParent}}" Text="{shuxm:ResourceString Name=ControlTokenizingTextBoxSelectAllMenuItem}"/>
+                </MenuFlyout>
+            </Grid.ContextFlyout>
+
+            <ContentPresenter
+                Margin="{ThemeResource TextBoxTopHeaderMargin}"
+                VerticalAlignment="Top"
+                Content="{TemplateBinding Header}"
+                ContentTemplate="{TemplateBinding HeaderTemplate}"
+                FontWeight="Normal"
+                Foreground="{ThemeResource TextControlHeaderForeground}"
+                TextWrapping="Wrap"
+                Transitions="{TemplateBinding HeaderTransitions}"/>
+            <Border
+                x:Name="BackgroundVisual"
+                Grid.Row="1"
+                Background="{TemplateBinding Background}"
+                BorderBrush="{TemplateBinding BorderBrush}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}"/>
+
+            <Border
+                x:Name="FocusVisual"
+                Grid.Row="1"
+                Background="{ThemeResource TextControlBackgroundFocused}"
+                BorderBrush="{ThemeResource TextControlBorderBrushFocused}"
+                BorderThickness="{TemplateBinding BorderThickness}"
+                CornerRadius="{TemplateBinding CornerRadius}"
+                Opacity="0"/>
+            <!--  Background in WinUI is TextControlBackgroundFocused, but that uses a different resource in WinUI than system  -->
+
+            <ScrollViewer
+                x:Name="ScrollViewer"
+                Grid.Row="1"
+                win:AutomationProperties.AccessibilityView="Raw"
+                win:IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                win:IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
+                win:IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
+                win:IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
+                win:IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
+                BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
+                HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
+                TabNavigation="{TemplateBinding TabNavigation}"
+                VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
+                VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
+                ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
+
+                <ItemsPresenter Margin="{StaticResource TokenizingTextBoxPresenterMargin}" Padding="{TemplateBinding Padding}"/>
+            </ScrollViewer>
+
+            <ContentPresenter
+                Grid.Row="2"
+                VerticalAlignment="Top"
+                Content="{TemplateBinding Footer}"
+                ContentTemplate="{TemplateBinding FooterTemplate}"
+                FontWeight="Normal"
+                TextWrapping="Wrap"
+                Transitions="{TemplateBinding FooterTransitions}"/>
+
+            <VisualStateManager.VisualStateGroups>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Disabled">
+                        <Storyboard>
+                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" Storyboard.TargetProperty="Background">
+                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}"/>
+                            </ObjectAnimationUsingKeyFrames>
+                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" Storyboard.TargetProperty="BorderBrush">
+                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}"/>
+                            </ObjectAnimationUsingKeyFrames>
+
+                        </Storyboard>
+                    </VisualState>
+                    <VisualState x:Name="Normal"/>
+                    <VisualState x:Name="PointerOver">
+                        <Storyboard>
+                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" Storyboard.TargetProperty="BorderBrush">
+                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}"/>
+                            </ObjectAnimationUsingKeyFrames>
+                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundVisual" Storyboard.TargetProperty="Background">
+                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}"/>
+                            </ObjectAnimationUsingKeyFrames>
+                        </Storyboard>
+                    </VisualState>
+                </VisualStateGroup>
+
+                <VisualStateGroup x:Name="FocusStates">
+                    <VisualState x:Name="Focused">
+                        <VisualState.Setters>
+                            <Setter Target="BackgroundVisual.BorderBrush" Value="Transparent"/>
+                            <Setter Target="FocusVisual.BorderThickness" Value="{ThemeResource TextControlBorderThemeThicknessFocused}"/>
+                            <Setter Target="FocusVisual.Opacity" Value="1"/>
+                        </VisualState.Setters>
+                    </VisualState>
+                    <VisualState x:Name="Unfocused"/>
+                </VisualStateGroup>
+            </VisualStateManager.VisualStateGroups>
+        </Grid>
+    </ControlTemplate>
+</ResourceDictionary>

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/TokenizingTextBoxAutomationPeer.cs

@@ -0,0 +1,84 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml.Automation;
+using Microsoft.UI.Xaml.Automation.Peers;
+using Microsoft.UI.Xaml.Automation.Provider;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
+
+internal class TokenizingTextBoxAutomationPeer : ListViewBaseAutomationPeer, IValueProvider
+{
+    public TokenizingTextBoxAutomationPeer(TokenizingTextBox owner)
+        : base(owner)
+    {
+    }
+
+    public bool IsReadOnly => !OwningTokenizingTextBox.IsEnabled;
+
+    public string Value => OwningTokenizingTextBox.Text;
+
+    private TokenizingTextBox OwningTokenizingTextBox
+    {
+        get => (TokenizingTextBox)Owner;
+    }
+
+    public void SetValue(string value)
+    {
+        if (IsReadOnly)
+        {
+            throw new ElementNotEnabledException($"Could not set the value of the {nameof(TokenizingTextBox)} ");
+        }
+
+        OwningTokenizingTextBox.Text = value;
+    }
+
+    protected override string GetClassNameCore()
+    {
+        return Owner.GetType().Name;
+    }
+
+    protected override string GetNameCore()
+    {
+        string name = OwningTokenizingTextBox.Name;
+        if (!string.IsNullOrWhiteSpace(name))
+        {
+            return name;
+        }
+
+        name = AutomationProperties.GetName(OwningTokenizingTextBox);
+        return !string.IsNullOrWhiteSpace(name) ? name : base.GetNameCore();
+    }
+
+    protected override object GetPatternCore(PatternInterface patternInterface)
+    {
+        return patternInterface switch
+        {
+            PatternInterface.Value => this,
+            _ => base.GetPatternCore(patternInterface),
+        };
+    }
+
+    protected override IList<AutomationPeer> GetChildrenCore()
+    {
+        TokenizingTextBox owner = OwningTokenizingTextBox;
+
+        ItemCollection items = owner.Items;
+        if (items.Count <= 0)
+        {
+            return default!;
+        }
+
+        List<AutomationPeer> peers = new(items.Count);
+        for (int i = 0; i < items.Count; i++)
+        {
+            if (owner.ContainerFromIndex(i) is TokenizingTextBoxItem element)
+            {
+                peers.Add(FromElement(element) ?? CreatePeerForElement(element));
+            }
+        }
+
+        return peers;
+    }
+}

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/TokenizingTextBoxItem.cs

@@ -0,0 +1,395 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using CommunityToolkit.WinUI;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Windows.Foundation;
+using Windows.System;
+
+namespace Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
+
+[DependencyProperty("ClearButtonStyle", typeof(Style))]
+[DependencyProperty("Owner", typeof(TokenizingTextBox))]
+[TemplatePart(Name = TokenRemoveButton, Type = typeof(ButtonBase))] //// Token case
+[TemplatePart(Name = TextAutoSuggestBox, Type = typeof(Microsoft.UI.Xaml.Controls.AutoSuggestBox))] //// String case
+[TemplatePart(Name = TextTokensCounter, Type = typeof(Microsoft.UI.Xaml.Controls.TextBlock))]
+internal partial class TokenizingTextBoxItem : ListViewItem
+{
+    private const string TokenRemoveButton = nameof(TokenRemoveButton);
+    private const string TextAutoSuggestBox = nameof(TextAutoSuggestBox);
+    private const string TextTokensCounter = nameof(TextTokensCounter);
+    private const string QueryButton = nameof(QueryButton);
+
+    private Microsoft.UI.Xaml.Controls.AutoSuggestBox? autoSuggestBox;
+    private TextBox? autoSuggestTextBox;
+    private bool isSelectedFocusOnFirstCharacter;
+    private bool isSelectedFocusOnLastCharacter;
+
+    public TokenizingTextBoxItem()
+    {
+        DefaultStyleKey = typeof(TokenizingTextBoxItem);
+
+        KeyDown += OnKeyDown;
+    }
+
+    public event TypedEventHandler<TokenizingTextBoxItem, RoutedEventArgs>? AutoSuggestTextBoxLoaded;
+
+    public event TypedEventHandler<TokenizingTextBoxItem, RoutedEventArgs>? ClearAllAction;
+
+    public Microsoft.UI.Xaml.Controls.AutoSuggestBox? AutoSuggestBox
+    {
+        get => autoSuggestBox;
+    }
+
+    public TextBox? AutoSuggestTextBox
+    {
+        get => autoSuggestTextBox;
+    }
+
+    public bool UseCharacterAsUser { get; set; }
+
+    private bool IsAllSelected
+    {
+        get => autoSuggestTextBox?.SelectedText == autoSuggestTextBox?.Text && !string.IsNullOrEmpty(autoSuggestTextBox?.Text);
+    }
+
+    private bool IsCaretAtStart
+    {
+        get => autoSuggestTextBox?.SelectionStart is 0;
+    }
+
+    private bool IsCaretAtEnd
+    {
+        get => autoSuggestTextBox?.SelectionStart == autoSuggestTextBox?.Text.Length || autoSuggestTextBox?.SelectionStart + autoSuggestTextBox?.SelectionLength == autoSuggestTextBox?.Text.Length;
+    }
+
+    public void UpdateText(string text)
+    {
+        if (autoSuggestBox is not null)
+        {
+            autoSuggestBox.Text = text;
+            return;
+        }
+
+        void WaitForLoad(object s, RoutedEventArgs eargs)
+        {
+            if (autoSuggestTextBox is not null)
+            {
+                autoSuggestTextBox.Text = text;
+            }
+
+            AutoSuggestTextBoxLoaded -= WaitForLoad;
+        }
+
+        AutoSuggestTextBoxLoaded += WaitForLoad;
+    }
+
+    /// <inheritdoc/>
+    protected override void OnApplyTemplate()
+    {
+        base.OnApplyTemplate();
+
+        if (GetTemplateChild(TextAutoSuggestBox) is Microsoft.UI.Xaml.Controls.AutoSuggestBox suggestbox)
+        {
+            OnASBApplyTemplate(suggestbox);
+        }
+    }
+
+    private void OnASBApplyTemplate(Microsoft.UI.Xaml.Controls.AutoSuggestBox asb)
+    {
+        if (autoSuggestBox is not null)
+        {
+            autoSuggestBox.Loaded -= OnASBLoaded;
+
+            autoSuggestBox.QuerySubmitted -= OnASBQuerySubmitted;
+            autoSuggestBox.SuggestionChosen -= OnASBSuggestionChosen;
+            autoSuggestBox.TextChanged -= OnASBTextChanged;
+            autoSuggestBox.PointerEntered -= OnASBPointerEntered;
+            autoSuggestBox.PointerExited -= OnASBPointerExited;
+            autoSuggestBox.PointerCanceled -= OnASBPointerExited;
+            autoSuggestBox.PointerCaptureLost -= OnASBPointerExited;
+            autoSuggestBox.GotFocus -= OnASBGotFocus;
+            autoSuggestBox.LostFocus -= OnASBLostFocus;
+
+            // Remove any previous QueryIcon
+            autoSuggestBox.QueryIcon = default;
+        }
+
+        autoSuggestBox = asb;
+
+        if (autoSuggestBox is not null)
+        {
+            autoSuggestBox.Loaded += OnASBLoaded;
+
+            autoSuggestBox.QuerySubmitted += OnASBQuerySubmitted;
+            autoSuggestBox.SuggestionChosen += OnASBSuggestionChosen;
+            autoSuggestBox.TextChanged += OnASBTextChanged;
+            autoSuggestBox.PointerEntered += OnASBPointerEntered;
+            autoSuggestBox.PointerExited += OnASBPointerExited;
+            autoSuggestBox.PointerCanceled += OnASBPointerExited;
+            autoSuggestBox.PointerCaptureLost += OnASBPointerExited;
+            autoSuggestBox.GotFocus += OnASBGotFocus;
+            autoSuggestBox.LostFocus += OnASBLostFocus;
+
+            // Setup a binding to the QueryIcon of the Parent if we're the last box.
+            if (Content is ITokenStringContainer str)
+            {
+                autoSuggestBox.Text = str.Text;
+
+                if (str.IsLast)
+                {
+                    if (Owner.QueryIcon is FontIconSource fis && fis.ReadLocalValue(FontIconSource.FontSizeProperty) == DependencyProperty.UnsetValue)
+                    {
+                        fis.FontSize = 16;
+
+                        if (Owner.TryFindResource("TokenizingTextBoxIconFontSize", out object? fontSizeObj) && fontSizeObj is double fontSize)
+                        {
+                            fis.FontSize = fontSize;
+                        }
+                    }
+
+                    Binding iconBinding = new()
+                    {
+                        Source = Owner,
+                        Path = new(nameof(Owner.QueryIcon)),
+                        RelativeSource = new()
+                        {
+                            Mode = RelativeSourceMode.TemplatedParent,
+                        },
+                    };
+
+                    IconSourceElement iconSourceElement = new();
+                    iconSourceElement.SetBinding(IconSourceElement.IconSourceProperty, iconBinding);
+                    autoSuggestBox.QueryIcon = iconSourceElement;
+                }
+            }
+        }
+    }
+
+    private void OnASBGotFocus(object sender, RoutedEventArgs e)
+    {
+        // Verify if the usual behavior of clearing token selection is required
+        if (!Owner.PauseTokenClearOnFocus && !TokenizingTextBox.IsShiftPressed)
+        {
+            Owner.DeselectAll();
+        }
+
+        Owner.PauseTokenClearOnFocus = false;
+
+        VisualStateManager.GoToState(Owner, TokenizingTextBox.FocusedState, true);
+    }
+
+    private void OnASBLoaded(object sender, RoutedEventArgs e)
+    {
+        ArgumentNullException.ThrowIfNull(autoSuggestBox);
+        if (autoSuggestBox.FindDescendant(QueryButton) is Button queryButton)
+        {
+            queryButton.Visibility = Owner.QueryIcon is not null ? Visibility.Visible : Visibility.Collapsed;
+        }
+
+        if (autoSuggestTextBox is not null)
+        {
+            autoSuggestTextBox.PreviewKeyDown -= OnAutoSuggestTextBoxPreviewKeyDown;
+            autoSuggestTextBox.TextChanging -= OnAutoSuggestTextBoxTextChanging;
+            autoSuggestTextBox.SelectionChanged -= OnAutoSuggestTextBoxSelectionChanged;
+            autoSuggestTextBox.SelectionChanging -= OnAutoSuggestTextBoxSelectionChanging;
+        }
+
+        autoSuggestTextBox = autoSuggestBox.FindDescendant<TextBox>();
+
+        if (autoSuggestTextBox is not null)
+        {
+            autoSuggestTextBox.PreviewKeyDown += OnAutoSuggestTextBoxPreviewKeyDown;
+            autoSuggestTextBox.TextChanging += OnAutoSuggestTextBoxTextChanging;
+            autoSuggestTextBox.SelectionChanged += OnAutoSuggestTextBoxSelectionChanged;
+            autoSuggestTextBox.SelectionChanging += OnAutoSuggestTextBoxSelectionChanging;
+
+            AutoSuggestTextBoxLoaded?.Invoke(this, e);
+        }
+
+        Owner.RefreshTokenCounter();
+    }
+
+    private void OnASBLostFocus(object sender, RoutedEventArgs e)
+    {
+        VisualStateManager.GoToState(Owner, TokenizingTextBox.UnfocusedState, true);
+    }
+
+    private void OnASBPointerEntered(object sender, PointerRoutedEventArgs e)
+    {
+        VisualStateManager.GoToState(Owner, TokenizingTextBox.PointerOverState, true);
+    }
+
+    private void OnASBPointerExited(object sender, PointerRoutedEventArgs e)
+    {
+        VisualStateManager.GoToState(Owner, TokenizingTextBox.NormalState, true);
+    }
+
+    private void OnASBQuerySubmitted(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
+    {
+        Owner.OnQuerySubmitted(sender, args);
+
+        if (args.ChosenSuggestion is not null)
+        {
+            AddToken(args.ChosenSuggestion);
+            return;
+        }
+
+        if (!string.IsNullOrWhiteSpace(args.QueryText))
+        {
+            AddToken(args.QueryText);
+            return;
+        }
+
+        void AddToken(object data)
+        {
+            Owner.AddToken(data);
+            sender.Text = Owner.Text = string.Empty;
+            sender.Focus(FocusState.Programmatic);
+        }
+    }
+
+    private void OnASBSuggestionChosen(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
+    {
+        Owner.OnSuggestionsChosen(sender, args);
+    }
+
+    private void OnASBTextChanged(Microsoft.UI.Xaml.Controls.AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
+    {
+        if (sender.Text is null)
+        {
+            return;
+        }
+
+        if (!EqualityComparer<string>.Default.Equals(sender.Text, Owner.Text))
+        {
+            Owner.Text = sender.Text;
+        }
+
+        // Override our programmatic manipulation as we're redirecting input for the user
+        if (UseCharacterAsUser)
+        {
+            UseCharacterAsUser = false;
+
+            args.Reason = AutoSuggestionBoxTextChangeReason.UserInput;
+        }
+
+        Owner.OnTextChanged(sender, args);
+
+        string t = sender.Text?.Trim() ?? string.Empty;
+
+        // Look for Token Delimiters to create new tokens when text changes.
+        if (!string.IsNullOrEmpty(Owner.TokenDelimiter) && t.Contains(Owner.TokenDelimiter, StringComparison.OrdinalIgnoreCase))
+        {
+            bool lastDelimited = t[^1] == Owner.TokenDelimiter[0];
+
+            ReadOnlySpan<string> tokens = t.Split(Owner.TokenDelimiter);
+            int numberToProcess = lastDelimited ? tokens.Length : tokens.Length - 1;
+            for (int position = 0; position < numberToProcess; position++)
+            {
+                string token = tokens[position].Trim();
+                if (token.Length > 0)
+                {
+                    Owner.AddToken(token);
+                }
+            }
+
+            sender.Text = lastDelimited ? string.Empty : tokens[^1].Trim();
+        }
+    }
+
+    private void OnAutoSuggestTextBoxPreviewKeyDown(object sender, KeyRoutedEventArgs e)
+    {
+        if (sender is not TextBox autoSuggestTextBox)
+        {
+            return;
+        }
+
+        if (IsCaretAtStart && (e.Key is VirtualKey.Back or VirtualKey.Left))
+        {
+            // if the back key is pressed and there is any selection in the text box then the text box can handle it
+            if ((e.Key is VirtualKey.Left && isSelectedFocusOnFirstCharacter) || autoSuggestTextBox.SelectionLength is 0)
+            {
+                if (Owner.SelectPreviousItem(this))
+                {
+                    if (!TokenizingTextBox.IsShiftPressed)
+                    {
+                        // Clear any text box selection
+                        autoSuggestTextBox.SelectionLength = 0;
+                    }
+
+                    e.Handled = true;
+                }
+            }
+        }
+        else if (IsCaretAtEnd && e.Key is VirtualKey.Right)
+        {
+            // if the back key is pressed and there is any selection in the text box then the text box can handle it
+            if (isSelectedFocusOnLastCharacter || autoSuggestTextBox.SelectionLength is 0)
+            {
+                if (Owner.SelectNextItem(this))
+                {
+                    if (!TokenizingTextBox.IsShiftPressed)
+                    {
+                        // Clear any text box selection
+                        autoSuggestTextBox.SelectionLength = 0;
+                    }
+
+                    e.Handled = true;
+                }
+            }
+        }
+        else if (e.Key is VirtualKey.A && TokenizingTextBox.IsControlPressed)
+        {
+            // Need to provide this shortcut from the textbox only, as ListViewBase will do it for us on token.
+            Owner.SelectAllTokensAndText();
+        }
+    }
+
+    private void OnAutoSuggestTextBoxSelectionChanged(object sender, RoutedEventArgs args)
+    {
+        if (!(IsAllSelected || TokenizingTextBox.IsShiftPressed || Owner.IsClearingForClick))
+        {
+            Owner.DeselectAllTokensAndText(this);
+        }
+
+        Owner.IsClearingForClick = false;
+    }
+
+    private void OnAutoSuggestTextBoxSelectionChanging(TextBox sender, TextBoxSelectionChangingEventArgs args)
+    {
+        isSelectedFocusOnFirstCharacter = args.SelectionLength > 0 && args.SelectionStart is 0 && sender.SelectionStart > 0;
+        isSelectedFocusOnLastCharacter = (args.SelectionStart + args.SelectionLength == sender.Text.Length) &&
+            (sender.SelectionStart + sender.SelectionLength != sender.Text.Length);
+    }
+
+    private void OnAutoSuggestTextBoxTextChanging(TextBox sender, TextBoxTextChangingEventArgs args)
+    {
+        if (Owner.SelectedItems.Count > 1)
+        {
+            Owner.RemoveAllSelectedTokens();
+        }
+    }
+
+    private void OnKeyDown(object sender, KeyRoutedEventArgs e)
+    {
+        if (Content is ITokenStringContainer)
+        {
+            return;
+        }
+
+        switch (e.Key)
+        {
+            case VirtualKey.Back:
+            case VirtualKey.Delete:
+                {
+                    ClearAllAction?.Invoke(this, e);
+                    break;
+                }
+        }
+    }
+}

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/TokenizingTextBoxItem.xaml

@@ -0,0 +1,849 @@
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:shuxct="using:Snap.Hutao.UI.Xaml.Control.TokenizingTextBox"
+    xmlns:shuxm="using:Snap.Hutao.UI.Xaml.Markup"
+    xmlns:win="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
+
+    <ResourceDictionary.ThemeDictionaries>
+        <ResourceDictionary x:Key="Default">
+            <StaticResource x:Key="TokenItemBackground" ResourceKey="ControlFillColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPointerOver" ResourceKey="ControlFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPressed" ResourceKey="ControlFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundSelected" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPointerOverSelected" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPressedSelected" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPointerOver" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPressed" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushSelected" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPointerOverSelected" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPressedSelected" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="TokenItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPressed" ResourceKey="TextFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundSelected" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPointerOverSelected" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPressedSelected" ResourceKey="TextOnAccentFillColorSecondaryBrush"/>
+            <Thickness x:Key="TokenItemBorderThickness">1</Thickness>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="Light">
+            <StaticResource x:Key="TokenItemBackground" ResourceKey="ControlFillColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPointerOver" ResourceKey="ControlFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPressed" ResourceKey="ControlFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundSelected" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPointerOverSelected" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPressedSelected" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPointerOver" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPressed" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushSelected" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPointerOverSelected" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPressedSelected" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="TokenItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPressed" ResourceKey="TextFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundSelected" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPointerOverSelected" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPressedSelected" ResourceKey="TextOnAccentFillColorSecondaryBrush"/>
+            <Thickness x:Key="TokenItemBorderThickness">1</Thickness>
+        </ResourceDictionary>
+        <ResourceDictionary x:Key="HighContrast">
+            <StaticResource x:Key="TokenItemBackground" ResourceKey="ControlFillColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPointerOver" ResourceKey="ControlFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPressed" ResourceKey="ControlFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundSelected" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPointerOverSelected" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBackgroundPressedSelected" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrush" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPointerOver" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPressed" ResourceKey="ControlStrokeColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushSelected" ResourceKey="AccentFillColorDefaultBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPointerOverSelected" ResourceKey="AccentFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemBorderBrushPressedSelected" ResourceKey="AccentFillColorTertiaryBrush"/>
+            <StaticResource x:Key="TokenItemForeground" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPointerOver" ResourceKey="TextFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPressed" ResourceKey="TextFillColorSecondaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundSelected" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPointerOverSelected" ResourceKey="TextOnAccentFillColorPrimaryBrush"/>
+            <StaticResource x:Key="TokenItemForegroundPressedSelected" ResourceKey="TextOnAccentFillColorSecondaryBrush"/>
+            <Thickness x:Key="TokenItemBorderThickness">1</Thickness>
+        </ResourceDictionary>
+    </ResourceDictionary.ThemeDictionaries>
+
+    <!--<Thickness x:Key="ButtonPadding">8,4,8,5</Thickness> Not sure if we'll also need this later-->
+    <Thickness x:Key="TextControlThemePadding">10,3,6,6</Thickness>
+    <!--  Need local copy of this, as including WinUI overrides this to something that adds too much padding for our inner box  -->
+    <x:Double x:Key="TokenizingTextBoxIconFontSize">10</x:Double>
+
+    <Thickness x:Key="TokenItemPadding">8,4,4,4</Thickness>
+    <Thickness x:Key="TokenizingTextBoxItemPresenterMargin">0,-2,0,1</Thickness>
+    <HorizontalAlignment x:Key="TokenizingTextBoxItemHorizontalContentAlignment">Center</HorizontalAlignment>
+    <VerticalAlignment x:Key="TokenizingTextBoxItemVerticalContentAlignment">Center</VerticalAlignment>
+
+    <CornerRadius x:Key="PopupOverlayCornerRadius">0,0,0,8</CornerRadius>
+
+    <Style x:Key="TokenizingTextBoxDeleteButtonStyle" TargetType="Button">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <Grid
+                        x:Name="ButtonLayoutGrid"
+                        Margin="{StaticResource AutoSuggestBoxDeleteButtonMargin}"
+                        Background="{ThemeResource TextControlButtonBackground}"
+                        BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{ThemeResource ControlCornerRadius}">
+                        <!--  FontSize is ignored here, see https://github.com/microsoft/microsoft-ui-xaml/issues/2568  -->
+                        <!--  Set in code-behind link:TokenizingTextBoxItem.AutoSuggestBox.cs#L104  -->
+                        <TextBlock
+                            x:Name="GlyphElement"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            win:AutomationProperties.AccessibilityView="Raw"
+                            FontFamily="{ThemeResource SymbolThemeFontFamily}"
+                            FontSize="{ThemeResource TokenizingTextBoxIconFontSize}"
+                            FontStyle="Normal"
+                            Foreground="{ThemeResource TextControlButtonForeground}"
+                            Text="&#xE894;"/>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal"/>
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <DoubleAnimation
+                                            Storyboard.TargetName="ButtonLayoutGrid"
+                                            Storyboard.TargetProperty="Opacity"
+                                            To="0"
+                                            Duration="0"/>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Name="TokenizingTextBoxQueryButtonStyle" TargetType="Button">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <ContentPresenter
+                        x:Name="ContentPresenter"
+                        Margin="{ThemeResource AutoSuggestBoxInnerButtonMargin}"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        muxc:AnimatedIcon.State="Normal"
+                        win:AutomationProperties.AccessibilityView="Raw"
+                        Background="{ThemeResource TextControlButtonBackground}"
+                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                        BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        ContentTransitions="{TemplateBinding ContentTransitions}"
+                        CornerRadius="{TemplateBinding CornerRadius}"
+                        FontSize="{TemplateBinding FontSize}">
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal"/>
+
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.(muxc:AnimatedIcon.State)" Value="PointerOver"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.(muxc:AnimatedIcon.State)" Value="Pressed"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <DoubleAnimation
+                                            Storyboard.TargetName="ContentPresenter"
+                                            Storyboard.TargetProperty="Opacity"
+                                            To="0"
+                                            Duration="0"/>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </ContentPresenter>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!--  Inner TextBox Style with removed borders to look like part of the outer textbox facade we've setup  -->
+    <Style
+        x:Key="TokenizingTextBoxTextBoxStyle"
+        BasedOn="{StaticResource AutoSuggestBoxTextBoxStyle}"
+        TargetType="TextBox">
+        <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}"/>
+        <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}"/>
+        <Setter Property="Background" Value="Transparent"/>
+        <Setter Property="BorderBrush" Value="Transparent"/>
+        <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}"/>
+        <Setter Property="BorderThickness" Value="0"/>
+        <!--  Override  -->
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
+        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/>
+        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
+        <win:Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
+        <Setter Property="Padding" Value="8,5,6,6"/>
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+        <Setter Property="MinHeight" Value="28"/>
+        <!--  Override  -->
+        <win:Setter Property="SelectionHighlightColorWhenNotFocused" Value="{ThemeResource TextControlSelectionHighlightColor}"/>
+        <!--  Override  -->
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="TextBox">
+                    <Grid ColumnSpacing="2">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*"/>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="Auto"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto"/>
+                            <RowDefinition Height="*"/>
+                        </Grid.RowDefinitions>
+                        <Border
+                            x:Name="BorderElement"
+                            Grid.Row="1"
+                            Grid.RowSpan="1"
+                            Grid.ColumnSpan="3"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"/>
+                        <ContentPresenter
+                            x:Name="HeaderContentPresenter"
+                            Grid.Row="0"
+                            Grid.ColumnSpan="3"
+                            Margin="{ThemeResource AutoSuggestBoxTopHeaderMargin}"
+                            x:DeferLoadStrategy="Lazy"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            FontWeight="Normal"
+                            Foreground="{ThemeResource TextControlHeaderForeground}"
+                            TextWrapping="Wrap"
+                            Visibility="Collapsed"/>
+                        <ScrollViewer
+                            x:Name="ContentElement"
+                            Grid.Row="1"
+                            Margin="{TemplateBinding BorderThickness}"
+                            Padding="{TemplateBinding Padding}"
+                            win:AutomationProperties.AccessibilityView="Raw"
+                            win:IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                            win:IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
+                            win:IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
+                            HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                            HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
+                            IsTabStop="False"
+                            VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
+                            VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
+                            ZoomMode="Disabled"/>
+                        <ContentControl
+                            x:Name="PlaceholderTextContentPresenter"
+                            Grid.Row="1"
+                            Grid.ColumnSpan="2"
+                            Padding="{TemplateBinding Padding}"
+                            VerticalContentAlignment="Center"
+                            Content="{TemplateBinding PlaceholderText}"
+                            Foreground="{ThemeResource TextControlPlaceholderForeground}"
+                            IsHitTestVisible="False"
+                            IsTabStop="False"/>
+                        <Button
+                            x:Name="DeleteButton"
+                            Grid.Row="1"
+                            Grid.Column="1"
+                            Width="32"
+                            Height="28"
+                            Padding="{ThemeResource HelperButtonThemePadding}"
+                            VerticalAlignment="Stretch"
+                            win:AutomationProperties.AccessibilityView="Raw"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            FontSize="{TemplateBinding FontSize}"
+                            IsTabStop="False"
+                            Style="{StaticResource TokenizingTextBoxDeleteButtonStyle}"
+                            Visibility="Collapsed"/>
+
+                        <TextBlock
+                            Name="TextTokensCounter"
+                            Grid.Row="1"
+                            Grid.Column="2"
+                            Margin="2,0,0,2"
+                            VerticalAlignment="Center"
+                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                            Style="{StaticResource CaptionTextBlockStyle}"/>
+
+                        <Button
+                            x:Name="QueryButton"
+                            Grid.Row="1"
+                            Grid.Column="3"
+                            Width="32"
+                            Height="28"
+                            Margin="0,0,2,0"
+                            Padding="0"
+                            VerticalAlignment="Stretch"
+                            win:AutomationProperties.AccessibilityView="Raw"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            FontSize="{TemplateBinding FontSize}"
+                            IsTabStop="False"
+                            Style="{StaticResource TokenizingTextBoxQueryButtonStyle}"/>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundDisabled}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Normal"/>
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="Focused">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundFocused}"/>
+                                            <!--  WinUI override  -->
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}"/>
+                                            <!--  WinUI override  -->
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
+                                                                   Storyboard.TargetProperty="RequestedTheme">
+                                        <DiscreteObjectKeyFrame KeyTime="0"
+                                                                Value="Light" />
+                                    </ObjectAnimationUsingKeyFrames>-->
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="QueryButton" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForeground}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="ButtonStates">
+                                <VisualState x:Name="ButtonVisible">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
+                                            <DiscreteObjectKeyFrame KeyTime="0">
+                                                <DiscreteObjectKeyFrame.Value>
+                                                    <Visibility>Visible</Visibility>
+                                                </DiscreteObjectKeyFrame.Value>
+                                            </DiscreteObjectKeyFrame>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="ButtonCollapsed"/>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="TokensCounterStates">
+                                <VisualState x:Name="MaxReached">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TextTokensCounter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemFillColorCriticalBrush}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                </VisualState>
+                                <VisualState x:Name="MaxUnreached"/>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="TokenizingTextBoxItemTextStyle" TargetType="shuxct:TokenizingTextBoxItem">
+        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"/>
+        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlTransparentBrush}"/>
+        <Setter Property="IsTabStop" Value="False"/>
+        <Setter Property="UseSystemFocusVisuals" Value="False"/>
+        <Setter Property="MinWidth" Value="128"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="shuxct:TokenizingTextBoxItem">
+                    <AutoSuggestBox
+                        Name="TextAutoSuggestBox"
+                        DisplayMemberPath="{Binding Path=Owner.DisplayMemberPath, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                        ItemTemplate="{Binding Path=Owner.SuggestedItemTemplate, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                        ItemsSource="{Binding Path=Owner.SuggestedItemsSource, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                        PlaceholderText="{Binding Path=Owner.PlaceholderText, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                        Style="{StaticResource SystemAutoSuggestBoxStyle}"
+                        Text="{Binding Text, Mode=TwoWay}"
+                        TextBoxStyle="{StaticResource TokenizingTextBoxTextBoxStyle}"
+                        TextMemberPath="{Binding Path=Owner.TextMemberPath, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                        UpdateTextOnSelect="False"/>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!--  Copy of System Style from 18362 to try and workaround WinUI Styles  -->
+    <Style x:Key="SystemAutoSuggestBoxStyle" TargetType="AutoSuggestBox">
+        <Setter Property="VerticalAlignment" Value="Top"/>
+        <Setter Property="IsTabStop" Value="False"/>
+        <Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}"/>
+        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="AutoSuggestBox">
+                    <Grid x:Name="LayoutRoot">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*"/>
+                        </Grid.RowDefinitions>
+
+                        <TextBox
+                            x:Name="TextBox"
+                            Width="{TemplateBinding Width}"
+                            Margin="0"
+                            win:DesiredCandidateWindowAlignment="BottomEdge"
+                            Canvas.ZIndex="0"
+                            CornerRadius="4"
+                            Header="{TemplateBinding Header}"
+                            PlaceholderText="{TemplateBinding PlaceholderText}"
+                            ScrollViewer.BringIntoViewOnFocusChange="False"
+                            Style="{TemplateBinding TextBoxStyle}"
+                            UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"/>
+
+                        <Popup x:Name="SuggestionsPopup">
+                            <Border
+                                x:Name="SuggestionsContainer"
+                                Background="{ThemeResource AutoSuggestBoxSuggestionsListBackground}"
+                                CornerRadius="{StaticResource PopupOverlayCornerRadius}">
+                                <ListView
+                                    x:Name="SuggestionsList"
+                                    MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"
+                                    Margin="{ThemeResource AutoSuggestListPadding}"
+                                    Padding="{ThemeResource AutoSuggestListPadding}"
+                                    BorderBrush="{ThemeResource AutoSuggestBoxSuggestionsListBorderBrush}"
+                                    BorderThickness="{ThemeResource AutoSuggestListBorderThemeThickness}"
+                                    DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
+                                    IsItemClickEnabled="True"
+                                    ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
+                            </Border>
+                        </Popup>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="Orientation">
+                                <VisualState x:Name="Landscape"/>
+                                <VisualState x:Name="Portrait"/>
+
+                            </VisualStateGroup>
+
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+
+
+    <Style x:Key="TokenizingTextBoxItemTokenStyle" TargetType="shuxct:TokenizingTextBoxItem">
+        <Setter Property="ClearButtonStyle" Value="{StaticResource SubtleButtonStyle}"/>
+        <Setter Property="HorizontalContentAlignment" Value="{StaticResource TokenizingTextBoxItemHorizontalContentAlignment}"/>
+        <Setter Property="VerticalContentAlignment" Value="{StaticResource TokenizingTextBoxItemVerticalContentAlignment}"/>
+        <!--<Setter Property="HorizontalAlignment" Value="Center" />-->
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+        <Setter Property="Background" Value="{ThemeResource TokenItemBackground}"/>
+        <Setter Property="BorderBrush" Value="{ThemeResource TokenItemBorderBrush}"/>
+        <Setter Property="BorderThickness" Value="{ThemeResource TokenItemBorderThickness}"/>
+        <Setter Property="CornerRadius" Value="2"/>
+        <Setter Property="Padding" Value="{ThemeResource TokenItemPadding}"/>
+        <Setter Property="IsTabStop" Value="True"/>
+        <Setter Property="TabNavigation" Value="Local"/>
+        <Setter Property="Foreground" Value="{ThemeResource TokenItemForeground}"/>
+        <Setter Property="FontWeight" Value="Normal"/>
+        <Setter Property="UseSystemFocusVisuals" Value="True"/>
+        <Setter Property="FocusVisualMargin" Value="-3"/>
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge"/>
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="shuxct:TokenizingTextBoxItem">
+                    <Grid
+                        x:Name="PART_RootGrid"
+                        Height="{TemplateBinding Height}"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        ColumnSpacing="8"
+                        Control.IsTemplateFocusTarget="True"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <win:Grid.BackgroundTransition>
+                            <win:BrushTransition Duration="0:0:0.083"/>
+                        </win:Grid.BackgroundTransition>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="Auto"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.ContextFlyout>
+                            <MenuFlyout>
+                                <MenuFlyoutItem
+                                    Command="{Binding Owner.RemoveItemCommand, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                    CommandParameter="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                                    Text="{shuxm:ResourceString Name=ControlTokenizingTextBoxRemoveMenuItem}"/>
+                                <MenuFlyoutItem Command="{Binding Owner.SelectAllTokensAndTextCommand, RelativeSource={RelativeSource Mode=TemplatedParent}}" Text="{shuxm:ResourceString Name=ControlTokenizingTextBoxSelectAllMenuItem}"/>
+                            </MenuFlyout>
+                        </Grid.ContextFlyout>
+                        <!--  Content  -->
+                        <ContentPresenter
+                            x:Name="PART_ContentPresenter"
+                            Margin="0,-1,0,0"
+                            VerticalAlignment="Center"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            win:OpticalMarginAlignment="TrimSideBearings"
+                            BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                            Content="{TemplateBinding Content}"
+                            ContentTransitions="{TemplateBinding ContentTransitions}"
+                            FontWeight="{TemplateBinding FontWeight}"
+                            Foreground="{TemplateBinding Foreground}"/>
+                        <Button
+                            x:Name="TokenRemoveButton"
+                            Grid.Row="1"
+                            Grid.Column="1"
+                            Width="20"
+                            Height="20"
+                            MinWidth="0"
+                            MinHeight="0"
+                            Margin="0,0,0,-2"
+                            Padding="2"
+                            VerticalAlignment="Center"
+                            Command="{Binding Owner.RemoveItemCommand, RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                            CommandParameter="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}"
+                            CornerRadius="99"
+                            IsTabStop="False"
+                            Style="{TemplateBinding ClearButtonStyle}">
+                            <FontIcon FontSize="12" Glyph="&#xE894;"/>
+                        </Button>
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal"/>
+                                <VisualState x:Name="PointerOver">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_RootGrid.Background" Value="{ThemeResource TokenItemBackgroundPointerOver}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Pressed">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_RootGrid.Background" Value="{ThemeResource TokenItemBackgroundPressed}"/>
+                                        <Setter Target="PART_RootGrid.BorderBrush" Value="{ThemeResource TokenItemBorderBrushPointerOver}"/>
+                                        <Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource TokenItemForegroundPointerOver}"/>
+                                        <Setter Target="TokenRemoveButton.Foreground" Value="{ThemeResource TokenItemForegroundPointerOver}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="Selected">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_RootGrid.Background" Value="{ThemeResource TokenItemBackgroundSelected}"/>
+                                        <Setter Target="PART_RootGrid.BorderBrush" Value="{ThemeResource TokenItemBorderBrushSelected}"/>
+                                        <Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource TokenItemForegroundSelected}"/>
+                                        <Setter Target="TokenRemoveButton.Style" Value="{ThemeResource SubtleAccentButtonStyle}"/>
+                                        <Setter Target="PART_RootGrid.BackgroundSizing" Value="OuterBorderEdge"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="PointerOverSelected">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_RootGrid.Background" Value="{ThemeResource TokenItemBackgroundPointerOverSelected}"/>
+                                        <Setter Target="PART_RootGrid.BorderBrush" Value="{ThemeResource TokenItemBorderBrushPointerOverSelected}"/>
+                                        <Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource TokenItemForegroundPointerOverSelected}"/>
+                                        <Setter Target="TokenRemoveButton.Style" Value="{ThemeResource SubtleAccentButtonStyle}"/>
+                                        <Setter Target="PART_RootGrid.BackgroundSizing" Value="OuterBorderEdge"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                                <VisualState x:Name="PressedSelected">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_RootGrid.Background" Value="{ThemeResource TokenItemBackgroundPressedSelected}"/>
+                                        <Setter Target="PART_RootGrid.BorderBrush" Value="{ThemeResource TokenItemBorderBrushPressedSelected}"/>
+                                        <Setter Target="PART_ContentPresenter.Foreground" Value="{ThemeResource TokenItemForegroundPressedSelected}"/>
+                                        <Setter Target="TokenRemoveButton.Style" Value="{ThemeResource SubtleAccentButtonStyle}"/>
+                                        <Setter Target="PART_RootGrid.BackgroundSizing" Value="OuterBorderEdge"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                            <VisualStateGroup x:Name="DisabledStates">
+                                <VisualState x:Name="Enabled"/>
+                                <VisualState x:Name="Disabled">
+                                    <VisualState.Setters>
+                                        <Setter Target="PART_ContentPresenter.Opacity" Value="{ThemeResource ListViewItemDisabledThemeOpacity}"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <!--  Default style for TokenizingTextBoxItem  -->
+    <Style BasedOn="{StaticResource TokenizingTextBoxItemTokenStyle}" TargetType="shuxct:TokenizingTextBoxItem"/>
+
+    <Style x:Key="SubtleButtonStyle" TargetType="Button">
+        <Setter Property="Background" Value="{ThemeResource SubtleFillColorTransparent}"/>
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge"/>
+        <Setter Property="Foreground" Value="{ThemeResource TextFillColorPrimary}"/>
+        <Setter Property="BorderThickness" Value="0"/>
+        <Setter Property="Padding" Value="{StaticResource ButtonPadding}"/>
+        <Setter Property="HorizontalAlignment" Value="Left"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+        <Setter Property="FontWeight" Value="Normal"/>
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
+        <Setter Property="FocusVisualMargin" Value="-3"/>
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <ContentPresenter
+                        x:Name="ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        muxc:AnimatedIcon.State="Normal"
+                        win:AutomationProperties.AccessibilityView="Raw"
+                        Background="{TemplateBinding Background}"
+                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        ContentTransitions="{TemplateBinding ContentTransitions}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <win:ContentPresenter.BackgroundTransition>
+                            <win:BrushTransition Duration="0:0:0.083"/>
+                        </win:ContentPresenter.BackgroundTransition>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal"/>
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleFillColorSecondary}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextFillColorPrimary}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.(muxc:AnimatedIcon.State)" Value="PointerOver"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleFillColorTertiary}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextFillColorSecondary}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.(muxc:AnimatedIcon.State)" Value="Pressed"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ControlFillColorDisabled}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextFillColorDisabled}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <!--  DisabledVisual Should be handled by the control, not the animated icon.  -->
+                                        <Setter Target="ContentPresenter.(muxc:AnimatedIcon.State)" Value="Normal"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </ContentPresenter>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+    <Style x:Key="SubtleAccentButtonStyle" TargetType="Button">
+        <Setter Property="Background" Value="{ThemeResource SubtleFillColorTransparent}"/>
+        <Setter Property="BackgroundSizing" Value="InnerBorderEdge"/>
+        <Setter Property="Foreground" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}"/>
+        <Setter Property="BorderThickness" Value="0"/>
+        <Setter Property="Padding" Value="{StaticResource ButtonPadding}"/>
+        <Setter Property="HorizontalAlignment" Value="Left"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
+        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
+        <Setter Property="FontWeight" Value="Normal"/>
+        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
+        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
+        <Setter Property="FocusVisualMargin" Value="-3"/>
+        <Setter Property="CornerRadius" Value="{ThemeResource ControlCornerRadius}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <ContentPresenter
+                        x:Name="ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        muxc:AnimatedIcon.State="Normal"
+                        win:AutomationProperties.AccessibilityView="Raw"
+                        Background="{TemplateBinding Background}"
+                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        ContentTransitions="{TemplateBinding ContentTransitions}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <win:ContentPresenter.BackgroundTransition>
+                            <win:BrushTransition Duration="0:0:0.083"/>
+                        </win:ContentPresenter.BackgroundTransition>
+
+                        <VisualStateManager.VisualStateGroups>
+                            <VisualStateGroup x:Name="CommonStates">
+                                <VisualState x:Name="Normal"/>
+                                <VisualState x:Name="PointerOver">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleFillColorSecondary}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextOnAccentFillColorPrimaryBrush}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.(muxc:AnimatedIcon.State)" Value="PointerOver"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Pressed">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SubtleFillColorTertiary}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextOnAccentFillColorSecondaryBrush}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.(muxc:AnimatedIcon.State)" Value="Pressed"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+
+                                <VisualState x:Name="Disabled">
+                                    <Storyboard>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ControlFillColorTransparentBrush}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
+                                            <!--  Should be TextOnAccentFillColorDisabledBrush, but doesn't seem to work? This is the same visual effect  -->
+                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ControlFillColorDefaultBrush}"/>
+                                        </ObjectAnimationUsingKeyFrames>
+                                    </Storyboard>
+                                    <VisualState.Setters>
+                                        <Setter Target="ContentPresenter.(muxc:AnimatedIcon.State)" Value="Normal"/>
+                                    </VisualState.Setters>
+                                </VisualState>
+                            </VisualStateGroup>
+                        </VisualStateManager.VisualStateGroups>
+                    </ContentPresenter>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+</ResourceDictionary>

src/Snap.Hutao/Snap.Hutao/UI/Xaml/Control/TokenizingTextBox/TokenizingTextBoxStyleSelector.cs

@@ -0,0 +1,25 @@
+// Copyright (c) DGP Studio. All rights reserved.
+// Licensed under the MIT license.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Snap.Hutao.UI.Xaml.Control.TokenizingTextBox;
+
+internal class TokenizingTextBoxStyleSelector : StyleSelector
+{
+    public Style TokenStyle { get; set; } = default!;
+
+    public Style TextStyle { get; set; } = default!;
+
+    /// <inheritdoc/>
+    protected override Style SelectStyleCore(object item, DependencyObject container)
+    {
+        if (item is ITokenStringContainer)
+        {
+            return TextStyle;
+        }
+
+        return TokenStyle;
+    }
+}

src/Snap.Hutao/Snap.Hutao/UI/Xaml/View/Page/WikiWeaponPage.xaml

@@ -197,6 +197,7 @@
                                 MaximumTokens="5"
                                 PlaceholderText="{shuxm:ResourceString Name=ViewPageWiKiWeaponAutoSuggestBoxPlaceHolder}"
                                 QueryIcon="{cw:FontIconSource Glyph=}"
+                                Style="{StaticResource DefaultTokenizingTextBoxStyle}"
                                 SuggestedItemTemplate="{StaticResource TokenTemplate}"
                                 SuggestedItemsSource="{Binding AvailableTokens.Values}"
                                 Text="{Binding FilterToken, Mode=TwoWay}"