Filtering in .NET MAUI ListView (SfListView)

29 Jul 202611 minutes to read

This section explains how to filter the data and its related operations in the SfListView.

To get start quickly with filtering in .NET MAUI ListView, you can check on this video:

Programmatic filtering

The SfListView supports data filtering by setting the SfListView.DataSource.Filter property. The Filter property accepts a Predicate<object> delegate that returns true if the item should be displayed and false if it should be excluded. You have to call the SfListView.DataSource.RefreshFilter method after assigning the Filter property for refreshing the view.

The FilterChanged event is raised once filtering is applied to the SfListView.

The FilterContacts method filters the data that contains the specified text. Assign the FilterContacts method to the SfListView.DataSource.Filter predicate to filter the ContactName. The following code example shows how to apply filtering in the SfListView:

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
             x:Class="FilteringSample.MainPage">
 <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <SearchBar x:Name="filterText"
               HeightRequest="40"
               Placeholder="Search here to filter"
               TextChanged="OnFilterTextChanged"/>
    <syncfusion:SfListView x:Name="listView" Grid.Row="1"
                           ItemSize="60"
                           ItemsSource="{Binding Items}"/>
  </Grid>
</ContentPage>

MainPage.xaml.cs

public MainPage()
{
    InitializeComponent();
    var grid = new Grid();
    grid.RowDefinitions.Add(new RowDefinition());
    grid.RowDefinitions.Add(new RowDefinition());

    var searchBar = new SearchBar() { Placeholder = "Search here to filter" };
    searchBar.TextChanged += OnFilterTextChanged;

    var listView = new SfListView();
    listView.ItemsSource = viewModel.Items;
    listView.ItemSize = 60;

    grid.Children.Add(searchBar);
    grid.Children.Add(listView);
    grid.SetRow(searchBar, 0);
    grid.SetRow(listView, 1);
}

The following code example illustrates how to filter the data using FilterContacts method in the ViewModel:

ViewModel.cs

private void OnFilterTextChanged(object sender, TextChangedEventArgs e)
{
    if (listView.DataSource != null)
    {
        this.listView.DataSource.Filter = FilterContacts;
        this.listView.DataSource.RefreshFilter();
    }
}

private bool FilterContacts(object obj)
{
    if (searchBar == null || searchBar.Text == null)
        return true;

    var taskInfo = obj as TaskInfo;
    if (taskInfo == null)
        return false;
    if (taskInfo.Title.ToLower().Contains(searchBar.Text.ToLower()) || taskInfo.Description.ToLower().Contains(searchBar.Text.ToLower()))
        return true;
    else
        return false;
}

The following screenshot shows the output rendered when the items are filtered:

Filter based on multiple criteria

The SfListView allows filtering the items based on multiple criteria. The following code example shows how to filter the data using multiple properties combined with logical operators:

MainPage.xaml.cs

private bool FilterContacts(object obj)
{
  if (searchBar == null || searchBar.Text == null)
     return true;

  var taskInfo = obj as TaskInfo;
  if (taskInfo == null)
     return false;
  if (taskInfo.Title.ToLower().Contains(searchBar.Text.ToLower()) &&
      taskInfo.Status == "Open" &&
      taskInfo.DueDate >= DateTime.Today)
     return true;
  else
     return false;
}

NOTE

The Status and DueDate properties must exist on the TaskInfo model class for the multi-criteria filter to compile.

Getting the filtered data

You can get filtered items from the view and modify it in the SfListView.DataSource.FilterChanged event. When the filter is applied, the filtered items are available in SfListView.DataSource.DisplayItems.

Subscribe to the FilterChanged event during page initialization (e.g., in the MainPage constructor) so that the handler is registered before any filter is applied:

MainPage.xaml.cs

public MainPage()
{
    InitializeComponent();
    listView = this.listView;
    listView.BindingContext = new ViewModel();
    listView.ItemsSource = (listView.BindingContext as ViewModel).Items;
    listView.DataSource.FilterChanged += DataSource_FilterChanged;
}
...
private void DataSource_FilterChanged(object sender, NotifyCollectionChangedEventArgs e)
{
   //TaskInfo is model class
 ObservableCollection<TaskInfo> taskInfo = new ObservableCollection<TaskInfo>();
  // Get the filtered items
  var items = (sender as DataSource).DisplayItems;
  foreach (TaskInfo item in items)
     taskInfo.Add(item as TaskInfo);
}

Clear filtering

The SfListView allows clearing the filters by setting the DataSource.Filter to null, and call the DataSource.RefreshFilter method.

MainPage.xaml.cs

listView.DataSource.Filter = null;
listView.DataSource.RefreshFilter();

Sort the filtered items

Filtered items can be sorted by adding a SortDescriptor in the FilterChanged event. The following code example shows how to sort the filtered items:

MainPage.xaml.cs

private void DataSource_FilterChanged(object sender, NotifyCollectionChangedEventArgs e)
{
  listView.DataSource.SortDescriptors.Clear();
  listView.DataSource.SortDescriptors.Add(
          new SortDescriptor 
          { 
             PropertyName = "Title", 
             Direction = ListSortDirection.Ascending 
          }); 
  listView.RefreshView();
}

The following screenshot shows the output rendered when the filtered items are sorted:

Display custom filter user interface

This section explains how to enable and customize the filtering user interface (UI) in the .NET MAUI ListView (SfListView). You can customize the filter data using the FilteringUITemplate property. The filtering UI can be displayed by using the ShowFilteringUICommand, which displays the defined template inside a popup.

The SfListView provides the following APIs to configure and display the filtering UI:

• FilteringUITitle: Specifies the title displayed in the filtering UI popup.
• ShowFilteringUICommand: Triggers the filtering UI programmatically, typically from a button.
• FilteringUITemplate: Defines the custom layout of the filtering UI, allowing you to design filter elements such as buttons, chips, or other controls.

MainPage.xaml

<syncfusion:SfListView x:Name="listView"
                       ItemsSource="{Binding Employees}"
                       FilteringUITitle="Filtering">

    <!-- Trigger Filtering UI -->
    <syncfusion:SfListView.HeaderTemplate>
        <DataTemplate>
            <Button Text="Filter"
                    Command="{Binding Source={x:Reference listView}, Path=ShowFilteringUICommand}" />
        </DataTemplate>
    </syncfusion:SfListView.HeaderTemplate>

    <!-- Custom Filtering UI -->
    <syncfusion:SfListView.FilteringUITemplate>
        <DataTemplate>
            <VerticalStackLayout Padding="14" Spacing="10">
                <Label Text="Department" FontAttributes="Bold"/>
                <!-- Define custom filter UI elements here -->
            </VerticalStackLayout>
        </DataTemplate>
    </syncfusion:SfListView.FilteringUITemplate>

</syncfusion:SfListView>

MainPage.xaml.cs

listView.FilteringUITitle = "Filtering";

var command = listView.ShowFilteringUICommand;

listView.FilteringUITemplate = new DataTemplate(() =>
{
    return new VerticalStackLayout
    {
        Padding = 14,
        Children =
        {
            new Label
            {
                Text = "Department",
                FontAttributes = FontAttributes.Bold
            }
        }
    };
});

The following screenshot shows the filtering UI popup displayed in the SfListView:

See also

How to filter the items in .NET MAUI ListView (SfListView) using MVVM