Articles in this section
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.


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=""
             BackgroundColor="{DynamicResource SecondaryColor}">
            <local:IndexToColorConverter x:Key="IndexToColorConverter"/>
            <syncfusion:SfListView x:Name="listView"
                        ItemsSource="{Binding ContactsInfo}">
                <syncfusion:SfListView.ItemTemplate >
                        <Grid x:Name="grid">
                                <ColumnDefinition Width="70" />
                                <ColumnDefinition Width="*" />
                                <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 TargetType="Grid" Binding="{Binding Source={x:Reference grid}, Path=BindingContext.IsSelected}" Value="True">
                                    <Setter Property="BackgroundColor" Value="PaleVioletRed" />


Defining IsSelected property in Model with INotifyPropertyChanged.

public class Musiqnfo : INotifyPropertyChanged
     private bool isSelected;
     public bool IsSelected
         get { return isSelected; }
             isSelected = value;
     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();

View sample in GitHub

Applying alternate item background in.NET MAUI ListView.

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