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: