Updated Max to Maximum and added token counter

Author: shweaver-MSFT

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TokenizingTextBox/TokenizingTextBoxXaml.bind

@@ -32,7 +32,7 @@
     <StackPanel>
       <TextBlock FontSize="32" Margin="0,0,0,4">
         <Run Text="Select up to" />
-        <Run Text="{Binding MaxTokens, ElementName=TokenBox, Mode=OneWay}" />
+        <Run Text="{Binding MaximumTokens, ElementName=TokenBox, Mode=OneWay}" />
         <Run Text="actions" />
       </TextBlock>
       <controls:TokenizingTextBox
@@ -43,7 +43,7 @@
           HorizontalAlignment="Stretch"
           TextMemberPath="Text"
           TokenDelimiter=","
-          MaxTokens="3">
+          MaximumTokens="3">
         <controls:TokenizingTextBox.SuggestedItemTemplate>
           <DataTemplate>
             <StackPanel Orientation="Horizontal">

Microsoft.Toolkit.Uwp.UI.Controls.Input/TokenizingTextBox/TokenizingTextBox.Properties.cs

@@ -158,17 +158,17 @@ private static void TextPropertyChanged(DependencyObject d, DependencyPropertyCh
             new PropertyMetadata(false));
 
         /// <summary>
-        /// Identifies the <see cref="MaxTokens"/> property.
+        /// Identifies the <see cref="MaximumTokens"/> property.
         /// </summary>
-        public static readonly DependencyProperty MaxTokensProperty = DependencyProperty.Register(
-            nameof(MaxTokens),
+        public static readonly DependencyProperty MaximumTokensProperty = DependencyProperty.Register(
+            nameof(MaximumTokens),
             typeof(int),
             typeof(TokenizingTextBox),
-            new PropertyMetadata(null, OnMaxTokensChanged));
+            new PropertyMetadata(null, OnMaximumTokensChanged));
 
-        private static void OnMaxTokensChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        private static void OnMaximumTokensChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
-            if (d is TokenizingTextBox ttb && ttb.ReadLocalValue(MaxTokensProperty) != DependencyProperty.UnsetValue && e.NewValue is int newMaxTokens)
+            if (d is TokenizingTextBox ttb && ttb.ReadLocalValue(MaximumTokensProperty) != DependencyProperty.UnsetValue && e.NewValue is int newMaxTokens)
             {
                 var tokenCount = ttb._innerItemsSource.ItemsSource.Count;
                 if (tokenCount > 0 && tokenCount > newMaxTokens)
@@ -338,10 +338,10 @@ public string SelectedTokenText
         /// <summary>
         /// Gets or sets the maximum number of token results allowed at a time.
         /// </summary>
-        public int MaxTokens
+        public int MaximumTokens
         {
-            get => (int)GetValue(MaxTokensProperty);
-            set => SetValue(MaxTokensProperty, value);
+            get => (int)GetValue(MaximumTokensProperty);
+            set => SetValue(MaximumTokensProperty, value);
         }
     }
 }

Microsoft.Toolkit.Uwp.UI.Controls.Input/TokenizingTextBox/TokenizingTextBox.cs

