Use ICollectionView for keyboard navigation and ensure completion of …

…unit testing for CanFilterItems_WithCollectionView_FiltersSuggestions.

MainDemo.Wpf/Fields.xaml

@@ -1,8 +1,8 @@
 <UserControl x:Class="MaterialDesignDemo.Fields"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:converters="clr-namespace:MaterialDesignDemo.Converters"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:domain="clr-namespace:MaterialDesignDemo.Domain"
              xmlns:domain1="clr-namespace:MaterialDesignDemo.Domain"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
@@ -765,8 +765,10 @@
           HorizontalAlignment="Left"
           VerticalAlignment="Top">
       <Grid.ColumnDefinitions>
-        <ColumnDefinition Width="300" />
-        <ColumnDefinition Width="300" />
+        <ColumnDefinition Width="Auto" />
+        <ColumnDefinition Width="Auto" />
+        <ColumnDefinition Width="Auto" />
+        <ColumnDefinition Width="Auto" />
       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
         <RowDefinition Height="Auto" />
@@ -779,13 +781,13 @@
                  Margin="0,0,0,10"
                  VerticalAlignment="Center"
                  Style="{StaticResource MaterialDesignHeadline5TextBlock}"
-                 Text="TextBox With AutoSuggestion" />
+                 Text="AutoSuggestBox" />
       <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">
@@ -797,18 +799,73 @@
       <TextBlock Grid.Row="1"
                  Grid.Column="1"
                  Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
-                 Text="AutoSuggestionItemTemplate" />
+                 Text="AutoSuggestBox with ItemTemplate" />
       <smtx:XamlDisplay Grid.Row="2"
                         Grid.Column="1"
                         UniqueKey="fields_autosuggestion_2">
-        <materialDesign:AutoSuggestBox materialDesign:HintAssist.HelperText="Select your color"
-                                       materialDesign:TextFieldAssist.HasClearButton="True"
+        <materialDesign:AutoSuggestBox materialDesign:HintAssist.HelperText="Select color"
                                        materialDesign:HintAssist.Hint="Color"
+                                       materialDesign:TextFieldAssist.HasClearButton="True"
+                                       DropDownElevation="Dp0"
+                                       Suggestions="{Binding AutoSuggestBox2Suggestions}"
+                                       Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
+                                       ValueMember="Key">
+          <materialDesign:AutoSuggestBox.ItemTemplate>
+            <DataTemplate>
+              <DockPanel>
+                <Border Width="20"
+                        Height="20"
+                        Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
+                        CornerRadius="10" />
+                <TextBlock Margin="10,0,0,0" Text="{Binding Key}" />
+              </DockPanel>
+            </DataTemplate>
+          </materialDesign:AutoSuggestBox.ItemTemplate>
+        </materialDesign:AutoSuggestBox>
+      </smtx:XamlDisplay>
+
+      <TextBlock Grid.Row="1"
+                 Grid.Column="2"
+                 Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
+                 Text="Filled AutoSuggestBox" />
+      <smtx:XamlDisplay Grid.Row="2"
+                        Grid.Column="2"
+                        UniqueKey="fields_autosuggestion_3">
+        <materialDesign:AutoSuggestBox materialDesign:HintAssist.Hint="Color"
+                                       materialDesign:TextFieldAssist.HasClearButton="True"
+                                       DropDownElevation="Dp0"
+                                       Style="{StaticResource MaterialDesignFilledAutoSuggestBox}"
+                                       Suggestions="{Binding AutoSuggestBox2Suggestions}"
+                                       Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
+                                       ValueMember="Key">
+          <materialDesign:AutoSuggestBox.ItemTemplate>
+            <DataTemplate>
+              <DockPanel>
+                <Border Width="20"
+                        Height="20"
+                        Background="{Binding Value, Converter={StaticResource ColorToBrushConverter}}"
+                        CornerRadius="10" />
+                <TextBlock Margin="10,0,0,0" Text="{Binding Key}" />
+              </DockPanel>
+            </DataTemplate>
+          </materialDesign:AutoSuggestBox.ItemTemplate>
+        </materialDesign:AutoSuggestBox>
+      </smtx:XamlDisplay>
+
+      <TextBlock Grid.Row="1"
+                 Grid.Column="2"
+                 Style="{StaticResource MaterialDesignSubtitle1TextBlock}"
+                 Text="Outlined AutoSuggestBox" />
+      <smtx:XamlDisplay Grid.Row="2"
+                        Grid.Column="2"
+                        UniqueKey="fields_autosuggestion_3">
+        <materialDesign:AutoSuggestBox materialDesign:HintAssist.Hint="Color"
+                                       materialDesign:TextFieldAssist.HasClearButton="True"
                                        DropDownElevation="Dp0"
