.NET MAUI ListView ItemStyle Selector

The ListView component exposes conditional styling feature. It allows users to apply a different Style to each item depending on a specific condition.

Example

The following example will demonstrate how to apply the Conditional Styling in the ListView control.

1. Set up the ListView control:

   <telerik:RadListView x:Name="listView" 
                      ItemsSource="{Binding Source}">
     <telerik:RadListView.BindingContext>
         <local:ViewModel />
     </telerik:RadListView.BindingContext>
     <telerik:RadListView.ItemTemplate>
         <DataTemplate>
             <telerik:ListViewTemplateCell>
                 <telerik:ListViewTemplateCell.View>
                     <StackLayout>
                         <Label Margin="10" Text="{Binding Name}" />
                         <Label Margin="10"
                                FontSize="10"
                                Text="{Binding Age}" />
                     </StackLayout>
                 </telerik:ListViewTemplateCell.View>
             </telerik:ListViewTemplateCell>
         </DataTemplate>
     </telerik:RadListView.ItemTemplate>
   
     <telerik:RadListView.ItemStyleSelector>
         <local:ExampleListViewStyleSelector />
     </telerik:RadListView.ItemStyleSelector>
   </telerik:RadListView>
   

2. Create a simple data for the ListView component:

   public class Person
   {
   public Person(string name, int age)
   {
       this.Name = name;
       this.Age = age;
   }
   
   public string Name { get; set; }
   public int Age { get; set; }
   }
   
   
   public class ViewModel
   {
       public ViewModel()
       {
           this.Source = new List<Person> {
               new Person("Tom", 25),
               new Person("Anna",18),
               new Person("Peter",43),
               new Person("Teodor",29),
               new Person("Lorenzo",65),
               new Person("Andrea",79),
               new Person("Martin",5) };
       }
   
   public List&lt;Person&gt; Source { get; set; }
   
   
   }
   

   1. You can set a different style for a specific item by using the ListViewStyleSelector class. We can use the OnSelectStyle method to change the styles of the items in the ListView control. A sample implementation of a custom class that derives from ListViewStyleSelector and overrides its OnSelectStyle method is shown below:

   public class ExampleListViewStyleSelector : ListViewStyleSelector
   {
       protected override void OnSelectStyle(object item, ListViewStyleContext styleContext)
       {
           var style = new ListViewItemStyle
           {
               BackgroundColor = Colors.Transparent
           };
   
       styleContext.ItemStyle = style;
       styleContext.SelectedItemStyle = new ListViewItemStyle
       {
           BackgroundColor = Colors.Gray,
           BorderColor = Colors.Red,
           BorderWidth = 2
       };
   
       var sourceItem = item as Person;
       if (sourceItem.Age < 18)
       {
           styleContext.ItemStyle.BackgroundColor = Colors.Blue;
       }
       else if (sourceItem.Age < 65)
       {
           styleContext.ItemStyle.BackgroundColor = Colors.Green;
       }
   }
   
   
   }
   

   The following image shows how the ListView control will look like when conditional styling is used.

   

   For ItemStyle Selector example, go to the SDKBrowser Demo Application and navigate to ListView -> Styling category.

   See Also

   • Selection
   • Styling
   • Reordering