Implement the AutoSuggestion in TextBox by using TextFieldAssist.Auto…

…SuggestionEnabled & ItemsSource

MainDemo.Wpf/Domain/FieldsViewModel.cs

@@ -1,6 +1,8 @@
-namespace MaterialDesignDemo.Domain;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Windows.Media;
 
-public class FieldsViewModel : ViewModelBase
+namespace MaterialDesignDemo.Domain
 {
     private string? _name;
     private string? _name2;
@@ -13,9 +15,16 @@ public class FieldsViewModel : ViewModelBase
 
     public string? Name
     {
-        get => _name;
-        set => SetProperty(ref _name, value);
-    }
+        private string? _name;
+        private string? _name2;
+        private string? _password1 = string.Empty;
+        private string? _password2 = "pre-filled";
+        private string? _password1Validated = "pre-filled";
+        private string? _password2Validated = "pre-filled";
+        private string? _text1;
+        private string? _text2;
+        private string? _autoSuggestionTextBox1 = string.Empty;
+        private string? _autoSuggestionTextBox2 = string.Empty;
 
     public string? Name2
     {
@@ -71,13 +80,82 @@ public string? Password2Validated
 
     public FieldsTestObject TestObject => new() { Name = "Mr. Test" };
 
-    public ICommand SetPassword1FromViewModelCommand { get; }
-    public ICommand SetPassword2FromViewModelCommand { get; }
 
-    public FieldsViewModel()
-    {
-        SetPassword1FromViewModelCommand = new AnotherCommandImplementation(_ => Password1 = "Set from ViewModel!");
-        SetPassword2FromViewModelCommand = new AnotherCommandImplementation(_ => Password2 = "Set from ViewModel!");
+        public string? AutoSuggestionTextBox1
+        {
+            get { return _autoSuggestionTextBox1; }
+            set { SetProperty(ref _autoSuggestionTextBox1, value); }
+        }        
+
+
+        public string? AutoSuggestionTextBox2
+        {
+            get { return _autoSuggestionTextBox2; }
+            set { SetProperty(ref _autoSuggestionTextBox2, value); }
+        }
+
+
+        private ObservableCollection<string> listSuggestion;
+
+        public ObservableCollection<string> ListSuggestion
+        {
+            get { return listSuggestion; }
+            set { SetProperty(ref listSuggestion, value); }
+        }
+
+
+        private ObservableCollection<string> baseListSuggestion;
+
+        public ObservableCollection<string> BaseListSuggestion
+        {
+            get { return baseListSuggestion; }
+            set { SetProperty(ref baseListSuggestion, value); }
+        }
+
+        private ObservableCollection<KeyValuePair<string, Brush>> listColors;
+
+        public ObservableCollection<KeyValuePair<string, Brush>> ListColors
+        {
+            get { return listColors; }
+            set { SetProperty(ref listColors, value); }
+        }
+
+        public FieldsTestObject TestObject => new() { Name = "Mr. Test" };
+
+        public ICommand AutoSuggestionTextBox1ChangedCommand { get; }
+        public ICommand AutoSuggestionTextBox2ChangedCommand { get; }
+        public ICommand SetPassword1FromViewModelCommand { get; }
+        public ICommand SetPassword2FromViewModelCommand { get; }
+
+        public FieldsViewModel()
+        {
+            SetPassword1FromViewModelCommand = new AnotherCommandImplementation(_ => Password1 = "Set from ViewModel!");
+            SetPassword2FromViewModelCommand = new AnotherCommandImplementation(_ => Password2 = "Set from ViewModel!");
+            BaseListSuggestion = new ObservableCollection<string>()
+            {
+                "Burger", "Fries", "Shake", "Lettuce"
+            };
+            ListColors = new ObservableCollection<KeyValuePair<string, Brush>>(GetColors());
+            ListSuggestion = BaseListSuggestion;
+            AutoSuggestionTextBox1ChangedCommand = new AnotherCommandImplementation(_ =>
+            {
+                ListSuggestion = new ObservableCollection<string>(BaseListSuggestion.Where(s => s.ToLower().Contains(AutoSuggestionTextBox1.ToLower())));
+            });
+            AutoSuggestionTextBox2ChangedCommand = new AnotherCommandImplementation(_ =>
+            {
+                ListColors = new ObservableCollection<KeyValuePair<string, Brush>>(GetColors().Where(s => s.Key.StartsWith(AutoSuggestionTextBox2)));
+            });
+        }
+
+        private IEnumerable<KeyValuePair<string, Brush>> GetColors()
+        {
+            return typeof(Colors)
+                .GetProperties()
+                .Where(prop =>
+                    typeof(Color).IsAssignableFrom(prop.PropertyType))
+                .Select(prop =>
+                    new KeyValuePair<string, Brush>(prop.Name, new SolidColorBrush((Color)prop.GetValue(null))));
+        }
     }
 }
 

MainDemo.Wpf/Fields.xaml

@@ -4,6 +4,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:domain="clr-namespace:MaterialDesignDemo.Domain"
              xmlns:domain1="clr-namespace:MaterialDesignDemo.Domain"
+             xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:smtx="clr-namespace:ShowMeTheXAML;assembly=ShowMeTheXAML"
@@ -757,5 +758,83 @@
         </smtx:XamlDisplay>
       </StackPanel>
     </Grid>
+
+    <Grid Margin="0,48,0,0"
+          HorizontalAlignment="Left"
+          VerticalAlignment="Top">
+      <Grid.ColumnDefinitions>
+        <ColumnDefinition Width="300" />
+        <ColumnDefinition Width="300" />
+      </Grid.ColumnDefinitions>
+      <Grid.RowDefinitions>
+        <RowDefinition Height="Auto" />
+        <RowDefinition Height="Auto" />
+        <RowDefinition Height="Auto" />
+      </Grid.RowDefinitions>
+      <TextBlock Grid.Row="0"
+                 Grid.Column="0"
+                 Grid.ColumnSpan="3"
+                 Margin="0,0,0,10"
+                 VerticalAlignment="Center"
+                 Style="{StaticResource MaterialDesignHeadline5TextBlock}"
+                 Text="TextBox With AutoSuggestion" />
+      <TextBlock Grid.Row="1"
+                 Grid.Column="0"
+                 VerticalAlignment="Center"
+                 Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
+                 Text="Simple source list" />
+      <smtx:XamlDisplay Grid.Row="2"
+                        Grid.Column="0"
+                        UniqueKey="fields_autosuggestion_1">
+        <TextBox materialDesign:TextFieldAssist.AutoSuggestionEnabled="True"
+                 materialDesign:TextFieldAssist.AutoSuggestionItemsSource="{Binding ListSuggestion}"
+                 Text="{Binding AutoSuggestionTextBox1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
+          <i:Interaction.Triggers>
+            <i:EventTrigger EventName="TextChanged">
+              <i:InvokeCommandAction Command="{Binding AutoSuggestionTextBox1ChangedCommand}" />
+            </i:EventTrigger>
+          </i:Interaction.Triggers>
+        </TextBox>
+      </smtx:XamlDisplay>
+
+      <TextBlock Grid.Row="1"
+                 Grid.Column="1"
+                 Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
+                 Text="AutoSuggestionItemTemplate" />
+      <smtx:XamlDisplay Grid.Row="2"
+                        Grid.Column="1"
+                        UniqueKey="fields_autosuggestion_2">
+        <TextBox materialDesign:TextFieldAssist.AutoSuggestionEnabled="True"
+                 materialDesign:TextFieldAssist.AutoSuggestionItemsSource="{Binding ListColors}"
+                 materialDesign:TextFieldAssist.AutoSuggestionValueMember="Key"
+                 materialDesign:ValidationAssist.HasError="False"
+                 Text="{Binding AutoSuggestionTextBox2, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
+          <i:Interaction.Triggers>
+            <i:EventTrigger EventName="TextChanged">
+              <i:InvokeCommandAction Command="{Binding AutoSuggestionTextBox2ChangedCommand}" />
+            </i:EventTrigger>
+          </i:Interaction.Triggers>
+          <TextBox.Style>
+            <Style TargetType="TextBox" BasedOn="{StaticResource MaterialDesignTextBox}">
+              <Setter Property="Margin" Value="0,8" />
+              <Setter Property="VerticalAlignment" Value="Center" />
+              <Setter Property="materialDesign:TextFieldAssist.AutoSuggestionItemTemplate">
+                <Setter.Value>
+                  <DataTemplate>
+                    <DockPanel>
+                      <Border Width="20"
+                              Height="20"
+                              Background="{Binding Value}"
+                              CornerRadius="10" />
+                      <TextBlock Margin="10,0,0,0" Text="{Binding Key}" />
+                    </DockPanel>
+                  </DataTemplate>
+                </Setter.Value>
+              </Setter>
+            </Style>
+          </TextBox.Style>
+        </TextBox>
+      </smtx:XamlDisplay>
+    </Grid>
   </StackPanel>
 </UserControl>