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.
This can be done in multiple ways. I think one of the better ones is through a DataTemplateSelector
. Read the documentation here: https://docs.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.. – Sameer Kamran Jul 20 '18 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. – Srusti Thakkar Jul 23 '18 at 4:45
-
didnt get it :( why do i need an extra property and how to use this property ? – Sameer Kamran Jul 23 '18 at 7:16
BackgroundColor={Binding itemBackgroundColor}
. – Srusti Thakkar Jul 19 '18 at 12:46