Last active
August 30, 2023 20:34
-
-
Save MitchMilam/5fa164b342fc3e4cfe88 to your computer and use it in GitHub Desktop.
Alternating background colors in a Xamarin.Forms ListView
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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, | |
} | |
}; | |
} | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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!