-                                       ValueMember="Key"
-                                       SuggestionChosen="AutoSuggestBox_SuggestionChosen"
+                                       Style="{StaticResource MaterialDesignOutlinedAutoSuggestBox}"
                                        Suggestions="{Binding AutoSuggestBox2Suggestions}"
-                                       Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
+                                       Text="{Binding AutoSuggestBox2Text, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
+                                       ValueMember="Key">
           <materialDesign:AutoSuggestBox.ItemTemplate>
             <DataTemplate>
               <DockPanel>

MainDemo.Wpf/Fields.xaml.cs

@@ -13,10 +13,4 @@ public Fields()
 
     private void Hyperlink_OnRequestNavigate(object sender, RequestNavigateEventArgs e)
         => Link.OpenInBrowser(e.Uri.AbsoluteUri);
-
-    private void AutoSuggestBox_SuggestionChosen(object sender, RoutedPropertyChangedEventArgs<object> e)
-    {
-        MessageBox.Show($"You chose {e.NewValue}");
-    }
-
 }

MaterialDesignThemes.UITests/Samples/AutoSuggestBoxes/AutoSuggestTextBoxWithCollectionView.xaml

@@ -3,7 +3,8 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
-             xmlns:local="clr-namespace:MaterialDesignThemes.UITests.Samples.AutoSuggestBoxes" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:local="clr-namespace:MaterialDesignThemes.UITests.Samples.AutoSuggestBoxes"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              mc:Ignorable="d"
              d:DataContext="{d:DesignInstance Type={x:Type local:AutoSuggestTextBoxWithCollectionViewViewModel}}"
              d:DesignHeight="450" d:DesignWidth="800">
@@ -21,7 +22,7 @@
               IsSynchronizedWithCurrentItem="True"/>
     <ListBox ItemsSource="{Binding Suggestions}"
           IsSynchronizedWithCurrentItem="True"/>
-    -->
+    -->    
 
   </StackPanel>
 </UserControl>

MaterialDesignThemes.UITests/Samples/AutoSuggestBoxes/AutoSuggestTextBoxWithCollectionView.xaml.cs

@@ -1,5 +1,4 @@
 using CommunityToolkit.Mvvm.ComponentModel;
-using MaterialDesignThemes.UITests.Samples.AutoSuggestTextBoxes;
 using System.Collections.ObjectModel;
 using System.ComponentModel;
 using System.Windows.Data;

MaterialDesignThemes.UITests/Samples/AutoSuggestBoxes/AutoSuggestTextBoxWithTemplate.xaml

@@ -1,8 +1,8 @@
 <UserControl x:Class="MaterialDesignThemes.UITests.Samples.AutoSuggestTextBoxes.AutoSuggestTextBoxWithTemplate"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:MaterialDesignThemes.UITests.Samples.AutoSuggestTextBoxes"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              d:DataContext="{d:DesignInstance Type=local:AutoSuggestTextBoxWithTemplateViewModel}"

MaterialDesignThemes.UITests/WPF/AutoSuggestBoxes/AutoSuggestTextBoxTests.cs

@@ -71,7 +71,7 @@ public async Task CanChoiceItem_FromTheSuggestions_AssertTheTextUpdated()
         recorder.Success();
     }
 
-    [Fact(Skip = "This needs ICollectionView")]
+    [Fact]
     public async Task CanFilterItems_WithCollectionView_FiltersSuggestions()
     {
         await using var recorder = new TestRecorder(App);
@@ -103,8 +103,6 @@ public async Task CanFilterItems_WithCollectionView_FiltersSuggestions()
         recorder.Success();
     }
 
