Category / Section
How to apply alternate item background in .NET MAUI ListView (SfListView) ?
2 mins read
You can change the background color of ItemTemplate loaded in the .NET MAUI ListView (SfListView) based on the value changed in Trigger with consideration of Selection.
XAML
Defined Trigger for the parent element of ListView ItemTemplate and bind the 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#
Defining IsSelected property in Model with INotifyPropertyChanged.
public class Musiqnfo : 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();
}
}
