Skip to content

Instantly share code, notes, and snippets.

@MitchMilam
Last active August 30, 2023 20:34
Show Gist options
  • Save MitchMilam/5fa164b342fc3e4cfe88 to your computer and use it in GitHub Desktop.
Save MitchMilam/5fa164b342fc3e4cfe88 to your computer and use it in GitHub Desktop.
Alternating background colors in a Xamarin.Forms ListView
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace XamarinFormsDeepDive
{
class ListViewDemo : ContentPage
{
class Person
{
private Color _backgroundColor;
public Person(string name, DateTime birthday, Color favoriteColor)
{
this.Name = name;
this.Birthday = birthday;
this.FavoriteColor = favoriteColor;
}
public string Name { private set; get; }
public DateTime Birthday { private set; get; }
public Color FavoriteColor { private set; get; }
public Color BackgroundColor
{
get { return Birthday.Year > 1975 ? Color.Black : Color.Gray; }
set { _backgroundColor = value; }
}
};
public ListViewDemo()
{
var header = new Label
{
Text = "ListView",
Font = Font.BoldSystemFontOfSize(NamedSize.Medium),
HorizontalOptions = LayoutOptions.Center
};
var footer = new Label
{
Text = "ListView Footer",
Font = Font.BoldSystemFontOfSize(NamedSize.Medium),
HorizontalOptions = LayoutOptions.Center
};
// Define some data.
var people = new List<Person>
{
new Person("Abigail", new DateTime(1975, 1, 15), Color.Aqua),
new Person("Bob", new DateTime(1976, 2, 20), Color.Black),
new Person("Cathy", new DateTime(1977, 3, 10), Color.Blue),
new Person("David", new DateTime(1978, 4, 25), Color.Fuschia),
new Person("Eugenie", new DateTime(1979, 5, 5), Color.Gray),
new Person("Freddie", new DateTime(1980, 6, 30), Color.Green),
new Person("Greta", new DateTime(1981, 7, 15), Color.Lime),
new Person("Harold", new DateTime(1982, 8, 10), Color.Maroon),
new Person("Irene", new DateTime(1983, 9, 25), Color.Navy),
new Person("Jonathan", new DateTime(1984, 10, 10), Color.Olive),
new Person("Kathy", new DateTime(1985, 11, 20), Color.Purple),
new Person("Larry", new DateTime(1986, 12, 5), Color.Red),
new Person("Monica", new DateTime(1975, 1, 5), Color.Silver),
new Person("Nick", new DateTime(1976, 2, 10), Color.Teal),
new Person("Olive", new DateTime(1977, 3, 20), Color.White),
new Person("Pendleton", new DateTime(1978, 4, 10), Color.Yellow),
new Person("Queenie", new DateTime(1979, 5, 15), Color.Aqua),
new Person("Rob", new DateTime(1980, 6, 30), Color.Blue),
new Person("Sally", new DateTime(1981, 7, 5), Color.Fuschia),
new Person("Timothy", new DateTime(1982, 8, 30), Color.Green),
new Person("Uma", new DateTime(1983, 9, 10), Color.Lime),
new Person("Victor", new DateTime(1984, 10, 20), Color.Maroon),
new Person("Wendy", new DateTime(1985, 11, 5), Color.Navy),
new Person("Xavier", new DateTime(1986, 12, 30), Color.Olive),
new Person("Yvonne", new DateTime(1987, 1, 10), Color.Purple),
new Person("Zachary", new DateTime(1988, 2, 5), Color.Red)
};
var listView = new ListView
{
HorizontalOptions = LayoutOptions.Start,
ItemsSource = people,
ItemTemplate = new DataTemplate(() =>
{
var nameLabel = new Label();
var birthdayLabel = new Label();
var boxView = new BoxView();
var stack = new StackLayout
{
Padding = new Thickness(0, 5),
Orientation = StackOrientation.Horizontal,
Children =
{
boxView,
new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Spacing = 0,
Children =
{
nameLabel,
birthdayLabel
}
}
}
};
nameLabel.SetBinding(Label.TextProperty, "Name");
birthdayLabel.SetBinding(Label.TextProperty, new Binding("Birthday", BindingMode.OneWay, null, null, "Born {0:d}"));
boxView.SetBinding(BoxView.ColorProperty, "FavoriteColor");
stack.SetBinding(BackgroundColorProperty, "BackgroundColor");
return new ViewCell
{
View = stack
};
})
};
// Accomodate iPhone status bar.
Padding = new Thickness(10, Device.OnPlatform(20, 0, 0), 10, 5);
Content = new StackLayout
{
Orientation = StackOrientation.Horizontal,
Children =
{
listView,
}
};
}
}
}
@barrysohl
Copy link

Very cool solution, been scouring online forever for one. Works great! I have a related question/issue I wonder if you might have an answer for? I need to reverse text colors for the text and detail text in my custom ViewCell when it is selected. I am trying to set a binding on the Label.TextColorProperty but it crashes on runtime when I set the background color via the item selected event handler. Any ideas? Thanks in advance!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment