Articles in this section
Category / Section

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

3 mins read

You can filter ListViewItems  in MVVM using behavior in .NET MAUI ListView (SfListView).

XAML

Define the ContentPage behavior.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FilteringDemo.Filtering"
             Title="Filtering" 
             xmlns:local="clr-namespace:FilteringDemo" 
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"  
             BackgroundColor="White">
    <ContentPage.Behaviors>
        <local:Behavior/>
    </ContentPage.Behaviors>          
    <syncfusion:SfListView x:Name="listView" 
                       Grid.Row="1"
                       SelectionMode="None"
                       ItemSpacing="5,2.5,5,2.5"
                       ItemsSource="{Binding Items}"
                       Background="#f2f1f2"
                       ItemSize="100">
                <syncfusion:SfListView.ItemTemplate>
                    <DataTemplate x:Name="ItemTemplate">
                        <StackLayout Padding="2" 
                                             HeightRequest="100" 
                                             BackgroundColor="#FFFFFF" >
                            <Grid BackgroundColor ="White" Margin="10,5,10,5" >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="30"/>
                                </Grid.RowDefinitions>
                                <Label x:Name="TitleLabel"
                                             LineBreakMode="NoWrap" 
                                             Text="{Binding Title}"
                                             FontAttributes="Bold"  
                                             TextColor="Black" 
                                             FontFamily="RobotoMedium"
                                             FontSize="{OnPlatform Android={OnIdiom Phone=16, Tablet=18}, iOS={OnIdiom Phone=16, Tablet=18},MacCatalyst=18,Default=18}"/>
                                <Label Grid.Row="1" x:Name="DescriptionLabel" 
                                            Text="{Binding Description}" 
                                            TextColor="Teal" 
                                            Padding="0,5,0,0"          
                                            FontFamily="RobotoRegular"
                                            FontSize="{OnPlatform Android={OnIdiom Phone=12, Tablet=14}, iOS={OnIdiom Phone=12, Tablet=14},MacCatalyst=14, Default=12}"/>
                                <StackLayout Grid.Row="2"
                                                       Margin="0,10,0,0" 
                                                       HeightRequest="15"        
                                                       BackgroundColor="#FFE7E8E9" 
                                                       HorizontalOptions="Start"
                                                       VerticalOptions="End">
                                        <Label x:Name="TagLabel" 
                                                      LineBreakMode="NoWrap" 
                                                      Text="{Binding Tag}"  
                                                      FontFamily="RobotoRegular" 
                                                      Margin='{OnPlatform Android="4,0,4,2", Default="4,2,4,2"}' 
                                                      HorizontalOptions="Center" 
                                                      VerticalOptions="Center"
                                                      FontSize="10"  
                                                      TextColor="Black"/>
                                </StackLayout>
                            </Grid>
                        </StackLayout>
                    </DataTemplate>
                </syncfusion:SfListView.ItemTemplate>
            </syncfusion:SfListView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

C#

Trigger the TextChanged event of the SearchBar control to filter the ListView based on the SearchText. Set the Filter predicate for ListView to filter the items and call the DataSource.RefreshFilter and ListView.RefreshView methods.

public class Behavior : Behavior<ContentPage>
{
        SfListView ListView;
        SearchBar SearchBar;
        protected override void OnAttachedTo(ContentPage bindable)
        {
            ListView = bindable.FindByName<SfListView>("listView");
            SearchBar = bindable.FindByName<SearchBar>("filterText");
            SearchBar.TextChanged += SearchBar_TextChanged;
            base.OnAttachedTo(bindable);
        }
        protected override void OnDetachingFrom(ContentPage bindable)
        {
            SearchBar.TextChanged -= SearchBar_TextChanged;
            SearchBar = null;
            ListView = null;
            base.OnDetachingFrom(bindable);
        }
        private void SearchBar_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (ListView.DataSource != null)
            {
                ListView.DataSource.Filter = FilterContacts;
                ListView.DataSource.RefreshFilter();
            }
            ListView.RefreshView();
        }
        private bool FilterContacts(object obj)
        {
            if (SearchBar == null || SearchBar.Text == null)
                return true;
            var taskInfo = obj as TaskInfo;
            return (taskInfo.Title.ToLower().Contains(SearchBar.Text.ToLower())
                || taskInfo.Description.ToLower().Contains(SearchBar.Text.ToLower()));
        }
}

View Sample in GitHub

.NET MAUI ListView for Android

Filtering in .NET MAUI

Take a moment to peruse the documentation, to learn more about filtering in SfListView with code.

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied