Creating custom ListView with AlternateRowColor property

p.maravilla 21 Reputation points
2021-01-08T07:55:38.917+00:00

Hello,

I know that the "AlternateRowColor" behavior can be achieved via using a converter in the layout of the DataTemplate. However, I'm looking for a way to apply this to all the ListViews of my application, so I don't have to define and use the converter every time.

Specifically, I would like to create a custom ListView with two properties: "MainColor", "AlternateColor", and apply that two colors for even/uneven rows. So, when I use my ListView, i'll just define these properties without having to use the converter for each one. However, I can't figure out how could I achieve this or if it is even possible. Could someone point me to the right way to achieve this?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,362 questions
0 comments No comments
{count} votes

Accepted answer
  1. JarvanZhang 23,961 Reputation points
    2021-01-08T10:52:19.863+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    However, I'm looking for a way to apply this to all the ListViews of my application

    We cannot get the item index in the ListView class. To achieve this function, try create a custom ViewCell class instead.

    Check the code:

       public class CustomViewCell : ViewCell  
       {  
           public Color EvenColor { get; set; }  
           public Color UnevenColor { get; set; }  
         
           protected override void OnAppearing()  
           {  
               base.OnAppearing();  
               if (!(Parent is ListView listView))  
                   return;  
         
               int index;  
               if (listView.IsGroupingEnabled)  
               {  
                   index = listView.TemplatedItems.GetGroupAndIndexOfItem(BindingContext).Item2;  
               }  
               else  
               {  
                   index = listView.TemplatedItems.IndexOf(this);  
               }  
         
               if (index != -1)  
               {  
                   this.View.BackgroundColor = index % 2 == 0 ? EvenColor : UnevenColor;  
               }  
           }  
       }  
    

    Specify a value to the 'EvenColor' and 'UnevenColor' property in the page.xaml.

       <ListView x:Name="listview" ...>  
           <ListView.ItemTemplate>  
               <DataTemplate>  
                   <local:CustomViewCell EvenColor="Red" UnevenColor="Blue">  
                       ...  
                   </local:CustomViewCell>  
               </DataTemplate>  
           </ListView.ItemTemplate>  
       </ListView>  
    

    Best Regards,

    Jarvan Zhang


    If the response is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.