How to apply alternate item background in .NET MAUI ListView(SfListView)?
You can change the background color of the ItemTemplate loaded in the .NET MAUI ListView (SfListView) based on the value changed in the Trigger, considering the Selection state.
XAML
Defined a Trigger for the parent element of the ListView ItemTemplate and bind to a model class property to change the Background color of the item.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ListViewMaui.MainPage"
xmlns:local="clr-namespace:ListViewMaui"
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.ListView;assembly=Syncfusion.Maui.ListView"
BackgroundColor="{DynamicResource SecondaryColor}">
<ContentPage.Resources>
<ResourceDictionary>
<local:IndexToColorConverter x:Key="IndexToColorConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<StackLayout>
<syncfusion:SfListView x:Name="listView"
ItemSpacing="1"
ItemSize="60"
ItemsSource="{Binding ContactsInfo}">
<syncfusion:SfListView.ItemTemplate >
<DataTemplate>
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.Triggers>
<DataTrigger TargetType="Grid" Binding="{Binding Source={x:Reference grid}, Path=BindingContext.IsSelected}" Value="False">
<Setter Property="BackgroundColor" Value="{Binding ., Converter={StaticResource IndexToColorConverter}, ConverterParameter={x:Reference listView}}" />
</DataTrigger>
<DataTrigger TargetType="Grid" Binding="{Binding Source={x:Reference grid}, Path=BindingContext.IsSelected}" Value="True">
<Setter Property="BackgroundColor" Value="PaleVioletRed" />
</DataTrigger>
</Grid.Triggers>
…
</Grid>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
C#
Define an IsSelected property in the Model implementing INotifyPropertyChanged.
public class MusicInfo : INotifyPropertyChanged
{
private bool isSelected;
public bool IsSelected
{
get { return isSelected; }
set
{
isSelected = value;
RaisePropertyChanged("IsSelected");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged(String name)
{
if (PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
}
Updating the IsSelected value in ListView_SelectionChanged method.
public class Behavior : Behavior<ContentPage>
{
ListView.SelectionChanging += ListView_SelectionChanging;
private void ListView_SelectionChanging(object sender, ItemSelectionChangingEventArgs e)
{
for (int i = 0; i < e.AddedItems.Count; i++)
{
var item = e.AddedItems[i] as Contacts;
item.IsSelected = true;
}
for (int i = 0; i < e.RemovedItems.Count; i++)
{
var item = e.RemovedItems[i] as Contacts;
item.IsSelected = false;
}
}
}
Converter to apply the alternate row style based on the index value of items.
public class IndexToColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var listview = parameter as SfListView;
return listview.DataSource.DisplayItems.IndexOf(value) % 2 == 0 ? Colors.Lavender : Colors.AliceBlue;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Download the complete sample on GitHub.
I hope you enjoyed learning how to apply alternate item background in .NET MAUI ListView.
You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations. Explore our documentation to understand how to create and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
