Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / WPF
Article

Highlighting Items in a WPF ListView

Rate me:
Please Sign up or sign in to vote.
4.87/5 (38 votes)
28 Apr 2007CPOL4 min read 354.2K   6.5K   101   39
A step-by-step review of how to conditionally highlight ListViewItems.
Screenshot - HighlightingItemsInWPFListView.png

Introduction

This article shows how to change the color of items in a ListView, based on values in or associated with the item. The technique used here binds a ListView to an ADO.NET DataTable, and makes use of a custom value converter to determine what color each ListViewItem should be.

Background

Here's a common scenario: you have a DataTable which needs to be displayed in a ListView, and any row which contains a value in some certain range (say, less than zero) should be "highlighted" with a special color. Perhaps the value which determines the ListViewItem's color is not even displayed in the ListView, but only exists in a DataRow. How might one implement that functionality in WPF?

There are four steps involved with this task:

  1. Populate a DataTable and bind it to a ListView.
  2. Specify how the ListView should display the DataTable (i.e. specify where the items come from, configure the columns, etc.).
  3. Write a Style which highlights ListViewItems.
  4. Create a class which helps determine a ListViewItem's color.

This article's demo application creates a simple DataTable, which contains a customer ID, name, and balance. If the customer is owed money (i.e. her balance is negative) then that customer's item is highlighted red. If the customer owes money, then the item is green.

Step one - Populate a DataTable and bind it to a ListView

Let's assume that our Window subclass contains a ListView in it, named 'listView'. First we must create the DataTable and set it as the ListView's DataContext.

C#
public Window1()
{
 InitializeComponent();
 this.listView.DataContext = CreateDataTable();
}

// In a real app the DataTable would be populated from a database
// but in this simple demo the dummy data is created locally.
DataTable CreateDataTable()
{
 DataTable tbl = new DataTable( "Customers" );

 tbl.Columns.Add( "ID", typeof( int ) );
 tbl.Columns.Add( "Name", typeof( string ) );
 tbl.Columns.Add( "Balance", typeof( decimal ) );

 tbl.Rows.Add( 1, "John Doe", 100m );
 tbl.Rows.Add( 2, "Jane Dorkenheimer", -209m );
 tbl.Rows.Add( 3, "Fred Porkroomio", 0m );
 tbl.Rows.Add( 4, "Mike Spike", 550m );
 tbl.Rows.Add( 5, "Doris Yakovakovich", 0m );
 tbl.Rows.Add( 6, "Boris Zinkwolf", -25m );

 return tbl;
}

Step two - Specify how the ListView should display the DataTable

Now that the DataTable is ready and available to be displayed, let's see how to show it in a ListView.

XML
<ListView
  Name="listView"
  ItemContainerStyle="{StaticResource ItemContStyle}"
  ItemsSource="{Binding}"
  >
  <ListView.View>
    <GridView>
      <GridViewColumn Header="ID" DisplayMemberBinding="{Binding ID}" />
      <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
      <GridViewColumn Header="Balance" Width="140">
        <GridViewColumn.CellTemplate>
          <DataTemplate>
            <TextBlock Text="{Binding Balance}" TextAlignment="Right" />
          </DataTemplate>
        </GridViewColumn.CellTemplate>
      </GridViewColumn>
    </GridView>
  </ListView.View>
</ListView>

In the Window's constructor we assigned a DataTable to the ListView's DataContext, so setting its ItemsSource property to '{Binding}' means to simply bind against that DataTable. Each column displayed in the ListView is represented by a GridViewColumn. The 'Balance' column's CellTemplate is set (as opposed to using the DisplayMemberBinding) so that the monetary value can be right-aligned, which is typical for displaying numeric values.

The ListView's ItemContainerStyle property is set to a Style, which is yet to be shown. ItemContainerStyle is used because that property affects the Style property of each ListViewItem generated by the ListView. Since we want to highlight an entire ListViewItem that property is the logical place to apply our "highlight style".

Step three - Write a Style which highlights ListViewItems

In the previous section, the ListView's ItemContainerStyle was set to a Style whose key is 'ItemContStyle'. That Style is seen below:

XML
<Style x:Key="ItemContStyle" TargetType="{x:Type ListViewItem}">
  <Style.Resources>
    <!-- Brushes omitted for clarity… -->
    <!-- Reduces a customer's Balance to either -1, 0, or +1 -->
    <local:NumberToPolarValueConverter x:Key="PolarValueConv" />
  </Style.Resources>

  <!-- Stretch the content so that we can right-align values
       in the Balance column. -->
  <Setter Property="HorizontalContentAlignment" Value="Stretch" />

  <Style.Triggers>
    <!-- When a customer owes money, color them green. -->
    <DataTrigger
      Binding="{Binding Balance, Converter={StaticResource PolarValueConv}}"
      Value="+1"
      >
      <Setter Property="Background" Value="{StaticResource ProfitBrush}" />
    </DataTrigger>

    <!-- When a customer is owed money, color them red. -->
    <DataTrigger
      Binding="{Binding Balance, Converter={StaticResource PolarValueConv}}"
      Value="-1"
      >
      <Setter Property="Background" Value="{StaticResource LossBrush}" />
    </DataTrigger>
  </Style.Triggers>
</Style>

The Style sets two properties on each ListViewItem: HorizontalContentAlignment and Background. The former is set to 'Stretch' so that the elements in the ListView's "cells" will occupy the entire surface area of those cells. That allows us to right-align the text in the 'Balance' column.

The Background property of each ListViewItem is conditionally set to a "highlight brush" based on the customer's 'Balance' value. A DataTrigger is used to evaluate a customer's 'Balance' value and then, if the customer either owes money or is owed money, that customer's ListViewItem will have its Background set to the appropriate brush.

