Alternate Row Color In ListBox In WPF


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.