Silverlight 3, the CollectionViewSource and sorting

In my previous post we were introduced to the CollectionViewSource. We have multiple ItemSources binding to the same collection using a CollectionViewSource – very powerful.  Now what if we want to sort the items displayed in one of our grid cells?  We will focus on row one and column one for the rest of this post.

I’ve added some more default data to the Control’s constructor to make things a little more interesting and also notice I have added a few buttons to the bottom of our control:

The Sort by Name button adds a sort description to the CollectionViewSource

theDataContext[0].Column1.View.SortDescriptions.Add(new SortDescription("SomeName",ListSortDirection.Ascending));

This code tells the CollectionViewSource to sort the items in it’s view by the SomeName property in ascending order.  Click the button and we see the following:

Click the Clear Sort Descriptions button.

The Sort By Value button tells the CollectionViewSource to sort the items in the view by the SomeValue Property in ascending order.

theDataContext[0].Column1.View.SortDescriptions.Add(new SortDescription("SomeValue", ListSortDirection.Ascending));

Click the button to see the following:

This time our list is sorted by the SomeValue property.

Where things get interesting is that you can add multiple sort descriptions.  Try clearing the filter, then adding the name and value filter (in that order) and we see the following:

The collection is first sorted by name, then by value.

Clear the filter and click the Value, then name button and we see this:

The collection is first sorted by SomeValue, then by SomeName.

The order is important!  If you want to add a sort description to the top of the sort order, simply use the Insert method as follows:

theDataContext[0].Column1.View.SortDescriptions.Insert(0,new SortDescription("SomeValue", ListSortDirection.Ascending));

Here is the modified XAML:

Code Snippet

1. <UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="SilverlightApplication1.MainPage"
2.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5.    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="FontSize" Value="9"/>
        </Style>
    </UserControl.Resources>
  <Grid x:Name="LayoutRoot">
        <ScrollViewer VerticalScrollBarVisibility="Auto">
            <StackPanel Orientation="Vertical">
            <data:DataGrid x:Name="TheMainDataGrid"  AutoGenerateColumns="False" ItemsSource="{Binding}" HeadersVisibility="Column">
                <data:DataGrid.Columns>
                    <data:DataGridTemplateColumn Header="Column 1">
                        <data:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <ListBox MinHeight="15" ItemsSource="{Binding Path=Column1.View}" >
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Margin="10" Text="{Binding Path=SomeName}" />
                                                <TextBlock Margin="10" Text="{Binding SomeValue}" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </DataTemplate>
                        </data:DataGridTemplateColumn.CellTemplate>
                    </data:DataGridTemplateColumn>
                    <data:DataGridTemplateColumn Header="Column 2">
                        <data:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <ListBox MinHeight="15" ItemsSource="{Binding Path=Column2.View}" >
                                    <ListBox.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Margin="10" Text="{Binding SomeName}" />
                                                <TextBlock Margin="10" Text="{Binding SomeValue}" />
                                            </StackPanel>
                                        </DataTemplate>
                                    </ListBox.ItemTemplate>
                                </ListBox>
                            </DataTemplate>
                        </data:DataGridTemplateColumn.CellTemplate>
                    </data:DataGridTemplateColumn>
                </data:DataGrid.Columns>
            </data:DataGrid>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <TextBlock Margin="5" Text="Name:"/>
                <TextBox x:Name="tbNAme" Margin="5" Width="100"></TextBox>
                <TextBlock Margin="5" Width="100" Text="Value:"/>
                <TextBox x:Name="tbValue" Margin="5" Width="100"></TextBox>
                <Button x:Name="AddButton" Margin="5" Content="Add" Click="AddButton_Click"/>
            </StackPanel>
            <StackPanel HorizontalAlignment="Left">
                <Button x:Name="ChangeNameButton" Width="150" Content="Change Name" Click="ChangeNameButton_Click"/>
                <Button x:Name="ChangeValueButton" Width="150" Content="Change Value" Click="ChangeValueButton_Click"/>
                <Button x:Name="refresh" Width="150" Content="Refresh CVS" Click="refresh_Click" />
                <Button x:Name="AddNameSort" Width="150" Content="Sort by Name" Click="AddNameSort_Click"/>
                <Button x:Name="AddValueSort" Width="150" Content="Sort by Value" Click="AddValueSort_Click"/>
                <Button x:Name="ClearSort" Width="150" Content="Clear Sort Descriptions" Click="ClearSort_Click"/>
            </StackPanel>
        </StackPanel>
            </ScrollViewer>
  </Grid>
68. </
UserControl>

Here is the modified code behind:

Code Snippet

