How to Filter the Items in .NET MAUI ListView Using MVVM?
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()));
}
}
Take a moment to peruse the documentation, to learn more about filtering in SfListView with code.
Conclusion
I hope you enjoyed learning about how to filter the items in .NET MAUI ListView (SfListView) using MVVM.
You can refer to our .NET MAUI ListView feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
