Merge pull request #3247 from windows-toolkit/marcpe/TokenizeTextBox

Add the TokenizingTextBox control behaviours for initial commit

Author: michael-hawker

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -537,6 +537,7 @@
       <DependentUpon>StaggeredLayoutPage.xaml</DependentUpon>
     </Compile>
     <Compile Include="SamplePages\TokenizingTextBox\SampleDataType.cs" />
+    <Compile Include="SamplePages\TokenizingTextBox\SampleEmailDataType.cs" />
     <Compile Include="SamplePages\TokenizingTextBox\TokenizingTextBoxPage.xaml.cs">
       <DependentUpon>TokenizingTextBoxPage.xaml</DependentUpon>
     </Compile>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TokenizingTextBox/SampleDataType.cs

@@ -23,7 +23,7 @@ public class SampleDataType
 
         public override string ToString()
         {
-            return "Sample Data: " + Text;
+            return Text;
         }
     }
-}
+}

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TokenizingTextBox/SampleEmailDataType.cs

@@ -0,0 +1,57 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.Toolkit.Uwp.UI.Controls;
+using Windows.UI.Xaml.Controls;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.SamplePages
+{
+    /// <summary>
+    /// Sample of strongly-typed email address simulated data for <see cref="TokenizingTextBox"/>.
+    /// </summary>
+    public class SampleEmailDataType
+    {
+        /// <summary>
+        /// Gets or sets symbol to display.
+        /// </summary>
+        public Symbol Icon { get; set; }
+
+        /// <summary>
+        /// Gets or sets the first name .
+        /// </summary>
+        public string FirstName { get; set; }
+
+        /// <summary>
+        /// Gets or sets the family name .
+        /// </summary>
+        public string FamilyName { get; set; }
+
+        /// <summary>
+        /// Gets the display text.
+        /// </summary>
+        public string DisplayName
+        {
+            get
+            {
+                return string.Format("{0} {1}", FirstName, FamilyName);
+            }
+        }
+
+        /// <summary>
+        /// Gets the formatted email address
+        /// </summary>
+        public string EmailAddress
+        {
+            get
+            {
+                return string.Format("{0} <{1}.{2}@contoso.com>", DisplayName, FirstName, FamilyName);
+            }
+        }
+
+        public override string ToString()
+        {
+            return EmailAddress;
+        }
+    }
+}

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

@@ -1,25 +1,118 @@
+private async void EmailTokenItemClick(object sender, ItemClickEventArgs e)
+{
+    MessageDialog md = new MessageDialog($"email address {(e.ClickedItem as SampleEmailDataType)?.EmailAddress} clicked", "Clicked Item");
+    await md.ShowAsync();
+}
+
 private void TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
 {
     if (args.CheckCurrent() && args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
     {
-        if (string.IsNullOrWhiteSpace(sender.Text))
-        {
-            _ttb.SuggestedItemsSource = Array.Empty<object>();
-        }
-        else
+        _acv.RefreshFilter();
+    }
+}
+
+private void TokenItemCreating(object sender, TokenItemAddingEventArgs e)
+{
+    // Take the user's text and convert it to our data type (if we have a matching one).
+    e.Item = this._samples.FirstOrDefault((item) => item.Text.Contains(e.TokenText, System.StringComparison.CurrentCultureIgnoreCase)) ??
+             // Otherwise, create a new version of our data type
+             new SampleDataType()
+                {
+                    Text = e.TokenText,
+                    Icon = Symbol.OutlineStar
+                };
+}
+
+private void TokenItemAdded(TokenizingTextBox sender, object data)
+{
+    if (data is SampleDataType sample)
+    {
+        Debug.WriteLine("Added Token: " + sample.Text);
+    }
+    else
+    {
+        Debug.WriteLine("Added Token: " + data);
+    }
+}
+
+private void TokenItemRemoved(TokenizingTextBox sender, TokenItemRemovingEventArgs args)
+{
+    if (args.Item is SampleDataType sample)
+    {
+        Debug.WriteLine("Removed Token: " + sample.Text);
+    }
+    else
+    {
+        Debug.WriteLine("Removed Token: " + args.Item);
+    }
+}
+
+private void EmailTextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
+{
+    if (args.CheckCurrent() && args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
+    {
+        _acvEmail.RefreshFilter();
+    }
+}
+
+private void EmailTokenItemAdding(TokenizingTextBox sender, TokenItemAddingEventArgs args)
+{
+    // Search our list for a matching person
+    foreach (var person in _emailSamples)
+    {
+        if (args.TokenText.Contains(person.EmailAddress) ||
+            args.TokenText.Contains(person.DisplayName, StringComparison.CurrentCultureIgnoreCase))
         {
-            _ttb.SuggestedItemsSource = _samples.Where((item) => item.Text.Contains(sender.Text, System.StringComparison.CurrentCultureIgnoreCase)).OrderByDescending(item => item.Text);
+            args.Item = person;
+            return;
         }
     }
+
+    // Otherwise don't create a token.
+    args.Cancel = true;
+}
+
+private void EmailTokenItemAdded(TokenizingTextBox sender, object args)
+{
+    if (args is SampleEmailDataType sample)
+    {
+        Debug.WriteLine("Added Email: " + sample.DisplayName);
+    }
+    else
+    {
+        Debug.WriteLine("Added Token: " + args);
+    }
+
+    _acvEmail.RefreshFilter();
 }
 
-private async void TokenItemCreating(object sender, TokenItemCreatingEventArgs e)
+private void EmailTokenItemRemoved(TokenizingTextBox sender, object args)
 {
-    // Take the user's text and convert it to our data type.
-    using (e.GetDeferral())
+    if (args is SampleEmailDataType sample)
     {
-		// Can do an async lookup here as well.
+        Debug.WriteLine("Removed Email: " + sample.DisplayName);
+    }
+    else
+    {
+        Debug.WriteLine("Removed Token: " + args);
+    }
 
-        e.Item = _samples.FirstOrDefault((item) => item.Text.Contains(e.TokenText, System.StringComparison.CurrentCultureIgnoreCase));
+    _acvEmail.RefreshFilter();
+}
+
+private void EmailList_ItemClick(object sender, ItemClickEventArgs e)
+{
+    if (e.ClickedItem != null)
+    {
+        _ttbEmail.Items.Add(e.ClickedItem);
+        _ttbEmail.Text = string.Empty;
+        _acvEmail.RefreshFilter();
     }
+}
+
+private void ClearButtonClick(object sender, RoutedEventArgs e)
+{
+    _ttbEmail.Items.Clear();
+    _acvEmail.RefreshFilter();
 }

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/TokenizingTextBox/TokenizingTextBoxPage.xaml

@@ -9,5 +9,6 @@
     <Grid Visibility="Collapsed">
         <SymbolIcon Symbol="Accept"/>
         <controls:TokenizingTextBox />
+        <controls:TokenizingTextBoxItem />
     </Grid>
-</Page>
+</Page>