How to Add Custom Filtering in WinUI ComboBox Control

This article explains how to add custom filtering in the WinUI ComboBox control.

The ComboBox control provides support to apply your custom filter logic to suggest the items based on your filter criteria by using the FilterBehavior property. The default value of FilterBehavior is null.

Now, let us create a custom filtering class to apply our filter logic to ComboBox control by the following steps.

Step 1: Create a class that derives from the IComboBoxFilterBehavior interface.

C#

/// <summary>
/// Represent a custom filtering behavior for the `ComboBox` control. 
/// </summary>
public class CityFilteringBehavior : IComboBoxFilterBehavior
{

}

Step 2: Then, implement the GetMatchingIndexes method of IComboBoxFilterBehavior interface to create your suggestion list (containing the indices of the filtered items) based on the text entered in the ComboBox control that needs to be shown in drop-down. The GetMatchingIndexes method contains the following arguments:

• source - The owner of the filter behavior, which holds information about ItemsSource, Items properties, and so on.
• filterInfo - Contains details about the text entered in ComboBox control. Using this text, you can prepare a suggestion list displayed in the drop-down list.

C#

/// <summary>
/// Represent a custom filtering behavior for the `ComboBox` control. 
/// </summary>
public class CityFilteringBehavior : IComboBoxFilterBehavior
{
   /// <summary>
   /// Returned suggestion list based on the city or country name entered in the ComboBox control.
   /// </summary>
   public List<int> GetMatchingIndexes(SfComboBox source, ComboBoxFilterInfo filterInfo)
   {
       List<int> filteredlist = new List<int>();
       List<cityinfo> cityItems = source.Items.OfType<cityinfo>().ToList(); 

       filteredlist.AddRange(from CityInfo item in cityItems
                             where item.CountryName.StartsWith(filterInfo.Text, StringComparison.CurrentCultureIgnoreCase) ||
                                   item.CityName.StartsWith(filterInfo.Text, StringComparison.CurrentCultureIgnoreCase)
                             select cityItems.IndexOf(item));

       return filteredlist;
   }
}

Step 3: Apply custom filtering to the ComboBox control using the FilterBehavior property.

XAML

<editors:sfcombobox textmemberpath="CityName" displaymemberpath="CityName" iseditable="True" isfilteringenabled="True" itemssource="{Binding Cities}">
       <editors:sfcombobox.filterbehavior>
           <local:cityfilteringbehavior>
       </local:cityfilteringbehavior></editors:sfcombobox.filterbehavior>
</editors:sfcombobox>

The following code demonstrates how to filter the cities based on the city or country name entered in the ComboBox control.