Customizing ListView in WPF (Part I)

It is fun experience trying to customize the look and behavior of the standard listview included in WPF.

Here is a list of interesting things I’ve found out regarding customizing the ListView in WPF:

  • Sorting: Since there is no build-in sorting support in ListView in WPF, you have to use some kind of attached property approach detailed here. This took an hour or so for me to figure out how to integrate it nicely with any listview column headers and any ObservableCollections data source. The header style for ascending and descending sort is based on this post by Avalon ATC team.
  • Column Header styling: Since in one of my applications, I need to style the column header with multi-line text support. This isn’t difficult since you can specify ColumnHeaderStyle easily.
  • Alternating background color for each row: This is easy, here details some approaches by the Avalon ATC team.
  • Mouse over highlighting effect. You can accomplish this through ItemContainerStyle by setting the triggers for ListViewItem. The final implementation is based on this post by Juan Pablo G.C. from Code Project.
  • Embed icons into cells. This is not hard since you are easily use the CellTemplate in your GridColumn definition to achieve this.
  • Embed HyperLink into cells. This can also be achieved through CellTemplate.

The most difficult part is figuring out the vertical grid lines in the ListView. This is achieved through the CellTemplate of each GridColumn and the ItemContainerStyle. First, you need to use the following ItemContainerStyle to make your listviewitem stretch in all directions:

Then in your CellTemplate, you need to define borders like:

The negative border margin is needed to make it align with the divider on the ColumnHeader.

Let me know what you think of this customization. I will post more regarding this topic later when I learn more about the power and flexibility of WPF.

You can view the grid in action here:


5 Responses to Customizing ListView in WPF (Part I)

  1. […] next, you need to use custom sorter, instead of SortDescriptions as described in my earlier blog. The key is using the CustomSort property of ListCollectionView: ListCollectionView view = […]

  2. Do you have the project files for this example?

  3. ligao101 says:

    Please see my later blog entry here:

    It includes the source project download.

  4. Subin says:

    Nice Example.

  5. Vaibha Nagar says:

    I have gone through the code and implemented it but it seems that sort works fine when you sort any column once for example sort “server name” column than sort “server status” and than the “network status” column it works fine for the first time but when you again sort “server name” column it will not work. Can you please tell me that why it is happening

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: