Introduction
In this article we will see how we can make the Alternate Rows of the ListBox Colorful in WPF.
Creating WPF Project
Fire up Visual Studio 2008 and create a new WPF Project. Name it as ListBoxSampleWPF.
Now we will add a ListBox to the Application and it will look as following:
Now let's add some sample data to the ListBox.
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string Country
{ get; set; }
}
ObservableCollection<Person>
myList;
public Window1()
{
InitializeComponent();
myList = new ObservableCollection<Person>()
{
new Person{ Name="Name 1", Age=24, Country="India"},
new Person{ Name="Name 2", Age=24, Country="India"},
new Person{ Name="Name 3", Age=24, Country="India"},
new Person{ Name="Name 4", Age=24, Country="India"},
new Person{ Name="Name 5", Age=24, Country="India"},
new Person{ Name="Name 6", Age=24, Country="India"},
new Person{ Name="Name 7", Age=24, Country="India"},
new Person{ Name="Name 8", Age=24, Country="India"},
new Person{ Name="Name
9", Age=24, Country="India"},
new Person{ Name="Name 10", Age=24, Country="India"},
new Person{ Name="Name 11", Age=24, Country="India"},
new Person{ Name="Name 12", Age=24, Country="India"},
new Person{ Name="Name 13", Age=24, Country="India"},
new Person{ Name="Name 14", Age=24, Country="India"},
new Person{ Name="Name 15", Age=24, Country="India"},
new Person{ Name="Name 16", Age=24, Country="India"},
new Person{ Name="Name 17", Age=24, Country="India"},
new Person{ Name="Name 18", Age=24, Country="India"},
new Person{ Name="Name 19", Age=24, Country="India"},
new Person{ Name="Name
20", Age=24, Country="India"},
new Person{ Name="Name 21", Age=24, Country="India"},
new Person{ Name="Name 22", Age=24, Country="India"},
};
lbPersonList.ItemsSource = myList;
}
Now Bind the Property "Name" to the ListBox, so that we can see the Names.
<ListBox x:Name="lbPersonList" Margin="19,17,162,25">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
If you see from the above wecannot differentiate with each row, I mean to say the Row Background color is all same white.
Now we would add a style to the ListBoxItem.
<Window.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#19f39611"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#19000000"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<ListBox x:Name="lbPersonList" Margin="19,17,162,25" AlternationCount="2">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Now run the application.
Yes, we got alternate row colors.
We can have value more than 2 as AlternationCount and add that many colors and you will see the Repeatation of colors after the AlternationCount.
Hope this article helps.