-    //TODO: Test case with ICollectionSource
-
     private static async Task AssertExists(IVisualElement<ListBox> suggestionListBox, string text, bool existsOrNotCheck = true)
     {
         try

MaterialDesignThemes.Wpf/AutoSuggestBox.cs

@@ -1,4 +1,6 @@
 using System.Collections;
+using System.ComponentModel;
+using System.Windows.Data;
 using System.Windows.Media;
 
 namespace MaterialDesignThemes.Wpf;
@@ -43,15 +45,6 @@ public string DisplayMember
     public static readonly DependencyProperty DisplayMemberProperty =
         DependencyProperty.Register("DisplayMember", typeof(string), typeof(AutoSuggestBox), new PropertyMetadata(default(string)));
 
-
-    public CornerRadius CornerRadius
-    {
-        get => (CornerRadius)GetValue(CornerRadiusProperty);
-        set => SetValue(CornerRadiusProperty, value);
-    }
-    public static readonly DependencyProperty CornerRadiusProperty =
-        DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(AutoSuggestBox), new PropertyMetadata(default(CornerRadius)));
-
     public Brush DropDownBackground
     {
         get => (Brush)GetValue(DropDownBackgroundProperty);
@@ -101,6 +94,26 @@ public bool IsSuggestionOpen
     public static readonly DependencyProperty IsSuggestionOpenProperty =
         DependencyProperty.Register("IsSuggestionOpen", typeof(bool), typeof(AutoSuggestBox), new PropertyMetadata(default(bool)));
 
+    public object SelectedItem
+    {
+        get => GetValue(SelectedItemProperty);
+        set => SetValue(SelectedItemProperty, value);
+    }
+    public static readonly DependencyProperty SelectedItemProperty =
+        DependencyProperty.Register("SelectedItem", typeof(object), typeof(AutoSuggestBox), new PropertyMetadata(default(object)));
+
+
+    public object SelectedValue
+    {
+        get => GetValue(SelectedValueProperty);
+        set => SetValue(SelectedValueProperty, value);
+    }
+    public static readonly DependencyProperty SelectedValueProperty =
+        DependencyProperty.Register("SelectedValue", typeof(object), typeof(AutoSuggestBox), new PropertyMetadata(default(object)));
+
+
+
+
 
     public static readonly RoutedEvent SuggestionChosenEvent =
         EventManager.RegisterRoutedEvent(
@@ -117,10 +130,7 @@ public event RoutedPropertyChangedEventHandler<object> SuggestionChosen
 
     #endregion
 
-    static AutoSuggestBox()
-    {
-        DefaultStyleKeyProperty.OverrideMetadata(typeof(AutoSuggestBox), new FrameworkPropertyMetadata(typeof(AutoSuggestBox)));
-    }
+    static AutoSuggestBox() => DefaultStyleKeyProperty.OverrideMetadata(typeof(AutoSuggestBox), new FrameworkPropertyMetadata(typeof(AutoSuggestBox)));
 
     #region Override methods
 
@@ -170,11 +180,6 @@ protected override void OnLostFocus(RoutedEventArgs e)
         base.OnLostFocus(e);
         CloseAutoSuggestionPopUp();
     }
-
-    #endregion
-
-    #region Callback handlers
-
     protected override void OnTextChanged(TextChangedEventArgs e)
     {
         base.OnTextChanged(e);
@@ -188,7 +193,7 @@ protected override void OnTextChanged(TextChangedEventArgs e)
 
     #endregion
 
-    #region Methods
+    #region Callback handlers
 
     private void AutoSuggestionListBox_PreviewMouseDown(object sender, MouseButtonEventArgs e)
     {
@@ -201,6 +206,10 @@ private void AutoSuggestionListBox_PreviewMouseDown(object sender, MouseButtonEv
         }
     }
 
+    #endregion
+
+    #region Methods    
+
     private void CloseAutoSuggestionPopUp()
     {
         IsSuggestionOpen = false;
@@ -229,21 +238,23 @@ private void DecrementSelection()
     {
         if (_autoSuggestBoxList is null)
             return;
-        if (_autoSuggestBoxList.SelectedIndex == 0 || _autoSuggestBoxList.SelectedIndex == -1)
-            _autoSuggestBoxList.SelectedIndex = _autoSuggestBoxList.Items.Count - 1;
+        ICollectionView collectionView = CollectionViewSource.GetDefaultView(Suggestions);
+        if (collectionView.IsCurrentBeforeFirst)
+            collectionView.MoveCurrentToLast();
         else
-            _autoSuggestBoxList.SelectedIndex -= 1;
+            collectionView.MoveCurrentToPrevious();
         _autoSuggestBoxList.ScrollIntoView(_autoSuggestBoxList.SelectedItem);
     }
 
     private void IncrementSelection()
     {
         if (_autoSuggestBoxList is null)
             return;
-        if (_autoSuggestBoxList.SelectedIndex == _autoSuggestBoxList.Items.Count - 1)
-            _autoSuggestBoxList.SelectedIndex = 0;
+        ICollectionView collectionView = CollectionViewSource.GetDefaultView(Suggestions);
+        if (collectionView.IsCurrentAfterLast)
+            collectionView.MoveCurrentToFirst();
         else
-            _autoSuggestBoxList.SelectedIndex += 1;
+            collectionView.MoveCurrentToNext();
         _autoSuggestBoxList.ScrollIntoView(_autoSuggestBoxList.SelectedItem);
     }
 

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.AutoSuggestBox.xaml

@@ -20,7 +20,7 @@
             <wpf:ElevationMarginConverter x:Key="ElevationMarginConverter" />
             <wpf:ElevationRadiusConverter x:Key="ElevationRadiusConverter" Multiplier="-1" />
           </ControlTemplate.Resources>
-          <Grid Cursor="{TemplateBinding Cursor, Converter={StaticResource ArrowCursorConverter}}" VerticalAlignment="Center">
+          <Grid VerticalAlignment="Center" Cursor="{TemplateBinding Cursor, Converter={StaticResource ArrowCursorConverter}}">
             <VisualStateManager.VisualStateGroups>
               <VisualStateGroup x:Name="FocusStates">
                 <VisualState x:Name="Focused">
@@ -207,26 +207,28 @@
             <wpf:PopupEx x:Name="PART_AutoSuggestBoxPopup"
                          MaxHeight="{TemplateBinding DropDownMaxHeight}"
                          AllowsTransparency="True"
-                         Visibility="Collapsed"
                          Focusable="False"
                          IsOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSuggestionOpen, Mode=TwoWay}"
                          PopupAnimation="Slide"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
-                         StaysOpen="False">
+                         StaysOpen="False"
+                         Visibility="Collapsed">
               <wpf:Card x:Name="PopupCard"
-                        Background="{TemplateBinding DropDownBackground}"
                         Margin="{TemplateBinding DropDownElevation, Converter={StaticResource ElevationMarginConverter}}"
+                        Background="{TemplateBinding DropDownBackground}"
                         Foreground="{DynamicResource MaterialDesignBody}"
                         RenderOptions.ClearTypeHint="Enabled"
-                        Style="{StaticResource MaterialDesignElevatedCard}"
-                        UniformCornerRadius="{TemplateBinding CornerRadius}">
+                        Style="{StaticResource MaterialDesignElevatedCard}">
                 <ListBox x:Name="PART_AutoSuggestBoxList"
                          Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=ActualWidth}"
                          DisplayMemberPath="{TemplateBinding DisplayMember}"
                          Focusable="False"
+                         IsSynchronizedWithCurrentItem="True"
                          ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
                          ItemTemplate="{TemplateBinding ItemTemplate}"
                          ItemsSource="{TemplateBinding Suggestions}"
+                         SelectedItem="{TemplateBinding SelectedItem}"
+                         SelectedValue="{TemplateBinding SelectedValue}"
                          SelectedValuePath="{TemplateBinding ValueMember}"
                          Style="{DynamicResource MaterialDesignCardsListBox}" />
               </wpf:Card>
@@ -551,14 +553,13 @@
          BasedOn="{StaticResource MaterialDesignFloatingHintAutoSuggestBox}">
     <Setter Property="Padding" Value="{x:Static wpf:Constants.FilledTextBoxDefaultPadding}" />
     <Setter Property="wpf:TextFieldAssist.HasFilledTextField" Value="True" />
-    <Setter Property="wpf:TextFieldAssist.TextFieldCornerRadius" Value="4,4,0,0" />
+    <Setter Property="wpf:TextFieldAssist.TextFieldCornerRadius" Value="4" />
     <Setter Property="wpf:TextFieldAssist.UnderlineCornerRadius" Value="0" />
   </Style>
 
   <Style x:Key="MaterialDesignOutlinedAutoSuggestBox"
          TargetType="{x:Type wpf:AutoSuggestBox}"
          BasedOn="{StaticResource MaterialDesignFloatingHintAutoSuggestBox}">
-    <Setter Property="CornerRadius" Value="0 0 4 4" />
     <Setter Property="DropDownElevation" Value="Dp0" />
     <Setter Property="Padding" Value="{x:Static wpf:Constants.OutlinedTextBoxDefaultPadding}" />
     <Setter Property="wpf:TextFieldAssist.HasOutlinedTextField" Value="True" />