Sort Data Using Code with the Silverlight CollectionViewSource
As a follow-up to last week's blog posting and newsletter, this week I am going to show you how to use the CollectionViewSource object in Silverlight to sort data using code. Sometimes you need something a little more flexible, so you will need to resort to writing some code. You can take advantage of the CollectionViewSource from your XAML, but dynamically change the sort order of your lists with just a few lines of code.
For this example, I will be using a simple Product class with three properties, and a collection 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, string type)
{
ProductId = id;
ProductName = name;
ProductType = type;
}
public int ProductId { get; set; }
public string ProductName { get; set; }
public string ProductType { 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 Framework", "Product"));
DataCollection.Add(new Product(1, "Haystack", "Product"));
DataCollection.Add(new Product(2, "Fundamentals of .NET eBook", "Book"));
return DataCollection;
}
}
The screen shot shown in Figure 1 is a Silverlight page that allows the user to sort the Product data by either the Product Name or the Product Type.
Figure 1: Sorting data using code in Silverlight
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.
The two Radio Buttons on the page are created using the following xaml:
<RadioButton Name="rdoSortName"
Tag="ProductName"
Checked="SortTheData"
Content="Sort by Name" />
<RadioButton Name="rdoSortType"
Tag="ProductType"
Checked="SortTheData"
Content="Sort by Type" />
Notice the Tag attribute has been set with the name of the property that you want to sort on. The Checked attribute is set to an event procedure called SortTheData. This event procedure is shown in the following code.
private void SortTheData(object sender, RoutedEventArgs e)
{
if (lstData != null)
{
ICollectionView dataView;
dataView = (ICollectionView)lstData.ItemsSource;
dataView.SortDescriptions.Clear();
dataView.SortDescriptions.Add(
new SortDescription(((RadioButton)sender).Tag.ToString(),
ListSortDirection.Ascending));
lstData.ItemsSource = dataView;
}
}
In this code you are retrieving the CollectionViewSource data from the ItemsSource property of the list box. You cast this as a ICollectionView object. Clear any existing SortDescriptions and then add a new SortDescription object to the SortDescriptions collection on the CollectionView. You pass to the constructor of the SortDescription class the Tag property of the Radio button that was selected. Remember this is the name of the property that you wish to sort on. The second parameter passed to the constructor is the direction of the sort, either Ascending or Descending.
That's all there is to it. A simple way to allow your users to sort on different properties with just a few lines of code!
NOTE: You can download the complete sample code (in both VB and C#) at my website.
http://www.pdsa.com/downloads. Choose Tips & Tricks, then "Sort Data Using Silverlight CollectionViewSource" from the drop-down.
