Converting a ComboBox to an AutoCompleteBox using the WPF Toolkit

Question

I'm having a bit of trouble to achieve the conversion of a "complex" ComboBox to an equally complex AutoCompleteBox. My goal is to be able to select and set a ShoppingCart's Item to be like one of the Items of a list. Here's the three steps to take to reproduce my situation (I'm using Stylet and its SetAndNotify() INPC method):

1. Create two objects, one having only a Name property and the other one having only the other object as a property

   public class ItemModel : PropertyChangedBase
   {
       private string _name;
       public string Name
       {
           get => _name;
           set => SetAndNotify(ref _name, value);
       }
   }
   
   public class ShoppingCartModel : PropertyChangedBase
   {
       public ItemModel Item { get; set; }
   }
   

2. initialize and Populate both the ItemsList and the Shoppingcart in the DataContext (since we're using MVVM, it's the ViewModel)

   public ShoppingCartModel ShoppingCart { get; set; }
   public ObservableCollection<ItemModel> ItemsList { get; set; }
   
   public ShellViewModel()
   {
       ItemsList = new ObservableCollection<ItemModel>()
       {
           new ItemModel { Name = "T-shirt"},
           new ItemModel { Name = "Jean"},
           new ItemModel { Name = "Boots"},
           new ItemModel { Name = "Hat"},
           new ItemModel { Name = "Jacket"},
       };
   
       ShoppingCart = new ShoppingCartModel() { Item = new ItemModel() };
   }
   

3. Create the AutoCompleteBox, ComboBox, and a small TextBlock inside the View to test it all out:

   <Window [...] xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Input.Toolkit">
   
       <!-- Required Template to show the names of the Items in the ItemsList -->
       <Window.Resources>
           <DataTemplate x:Key="AutoCompleteBoxItemTemplate">
               <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="Transparent">
                   <Label Content="{Binding Name}"/>
               </StackPanel>
           </DataTemplate>
       </Window.Resources>
   
       <StackPanel>
           <!-- AutoCompleteBox: can see the items list but selecting doesn't change ShoppingCart.Item.Name -->
           <Label Content="AutoCompleteBox with ShoppingCart.Item.Name as SelectedItem:"/>
           <toolkit:AutoCompleteBox ItemsSource="{Binding ItemsList}"
                                    ValueMemberPath="Name"
                                    SelectedItem="{Binding Path=ShoppingCart.Item.Name}" 
                                    ItemTemplate="{StaticResource AutoCompleteBoxItemTemplate}"/>
   
           <!-- ComboBox: can see the items list and selecting changes ShoppingCart.Item.Name value -->
           <Label Content="ComboBox with ShoppingCart.Item.Name as SelectedValue:"/>
           <ComboBox ItemsSource="{Binding ItemsList}" 
                     DisplayMemberPath="Name"
                     SelectedValue="{Binding Path=ShoppingCart.Item.Name}"
                     SelectedValuePath="Name"
                     SelectedIndex="{Binding Path=ShoppingCart.Item}" />
   
           <!-- TextBox: Typing "Jean" or "Jacket" updates the ComboBox, but not the AutoCompleteBox -->
           <Label Content="Value of ShoppingCart.Item.Name:"/>
           <TextBox Text="{Binding Path=ShoppingCart.Item.Name}"/>
       </StackPanel>
   </window>
   

Changing the Binding Mode of the AutoCompleteBox's SelectedItem to TwoWay makes it print "[ProjectName].ItemModel" which means (I guess?) it's getting ItemModels and not strings, but I can't seem to make it work. Any help will be appreciated, thanks and feel free to edit my post if it's possible to make it smaller.

Answer 1

After a lot of attempts, I finally found the culprits :

• INPC not implemented in ShoppingCartModel.Item despite the PropertyChangedBase inheritance (either implementing INPC or remove the PropertyChangedBase inheritance work)

  public class ShoppingCartModel : PropertyChangedBase
  {
      private ItemModel _item;
      public ItemModel Item
      {
          get => _item;
          set => SetAndNotify(ref _item, value);
      }
  }
  

• AutoCompleteBox's SelectedItem must be of the same type of ItemsSource, and have a TwoWay Mode Binding

  <toolkit:AutoCompleteBox ItemsSource="{Binding ItemsList}"
                           ValueMemberPath="Name"
                           SelectedItem="{Binding Path=ShoppingCart.Item, Mode=TwoWay}" 
                           ItemTemplate="{StaticResource AutoCompleteBoxItemTemplate}"/>
  

• And finally... the most mysterious one is the ComboBox! Simply by being there it messes with the AutoCompleteBox and I have no idea why, just commenting the whole ComboBox makes it all work. If you know why the ComboBox breaks the AutoCompleteBox's binding feel free to help.

  

There's another problem though, when using an AutoCompleteBox inside a ListView, but it's better to create a separate question for that issue here