Reader Level:
ARTICLE

Alternate Row Color in ListBox in WPF

Posted by Diptimaya Patra Articles | WPF December 06, 2009
In this article we will see how we can make the Alternate Rows of the ListBox Colorful in WPF.
  • 0
  • 0
  • 38646
Download Files:
 

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.

1.gif

Now we will add a ListBox to the Application and it will look as following:

2.gif

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>

3.gif

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.

4.gif

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.

COMMENT USING

Trending up