Use CollectionViewSource in Silverlight to Sort Data

If you are using Silverlight's ListBox control, you do not have to write code to sort your data. Instead you can use the built-in CollectionViewSource object in XAML to perform the sorting for you. This assumes that you are using a collection that implements the IEnumerable or IList interfaces.

For this example, I will be using a simple Product class with two properties, and a list of Product objects using the Generic List class. Try this out by creating a Product class as shown in the following code:

public class Product {
  public Product(int id, string name) {
    ProductId = id;
    ProductName = name;
  }

  public int ProductId { get; set; }
  public string ProductName { get; set; }
}

Create a collection class that initializes a property called DataCollection with some sample data as shown in the code below:

public class Products : List<Product>
{
  public Products()
  {
    InitCollection();
  }

  public List<Product> DataCollection { get; set; }

  List<Product> InitCollection()
  {
    DataCollection = new List<Product>();

    DataCollection.Add(new Product(3, "PDSA .NET Productivity Framework"));
    DataCollection.Add(new Product(1, "Haystack Code Generator for .NET"));
    DataCollection.Add(new Product(2, "Fundamentals of .NET eBook"));

    return DataCollection;
  }
}

Notice that the data added to the collection is not in any particular order. Create a Silverlight page and add two XML namespaces to the UserControl.

xmlns:scm="clr-namespace:System.ComponentModel;assembly=System.Windows"
xmlns:local="clr-namespace:SLSortData"

The 'local' namespace is the name of the project that you created. The 'scm' namespace references the System.Windows.dll and is needed for the SortDescription class that you will use for sorting the data. Create a UserControl.Resources section in your Silverlight page that looks like the following:

<UserControl.Resources>
  <local:Products x:Key="products" />
  <CollectionViewSource x:Key="prodCollection"
                        Source="{Binding Source={StaticResource products},
                             Path=DataCollection}">
    <CollectionViewSource.SortDescriptions>
      <scm:SortDescription PropertyName="ProductName"
                            Direction="Ascending" />
    </CollectionViewSource.SortDescriptions>
  </CollectionViewSource>
</UserControl.Resources>

The first line of code in the resources section creates an instance of your Products class. The constructor of the Products class calls the InitCollection method which creates three Product objects and adds them to the DataCollection property of the Products class. Once the Products object is instantiated you now add a CollectionViewSource object in XAML using the Products object as the source of the data to this collection. A CollectionViewSource has a SortDescriptions collection that allows you to specify a set of SortDescription objects. Each object can set a PropertyName and a Direction property. As you see in the above code you set the PropertyName equal to the ProductName property of the Product object and tell it to sort in an Ascending direction.

All you have to do now is to create a ListBox control and set its ItemsSource property to the CollectionViewSource object. The ListBox displays the data in sorted order by ProductName and you did not have to write any LINQ queries or write other code to sort the data!

<ListBox 
   ItemsSource="{Binding Source={StaticResource prodCollection}}"
   DisplayMemberPath="ProductName" />

Past Blog Content

Blog Archive

1 Comment

Comments have been disabled for this content.