Step four - Create a class which helps determine a ListViewItem's color

The DataTriggers seen in the previous section use a custom value converter in their Bindings, called NumberToPolarValueConverter. The purpose of that converter is to take in a customer's balance and return a simple value which indicates if that customer either is owed money, owes money, or has no balance. If the customer owes money (i.e. the customer's balance is more than zero dollars) then it returns +1. If the customer is owed money, it returns -1. If the customer has no balance, zero is returned.

This value converter is necessary because a DataTrigger's Value property cannot express a range, it can only express a distinct value. In other words, there is no way to have the DataTrigger's Value indicate that the trigger should execute when a customer's balance is, say, any number less than zero.

Since Value cannot express a range, we can take the opposite approach and have the DataTrigger's Binding eliminate the range of values which the 'Balance' field can have. If the Binding evaluates to a small, discrete set of values (-1, 0, or +1) then the Value property can easily be used to check for those specific values.

Here is how that value converter is implemented:

C#
[ValueConversion( typeof(object), typeof(int) )]
public class NumberToPolarValueConverter : IValueConverter
{
 public object Convert(
  object value,     Type targetType,
  object parameter, CultureInfo culture )
 {
  double number = (double)System.Convert.ChangeType( value, typeof(double) );

  if( number < 0.0 )
   return -1;

  if( number == 0.0 )
   return 0;

  return +1;
 }

 public object ConvertBack(
  object value,     Type targetType,
  object parameter, CultureInfo culture )
 {
  throw new NotSupportedException( "ConvertBack not supported" );
 }
}

External links

ADO.NET data binding in WPF

Related topics

History

  • April 28, 2007 – Created the article.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
Josh creates software, for iOS and Windows.

He works at Black Pixel as a Senior Developer.

Read his iOS Programming for .NET Developers[^] book to learn how to write iPhone and iPad apps by leveraging your existing .NET skills.

Use his Master WPF[^] app on your iPhone to sharpen your WPF skills on the go.

Check out his Advanced MVVM[^] book.

Visit his WPF blog[^] or stop by his iOS blog[^].

See his website Josh Smith Digital[^].

Comments and Discussions

 
QuestionI want to do the same but dynamically, want to set the color values based on some condition inside a separate function. Pin
pkb781516-Feb-17 9:33
pkb781516-Feb-17 9:33 
GeneralMy vote of 5 Pin
Jonathan Schick12-Aug-13 8:29
Jonathan Schick12-Aug-13 8:29 
GeneralMy vote of 5 Pin
Nyrr11-Feb-13 1:01
Nyrr11-Feb-13 1:01 
GeneralMy vote of 4 Pin
Marconte17-Sep-12 2:11
Marconte17-Sep-12 2:11 
GeneralMy vote of 5 Pin
Tarun.K.S8-Nov-10 0:05
Tarun.K.S8-Nov-10 0:05 
Generalthanks Pin
vegeta4ss27-Apr-10 6:37
vegeta4ss27-Apr-10 6:37 
GeneralBinding to DataTable is unclear. Pin
Member 418359019-Feb-10 12:50
Member 418359019-Feb-10 12:50 
Generalcould you help me Pin
Sparkling_ouc6-Jul-09 16:34
Sparkling_ouc6-Jul-09 16:34 
GeneralHelp me on Pin
mohammad sayedi5-Jul-09 0:58
mohammad sayedi5-Jul-09 0:58 
GeneralWPF=WTF Pin
Adrian Pirvu21-Feb-09 4:01
Adrian Pirvu21-Feb-09 4:01 
GeneralRe: WPF=WTF Pin
RugbyLeague5-Mar-09 3:41
RugbyLeague5-Mar-09 3:41 
GeneralRe: WPF=WTF Pin
Tibor Blazko20-Apr-09 21:04
Tibor Blazko20-Apr-09 21:04 
GeneralThanks! Pin
Gary Wheeler3-Dec-08 5:22
Gary Wheeler3-Dec-08 5:22 
GeneralRe: Thanks! Pin
Josh Smith3-Dec-08 5:24
Josh Smith3-Dec-08 5:24 
Questionuse a function within a class as the Converter? Pin
dev11223313-Aug-08 8:20
dev11223313-Aug-08 8:20 
AnswerRe: use a function within a class as the Converter? Pin
Josh Smith13-Aug-08 8:21
Josh Smith13-Aug-08 8:21 
Generalthanks Pin
Abhijit Jana5-Aug-08 1:10
professionalAbhijit Jana5-Aug-08 1:10 
GeneralNeed your suggestion Pin
Moim Hossain28-Jul-08 3:54
Moim Hossain28-Jul-08 3:54 
GeneralRe: Need your suggestion Pin
Josh Smith28-Jul-08 4:09
Josh Smith28-Jul-08 4:09 
GeneralRe: Need your suggestion Pin
Moim Hossain28-Jul-08 4:22
Moim Hossain28-Jul-08 4:22 
QuestionHow to display multiple colors for different Cells of listview Pin
chandra vempati16-Jul-08 8:49
chandra vempati16-Jul-08 8:49 
AnswerRe: How to display multiple colors for different Cells of listview Pin
Josh Smith16-Jul-08 8:55
Josh Smith16-Jul-08 8:55 
GeneralRe: How to display multiple colors for different Cells of listview Pin
chandra vempati16-Jul-08 9:00
chandra vempati16-Jul-08 9:00 
I did not get you Josh..

Chandu

cheers
chandu

GeneralRe: How to display multiple colors for different Cells of listview Pin
Josh Smith16-Jul-08 9:03
Josh Smith16-Jul-08 9:03 
GeneralRe: How to display multiple colors for different Cells of listview Pin
Tibor Blazko20-Apr-09 21:12
Tibor Blazko20-Apr-09 21:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.