@@ -78,10 +78,10 @@ private void ItemsSource_PropertyChanged(DependencyObject sender, DependencyProp
             {
                 _innerItemsSource = new InterspersedObservableCollection(ItemsSource);
 
-                if (ReadLocalValue(MaxTokensProperty) != DependencyProperty.UnsetValue && _innerItemsSource.ItemsSource.Count > MaxTokens)
+                if (ReadLocalValue(MaximumTokensProperty) != DependencyProperty.UnsetValue && _innerItemsSource.ItemsSource.Count > MaximumTokens)
                 {
                     // Reduce down to the max as necessary.
-                    for (var i = _innerItemsSource.ItemsSource.Count - 1; i >= Math.Max(MaxTokens, 0); --i)
+                    for (var i = _innerItemsSource.ItemsSource.Count - 1; i >= Math.Max(MaximumTokens, 0); --i)
                     {
                         _innerItemsSource.Remove(_innerItemsSource[i]);
                     }
@@ -440,7 +440,7 @@ public async Task ClearAsync()
 
         internal async Task AddTokenAsync(object data, bool? atEnd = null)
         {
-            if (ReadLocalValue(MaxTokensProperty) != DependencyProperty.UnsetValue && MaxTokens <= 0)
+            if (ReadLocalValue(MaximumTokensProperty) != DependencyProperty.UnsetValue && (MaximumTokens <= 0 || MaximumTokens <= _innerItemsSource.ItemsSource.Count))
             {
                 // No tokens for you
                 return;
@@ -465,26 +465,6 @@ internal async Task AddTokenAsync(object data, bool? atEnd = null)
             // If we've been typing in the last box, just add this to the end of our collection
             if (atEnd == true || _currentTextEdit == _lastTextEdit)
             {
-                if (ReadLocalValue(MaxTokensProperty) != DependencyProperty.UnsetValue && _innerItemsSource.ItemsSource.Count >= MaxTokens)
-                {
-                    // Remove tokens from the end until below the max number.
-                    for (var i = _innerItemsSource.Count - 2; i >= 0; --i)
-                    {
-                        var item = _innerItemsSource[i];
-                        if (item is not ITokenStringContainer)
-                        {
-                            _innerItemsSource.Remove(item);
-                            TokenItemRemoved?.Invoke(this, item);
-
-                            // Keep going until we are below the max.
-                            if (_innerItemsSource.ItemsSource.Count < MaxTokens)
-                            {
-                                break;
-                            }
-                        }
-                    }
-                }
-
                 _innerItemsSource.InsertAt(_innerItemsSource.Count - 1, data);
             }
             else
@@ -493,26 +473,6 @@ internal async Task AddTokenAsync(object data, bool? atEnd = null)
                 var edit = _currentTextEdit;
                 var index = _innerItemsSource.IndexOf(edit);
 
-                if (ReadLocalValue(MaxTokensProperty) != DependencyProperty.UnsetValue && _innerItemsSource.ItemsSource.Count >= MaxTokens)
-                {
-                    // Find the next token and remove it, until below the max number of tokens.
-                    for (var i = index; i < _innerItemsSource.Count;  i++)
-                    {
-                        var item = _innerItemsSource[i];
-                        if (item is not ITokenStringContainer)
-                        {
-                            _innerItemsSource.Remove(item);
-                            TokenItemRemoved?.Invoke(this, item);
-
-                            // Keep going until we are below the max.
-                            if (_innerItemsSource.ItemsSource.Count < MaxTokens)
-                            {
-                                break;
-                            }
-                        }
-                    }
-                }
-
                 // Insert our new data item at the location of our textbox
                 _innerItemsSource.InsertAt(index, data);
 

Microsoft.Toolkit.Uwp.UI.Controls.Input/TokenizingTextBox/TokenizingTextBoxItem.AutoSuggestBox.cs

@@ -4,10 +4,12 @@
 
 using Windows.Foundation;
 using Windows.System;
+using Windows.UI;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Data;
 using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
 
 namespace Microsoft.Toolkit.Uwp.UI.Controls
 {
@@ -16,9 +18,11 @@ namespace Microsoft.Toolkit.Uwp.UI.Controls
     /// </summary>
     [System.Diagnostics.CodeAnalysis.SuppressMessage("StyleCop.CSharp.ReadabilityRules", "SA1124:Do not use regions", Justification = "Organization")]
     [TemplatePart(Name = PART_AutoSuggestBox, Type = typeof(AutoSuggestBox))] //// String case
+    [TemplatePart(Name = PART_TokensCounter, Type = typeof(TextBlock))]
     public partial class TokenizingTextBoxItem
     {
         private const string PART_AutoSuggestBox = "PART_AutoSuggestBox";
+        private const string PART_TokensCounter = "PART_TokensCounter";
 
         private AutoSuggestBox _autoSuggestBox;
 
@@ -231,6 +235,8 @@ private void AutoSuggestBox_GotFocus(object sender, RoutedEventArgs e)
         #region Inner TextBox
         private void OnASBLoaded(object sender, RoutedEventArgs e)
         {
+            UpdateTokensCounter(this);
+
             // Local function for Selection changed
             void AutoSuggestTextBox_SelectionChanged(object box, RoutedEventArgs args)
             {
@@ -329,6 +335,47 @@ private void AutoSuggestTextBox_PreviewKeyDown(object sender, KeyRoutedEventArgs
                 Owner.SelectAllTokensAndText();
             }
         }
+
+        private void UpdateTokensCounter(TokenizingTextBoxItem ttbi)
+        {
+            var maxTokensCounter = (TextBlock)_autoSuggestBox?.FindDescendant(PART_TokensCounter);
+            if (maxTokensCounter == null)
+            {
+                return;
+            }
+
+            void OnTokenCountChanged(TokenizingTextBox ttb, object value = null)
+            {
+                var itemsSource = ttb.ItemsSource as InterspersedObservableCollection;
+                var currentTokens = itemsSource.ItemsSource.Count;
+                var maxTokens = ttb.MaximumTokens;
+
+                maxTokensCounter.Text = $"{currentTokens}/{maxTokens}";
+                maxTokensCounter.Visibility = Visibility.Visible;
+
+                maxTokensCounter.Foreground = (currentTokens == maxTokens)
+                    ? new SolidColorBrush(Colors.Red)
+                    : _autoSuggestBox.Foreground;
+            }
+
+            ttbi.Owner.TokenItemAdded -= OnTokenCountChanged;
+            ttbi.Owner.TokenItemRemoved -= OnTokenCountChanged;
+
+            // I would have like to compared to DependencyProperty.UnsetValue, but MaximumTokensProperty value is returning 0 even though we didn't set it!
+            // This means that the token counter will not show up for a specified maximum value of 0. However, it's a pretty uncommon scenario to offer a picker
+            // with no ability to add items. If the case does arrive where the ttb should be unusable by design, developers should disable the control instead or setting the maximum to 0.
+            if (Content is ITokenStringContainer str && str.IsLast && ttbi?.Owner != null && (int)ttbi.Owner.GetValue(TokenizingTextBox.MaximumTokensProperty) > 0)
+            {
+                ttbi.Owner.TokenItemAdded += OnTokenCountChanged;
+                ttbi.Owner.TokenItemRemoved += OnTokenCountChanged;
+                OnTokenCountChanged(ttbi.Owner);
+            }
+            else
+            {
+                maxTokensCounter.Visibility = Visibility.Collapsed;
+                maxTokensCounter.Text = string.Empty;
+            }
+        }
         #endregion
     }
 }

Microsoft.Toolkit.Uwp.UI.Controls.Input/TokenizingTextBox/TokenizingTextBoxItem.AutoSuggestBox.xaml

@@ -137,6 +137,7 @@
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
                             <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
@@ -176,7 +177,7 @@
                                       ZoomMode="Disabled" />
                         <ContentControl x:Name="PlaceholderTextContentPresenter"
                                         Grid.Row="1"
-                                        Grid.ColumnSpan="3"
+                                        Grid.ColumnSpan="2"
                                         Margin="{TemplateBinding BorderThickness}"
                                         Padding="{TemplateBinding Padding}"
                                         Content="{TemplateBinding PlaceholderText}"
@@ -194,9 +195,15 @@
                                 IsTabStop="False"
                                 Style="{StaticResource TokenizingTextBoxDeleteButtonStyle}"
                                 Visibility="Collapsed" />
+
+                        <TextBlock Name="PART_TokensCounter"
+                                   Grid.Row="1"
+                                   Grid.Column="2" 
+                                   Margin="0,4,0,0" />
+
                         <Button x:Name="QueryButton"
                                 Grid.Row="1"
-                                Grid.Column="2"
+                                Grid.Column="3"
                                 Width="{TemplateBinding Height}"
                                 MinWidth="30"
                                 VerticalAlignment="Stretch"

Microsoft.Toolkit.Uwp.UI.Controls.Input/TokenizingTextBox/TokenizingTextBoxItem.cs

@@ -4,7 +4,6 @@
 
 using Windows.Foundation;
 using Windows.System;
-using Windows.UI.Core;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Controls.Primitives;

UnitTests/UnitTests.UWP/UI/Controls/Test_TokenizingTextBox_General.cs

@@ -66,7 +66,7 @@ public void Test_Clear()
 
         [TestCategory("Test_TokenizingTextBox_General")]
         [UITestMethod]
-        public void Test_MaxTokens()
+        public void Test_MaximumTokens()
         {
             var maxTokens = 2;
 
@@ -76,7 +76,7 @@ public void Test_MaxTokens()
     xmlns:x=""http://schemas.microsoft.com/winfx/2006/xaml""
     xmlns:controls=""using:Microsoft.Toolkit.Uwp.UI.Controls"">
 
-    <controls:TokenizingTextBox x:Name=""tokenboxname"" MaxTokens=""{maxTokens}"">
+    <controls:TokenizingTextBox x:Name=""tokenboxname"" MaximumTokens=""{maxTokens}"">
     </controls:TokenizingTextBox>
 
 </Page>") as FrameworkElement;
@@ -87,23 +87,31 @@ public void Test_MaxTokens()
 
             Assert.IsNotNull(tokenBox, "Could not find TokenizingTextBox in tree.");
 
+            // Items includes the text fields as well, so we can expect at least one item to exist initially, the input box.
+            // Use the starting count as an offset.
             var startingItemsCount = tokenBox.Items.Count;
 
+            // Add two items.
             tokenBox.AddTokenItem("TokenItem1");
             tokenBox.AddTokenItem("TokenItem2");
 
+            // Make sure we have the appropriate amount of items and that they are in the appropriate order.
             Assert.AreEqual(startingItemsCount + maxTokens, tokenBox.Items.Count, "Token Add failed");
             Assert.AreEqual("TokenItem1", tokenBox.Items[0]);
             Assert.AreEqual("TokenItem2", tokenBox.Items[1]);
 
+            // Attempt to add an additional item, beyond the maximum.
             tokenBox.AddTokenItem("TokenItem3");
 
-            Assert.AreEqual(startingItemsCount + maxTokens, tokenBox.Items.Count, "Token Replace failed");
+            // Check that the number of items did not change, because the maximum number of items are already present.
+            Assert.AreEqual(startingItemsCount + maxTokens, tokenBox.Items.Count, "Token Add succeeded, where it should have failed.");
             Assert.AreEqual("TokenItem1", tokenBox.Items[0]);
-            Assert.AreEqual("TokenItem3", tokenBox.Items[1]);
+            Assert.AreEqual("TokenItem2", tokenBox.Items[1]);
 
-            tokenBox.MaxTokens = 1;
+            // Reduce the maximum number of tokens.
+            tokenBox.MaximumTokens = 1;
 
+            // The last token should be removed to account for the reduced maximum.
             Assert.AreEqual(startingItemsCount + 1, tokenBox.Items.Count);
             Assert.AreEqual("TokenItem1", tokenBox.Items[0]);
         }