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

A more generic way of sorting a WPF ListView with IComparer

Rate me:
Please Sign up or sign in to vote.
4.59/5 (16 votes)
24 May 2008Ms-PL2 min read 88K   1.5K   24   10
An easy way of sorting the WPF ListView with a generic method.

Introduction

By default, there is no easy way of sorting a ListView in WPF. While there is a sample available on MSDN on how to sort a ListView, it isn’t very satisfying. The sample sorts the ListView based on the header of the column instead of the actual DisplayMemberBinding attribute. This is not an optimal solution, because column headers don’t necessarily contain text. Secondly, it could be that the column header differs from the actual property name. In addition to that, I assume that this isn’t working very well in a multi-language application either.

Background

I wanted a more generic solution to this issue. After playing around a while, I ended up with the solution shown below.

Requirements:

  • The solution needs to be easy to be attached to a ListView without adding a lot of code each time. The new attached properties functionality from WPF, using the Ramora pattern solves this issue nicely.
  • The sorting needed to be customizable. By using the CustomSort property of the ListCollectionView, this could be accomplished easily.

Using the code

To create a custom comparer, you need to implement the abstract base class ListViewCustomComparer<> and create your own comparer. In the sample application, I created a PersonComparer:

C#
public class PersonComparer : ListViewCustomComparer<Person>
{

/// <summary>
/// Compares the specified x to y.
/// </summary>
/// <param name="x">The x.</param>
/// <param name="y">The y.</param>
/// <returns></returns>
public override int Compare(Person x, Person y)
{
    try
    {
        String valueX = String.Empty, valueY = String.Empty;
        switch (SortBy)
        {
        default:
        case "FirstName":
            valueX = x.FirstName;
            valueY = y.FirstName;
        break;
        case "LastName":
            valueX = x.LastName;
            valueY = y.LastName;
        break;
        case "Age":
            if (SortDirection.Equals(ListSortDirection.Ascending))
                return x.Age.CompareTo(y.Age);
            else
                return (-1) * x.Age.CompareTo(y.Age);
        }
        if (SortDirection.Equals(ListSortDirection.Ascending))
            return String.Compare(valueX, valueY);
        else 
            return (-1) * String.Compare(valueX, valueY);
    }
    catch (Exception)
    {
        return 0;
    }
}

The SortBy value is the value of the DisplayMemberBinding, which is set in the MainWindow.xaml markup code:

MainWindow.xaml:

XML
<GridViewColumn Header="FirstName" Width="100" DisplayMemberBinding="{Binding FirstName}" />
<GridViewColumn Header="LastName" Width="100" DisplayMemberBinding="{Binding LastName}" />
lt;GridViewColumn Header="Age" Width="100" DisplayMemberBinding="{Binding Age}" />

In the MainWindow itself, you need to add the local xml:ns and the data templates, which are used to display a different header with arrows on sorted columns. You also need to add the ListViewSorter.CustomListViewSorter attribute to the ListView XML element.

XML
<Window x:Class="WpfListViewSorting.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfListViewSorting"
    Title="WpfListViewSorting Demo" Height="300" Width="400">
    <Window.Resources>
    <DataTemplate x:Key="ListViewHeaderTemplateDescendingSorting">
        <DockPanel>
            <TextBlock Text="{Binding}"/>
        <Path x:Name="arrow"
            StrokeThickness = "1" 
            Fill = "gray"
            Data = "M 5,10 L 15,10 L 10,5 L 5,10"/>
    </DockPanel>
    </DataTemplate>
<DataTemplate x:Key="ListViewHeaderTemplateAscendingSorting">
<DockPanel>
    <TextBlock Text="{Binding }"/>
    <Path x:Name="arrow"
    StrokeThickness = "1" 
    Fill = "gray"
    Data = "M 5,5 L 10,10 L 15,5 L 5,5"/>
</DockPanel>
</DataTemplate>

<DataTemplate x:Key="ListViewHeaderTemplateNoSorting">
    <DockPanel>
        <TextBlock Text="{Binding }"/>
    </DockPanel>
</DataTemplate>

</Window.Resources>
<Grid>
    <ListView Margin="5" 
        VirtualizingStackPanel.IsVirtualizing="True"
        IsSynchronizedWithCurrentItem="True"
        local:ListViewSorter.CustomListViewSorter="WpfListViewSorting.PersonComparer"
        x:Name="lstView" >
    <ListView.View>
        <GridView AllowsColumnReorder="True">
            <GridViewColumn Header="FirstName" Width="100" 
                     DisplayMemberBinding="{Binding FirstName}" />
            <GridViewColumn Header="LastName" Width="100" 
                     DisplayMemberBinding="{Binding LastName}" />
            <GridViewColumn Header="Age" Width="100" 
                     DisplayMemberBinding="{Binding Age}" />
        </GridView>
    </ListView.View>
    </ListView >
</Grid>
</Window>

This is all the code that needs to be added to add sorting to a ListView. For the next ListView, you only need to add the local:ListViewSorter.CustomListViewSorter = "WpfListViewSorting.PersonComparer" attribute to it to activate its working (if the bound object is the same; otherwise, create a new comparer). The ListViewSorter will keep track of the previous sorting direction and sorting column in a Dictionary, which holds a collection of ListViewSortItems.

Points of interest

None yet. Happy coding!

History

  • 24-05-2008 - Modified the code sample to check for Visual Studio design mode, so it won't cause any errors.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
Software Developer (Junior)
Netherlands Netherlands
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Suggestionusing Adorner instead of DataTemplates for sort mark Pin
evalese1-Sep-12 9:47
evalese1-Sep-12 9:47 
Bugan item with the same key has already been added Pin
evalese28-Aug-12 9:27
evalese28-Aug-12 9:27 
QuestionCode understandable code Pin
suneetha_g5-Apr-12 1:40
suneetha_g5-Apr-12 1:40 
QuestionCould u adjust your code for <GridViewColumn.CellTemplate> ? Pin
dimas197127-Jan-12 5:32
dimas197127-Jan-12 5:32 
Hi!

At first place THANK YOU! for your great demo project!

There is one thing that I cannot figure out. If we don't use DisplayMemberBinding we get the error here:

C#
Binding b = headerClicked.Column.DisplayMemberBinding as Binding;
String header = b.Path.Path as String;



I use this code
HTML
<pre lang="xml"><GridViewColumn   Width="60" Header="{lex:LocTextExtension Key=Success, Dict=Resources, Assembly=Mega.Player}">
                                        <GridViewColumn.CellTemplate>
                                           <DataTemplate>
                                               <CheckBox  IsChecked="{Binding Path=IsSuccess}">
                                               </CheckBox>
                                              </DataTemplate>
                                       </GridViewColumn.CellTemplate>
                                   </GridViewColumn>


Questionlittle bug Pin
michamh30-Aug-11 22:45
michamh30-Aug-11 22:45 
GeneralNice solution Pin
zameb12-Aug-10 3:29
zameb12-Aug-10 3:29 
GeneralMoving list sorting classes to external assembly Pin
Ergwun23-Feb-09 12:22
Ergwun23-Feb-09 12:22 
Generalsorting with CellTemplate (not DisplayMemberBinding) Pin
Brian Ellertson24-Jun-08 9:29
Brian Ellertson24-Jun-08 9:29 
GeneralRe: sorting with CellTemplate (not DisplayMemberBinding) Pin
SilverX695-Jul-11 21:52
SilverX695-Jul-11 21:52 
General[Message Removed] Pin
Mojtaba Vali24-May-08 18:12
Mojtaba Vali24-May-08 18: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.