I am using ViewModel and Binded the ItemSource Property of ListView to the Property of ViewModel.. Searched internet to find the solution for alternating item backgroundColor but couldnt find.
2 Answers
This can be done in multiple ways. I think one of the better ones is through a DataTemplateSelector
. Read the documentation here: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector
Create a DataTemplateSelector
that holds two templates and selects them based on the index of the item:
public class AlternateColorDataTemplateSelector : DataTemplateSelector
{
public DataTemplate EvenTemplate { get; set; }
public DataTemplate UnevenTemplate { get; set; }
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
// TODO: Maybe some more error handling here
return ((List<string>)((ListView)container).ItemsSource).IndexOf(item as string) % 2 == 0 ? EvenTemplate : UnevenTemplate;
}
}
Now, in XAML you can define two templates, one with the alternate color and one with the normal color. You can differentiate them even further if you want to:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:AlternateRowColorSample" x:Class="AlternateRowColorSample.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="evenTemplate">
<ViewCell>
<Grid BackgroundColor="White">
<Label Text="{Binding .}" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</ViewCell>
</DataTemplate>
<DataTemplate x:Key="unevenTemplate">
<ViewCell>
<Grid BackgroundColor="LightGray">
<Label Text="{Binding .}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</ViewCell>
</DataTemplate>
<local:AlternateColorDataTemplateSelector x:Key="alternateColorDataTemplateSelector"
EvenTemplate="{StaticResource evenTemplate}"
UnevenTemplate="{StaticResource unevenTemplate}" />
</ResourceDictionary>
</ContentPage.Resources>
<ListView ItemTemplate="{StaticResource alternateColorDataTemplateSelector}" ItemsSource="{Binding Items}">
</ListView>
</ContentPage>
When running, you will see gray and white rows, like this:
A complete working sample can be found here: https://github.com/jfversluis/AlternateRowColorSample
You can use below code:
int position = 1;
foreach (var i in yourItemList)
{
youranotherProperty = "";
ItemBackgroundColor = (position % 2 == 0)? "Green" : "Red" ;
position++;
}
-
` public ICommand LoadData => new Command(async ()=> { await GetPOList(); _SetBackgroundColor(); });`
public void _SetBackgroundColor() { int position = 1; foreach (var i in POList) { BackgroundColor = (position % 2 == 0) ? "Blue" : "Red"; position++; } }
public ICommand LoadData //This Command is running onAppearing overload GetPOList(); //This method gets the list from remote api _SetBackgroundColor() I am calling this method right after GetPOList(); this method completion.. Jul 20, 2018 at 9:45 -
You have to just add one extra property in your viewmodel and while you are just fetching your data in LoadData() method bind this property. Jul 23, 2018 at 4:45
-
didnt get it :( why do i need an extra property and how to use this property ? Jul 23, 2018 at 7:16
BackgroundColor={Binding itemBackgroundColor}
.