1. using System.Collections.ObjectModel;
2. using System.Windows.Controls;
3. using System.Windows.Data;
4. using System.ComponentModel;
6. namespace SilverlightApplication1
7. {
8.     public partial class MainPage : UserControl
9.     {
10.         ObservableCollection<TestClass> theMainCollection ;
11.         ObservableCollection<TheRowClass> theDataContext;
12.         public MainPage()
13.         {
14.             InitializeComponent();
15.             theMainCollection = new ObservableCollection<TestClass>()
16.                 { new TestClass() {SomeName="A",SomeValue=11},
17.                     new TestClass() {SomeName="A",SomeValue=12},
18.                     new TestClass() {SomeName="A",SomeValue=10},
19.                     new TestClass() {SomeName="AB",SomeValue=21},
20.                     new TestClass() {SomeName="A",SomeValue=13},
21.                     new TestClass() {SomeName="B",SomeValue=13},
22.                     new TestClass() {SomeName="B",SomeValue=14},
24.                     new TestClass() {SomeName="AB",SomeValue=11},
25.                     new TestClass() {SomeName="BC",SomeValue=22},
26.                     new TestClass() {SomeName="AB",SomeValue=23},
27.                     new TestClass() {SomeName="BC",SomeValue=24}
28.                 };
29.           
30.             theDataContext = new ObservableCollection<TheRowClass>();
31.             theDataContext.Add(new TheRowClass(theMainCollection));
32.             theDataContext.Add(new TheRowClass(theMainCollection));
34.             TheMainDataGrid.DataContext = theDataContext;
35.             AddFilter(theDataContext[0].Column1, 1, 1);
36.             AddFilter(theDataContext[0].Column2, 1, 2);
37.             AddFilter(theDataContext[1].Column1, 2, 1);
38.             AddFilter(theDataContext[1].Column2, 2, 2);
39.            
41.         }
42.         private void AddFilter(CollectionViewSource cvs, int row, int column)
43.         {
44.             cvs.Filter += delegate(object o, FilterEventArgs eArgs)
45.             {
46.                 //Simple filter saying if column = 1 look for an A in the SomeName property
47.                 //Else look for a B.  If we are in Row 1 look for a 1 in the SomeValue property
48.                 //Else look for a 2
49.                 string columnFilter;
50.                 if (row == 1)
51.                     columnFilter = "A";
52.                 else
53.                     columnFilter = "B";
54.                 if ((eArgs.Item as TestClass).SomeValue.ToString().Contains(column.ToString()) && (eArgs.Item as TestClass).SomeName.Contains(columnFilter))
55.                     eArgs.Accepted = true;
56.                 else
57.                     eArgs.Accepted = false;
58.             };
60.         }
62.         private void AddButton_Click(object sender, System.Windows.RoutedEventArgs e)
63.         {
64.             TestClass tc = new TestClass();
65.             tc.SomeName = tbNAme.Text;
66.             tc.SomeValue = int.Parse(tbValue.Text);
67.             theMainCollection.Add(tc);
68.         }
70.         private void ChangeNameButton_Click(object sender, System.Windows.RoutedEventArgs e)
71.         {
72.             theMainCollection[theMainCollection.Count-1].SomeName = "B";
73.         }
75.         private void ChangeValueButton_Click(object sender, System.Windows.RoutedEventArgs e)
76.         {
77.             theMainCollection[theMainCollection.Count - 1].SomeValue = 25;
78.         }
80.         private void refresh_Click(object sender, System.Windows.RoutedEventArgs e)
81.         {
82.             theDataContext[0].Column1.View.Refresh();
83.             theDataContext[1].Column1.View.Refresh();
84.             theDataContext[0].Column2.View.Refresh();
85.             theDataContext[1].Column2.View.Refresh();
86.         }
88.         private void AddNameSort_Click(object sender, System.Windows.RoutedEventArgs e)
89.         {
90.             theDataContext[0].Column1.View.SortDescriptions.Add(new SortDescription("SomeName",ListSortDirection.Ascending));
91.         }
93.         private void AddValueSort_Click(object sender, System.Windows.RoutedEventArgs e)
94.         {
95.             theDataContext[0].Column1.View.SortDescriptions.Add(new SortDescription("SomeValue", ListSortDirection.Ascending));
96.         }
98.         private void ClearSort_Click(object sender, System.Windows.RoutedEventArgs e)
99.         {
100.             theDataContext[0].Column1.View.SortDescriptions.Clear();
101.         }
102.     }
103. }
104. 
     

See my previous post to get the supporting code.

Technorati Tags: Silverlight 3,CollectionViewSource,ObservableCollection,DataGrid,SortDescription