In this post I'll show how to get a grouped datagrid with more than one group and with a template differently coloured for each group and how to sort each group and subgroup by the number of items.
As usual I got inspiration from other sites and programmers ;-)
The final result will look like this screenshot:
First let's load an ItemsSource for the datagrid. I used a ListCollectionView from business objects of mine.
Then I add the sort descriptions to group my collection by three different properties.
1 public MainWindow()
2 {
3 InitializeComponent();
4
5 // create a List<MyBusinessObject>
6 List<MyBusinessObject> MyObjects = new List<MyBusinessObject>();
7
8 MyObjects.Add(new MyBusinessObject() { Age = 13, FirstName = "walter", Leaf = "3", Main = "A", Section = "Z" });
9 MyObjects.Add(new MyBusinessObject() { Age = 45, FirstName = "gianni", Leaf = "3", Main = "A", Section = "Z" });
10 MyObjects.Add(new MyBusinessObject() { Age = 23, FirstName = "anthony", Leaf = "4", Main = "A", Section = "Z" });
11 MyObjects.Add(new MyBusinessObject() { Age = 56, FirstName = "michael", Leaf = "4", Main = "A", Section = "Z" });
12 MyObjects.Add(new MyBusinessObject() { Age = 62, FirstName = "frank", Leaf = "4", Main = "A", Section = "Z" });
13 MyObjects.Add(new MyBusinessObject() { Age = 23, FirstName = "anthony", Leaf = "1", Main = "B", Section = "Z" });
14 MyObjects.Add(new MyBusinessObject() { Age = 56, FirstName = "michael", Leaf = "2", Main = "B", Section = "Z" });
15 MyObjects.Add(new MyBusinessObject() { Age = 2, FirstName = "parsifal", Leaf = "2", Main = "B", Section = "Z" });
16 MyObjects.Add(new MyBusinessObject() { Age = 76, FirstName = "joseph", Leaf = "9", Main = "B", Section = "Z" });
17 MyObjects.Add(new MyBusinessObject() { Age = 90, FirstName = "carl", Leaf = "12", Main = "B", Section = "V" });
18 MyObjects.Add(new MyBusinessObject() { Age = 41, FirstName = "fred", Leaf = "12", Main = "B", Section = "V" });
19 MyObjects.Add(new MyBusinessObject() { Age = 36, FirstName = "brad", Leaf = "7", Main = "C", Section = "V" });
20
21 // create and link the datacontext
22 MyDataContext = new DT();
23 this.DataContext = MyDataContext;
24
25 // create ListCollectionView
26 ListCollectionView GroupedCollection = new ListCollectionView(MyObjects);
27
28 // add the groupings
29 GroupedCollection.GroupDescriptions.Add(new PropertyGroupDescription("Main"));
30 GroupedCollection.GroupDescriptions.Add(new PropertyGroupDescription("Section"));
31 GroupedCollection.GroupDescriptions.Add(new PropertyGroupDescription("Leaf"));
Then I added a value for the CustomSort property to get every group ordered by its number of items.
I got inspiration from this blog post: http://www.mindscapehq.com/blog/index.php/2008/06/19/custom-sorting-wpf-collection-views-and-the-wpf-property-grid/
And then I added the ListCollectionView to my Data Context to get it binded by the datagrid in the xaml:
1 // add the CustomSort
2 GroupedCollection.CustomSort = new GroupedItemsSorter(MyObjects, ListSortDirection.Descending);
3
4 // add the ItemsSource
5 MyDataContext.MyItemsSource = GroupedCollection;
6 }
7
8 private DT MyDataContext;
9
10 }
11
12 public class DT : ViewModelBase
13 {
14
15 private ListCollectionView myItemsSource;
16 public ListCollectionView MyItemsSource
17 {
18 get
19 {
20 return myItemsSource;
21 }
22 set
23 {
24 myItemsSource = value;
25 RaisePropertyChanged("MyItemsSource");
26 }
27 }
28
29 }
As you can see the CustomSort property is an object of a custom class. I pass to the constructor the Collection and the desired direction for the ordering.
Let's see the code of the custom class:
1 class GroupedItemsSorter : IComparer
2 {
3 public GroupedItemsSorter(List<MyBusinessObject> Items, ListSortDirection Direction)
4 {
5 this.Items = Items;
6 this.Direction = Direction;
7 }
8
9 public int Compare(object x, object y)
10 {
11 String Main_x = (x as MyBusinessObject).Main;
12 String Main_y = (y as MyBusinessObject).Main;
13
14 String Section_x = (x as MyBusinessObject).Section;
15 String Section_y = (y as MyBusinessObject).Section;
16
17 String Leaf_x = (x as MyBusinessObject).Leaf;
18 String Leaf_y = (y as MyBusinessObject).Leaf;
19
20 int SameMainFor_x = Items.Where(it => it.Main.Equals(Main_x)).Count();
21 int SameMainFor_y = Items.Where(it => it.Main.Equals(Main_y)).Count();
22
23 if (SameMainFor_x != SameMainFor_y)
24 return (Direction == ListSortDirection.Ascending ? 1 : -1) * Math.Sign(SameMainFor_x - SameMainFor_y);
25
26
27 int SameSectionFor_x = Items.Where(it => it.Section.Equals(Section_x)).Count();
28 int SameSectionFor_y = Items.Where(it => it.Section.Equals(Section_y)).Count();
29
30 if (SameSectionFor_x != SameSectionFor_y)
31 return (Direction == ListSortDirection.Ascending ? 1 : -1) * Math.Sign(SameSectionFor_x - SameSectionFor_y);
32
33 int SameLeafFor_x = Items.Where(it => it.Leaf.Equals(Leaf_x)).Count();
34 int SameLeafFor_y = Items.Where(it => it.Leaf.Equals(Leaf_y)).Count();
35
36 if (SameLeafFor_x != SameLeafFor_y)
37 return (Direction == ListSortDirection.Ascending ? 1 : -1) * Math.Sign(SameLeafFor_x - SameLeafFor_y);
38
39 return 0;
40
41 }
42
43 private List<MyBusinessObject> Items { get; set; }
44 private ListSortDirection Direction { get; set; }
45 }
First the class must implement the IComparer interface. The Collection uses the method Compare to know which must come first between two objects. The method must return an integer ,1,-1 or 0 respectively if x is greater, smaller or equal to y.
I implemented the Compare method in this way. I count how many items share the same value for the property 'Main', that is the first property I have grouped by, for the objectx x and y.
Than if the two counts are different the greatest object of the two is the one who have the greatest count.
And so I return the sign of the counts difference multiplied by the desired Direction (ascending or descending).
If the two counts are equal I repeat the same code for the Section property that is the second property I have grouped by and so on.
With some effort I think it is possible to create a generic comparer for every kind of business object and for any number of grouping properties.
Thi is all concerning the data model. Now let's see the xaml for the datagrid:
1 <Window x:Class="ColouredGroupedGrid.MainWindow"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:my="clr-namespace:ColouredGroupedGrid"
4 xmlns:cm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
5 Title="MainWindow" Height="350" Width="525">
6
7 <Window.Resources>
8
9 <my:ConverterBackgroundHeader x:Key="ConverterBackgroundHeader" />
10
11 </Window.Resources>
12
13 <Grid>
14
15 <Grid>
16
17 <Grid.ColumnDefinitions>
18 <ColumnDefinition Width="*" />
19 </Grid.ColumnDefinitions>
20 <Grid.RowDefinitions>
21 <RowDefinition Height="*" />
22 </Grid.RowDefinitions>
23
24 <DataGrid AutoGenerateColumns="False" Name="dataGrid1"
25 ScrollViewer.CanContentScroll="True"
26 ScrollViewer.VerticalScrollBarVisibility="Auto"
27 ScrollViewer.HorizontalScrollBarVisibility="Auto"
28 Foreground="Black" CanUserAddRows="False" IsReadOnly="True" RowBackground="#FFD3E8E0"
29 AlternatingRowBackground="White" HorizontalScrollBarVisibility="Visible" ItemsSource="{Binding MyItemsSource}"
30 VerticalScrollBarVisibility="Visible" SelectionMode="Single" RowHeaderStyle="{DynamicResource DataGridRowHeaderStyle1}" >
31 <DataGrid.GroupStyle>
32 <GroupStyle>
33 <GroupStyle.ContainerStyle>
34 <Style TargetType="{x:Type GroupItem}">
35 <Setter Property="Template">
36 <Setter.Value>
37 <ControlTemplate TargetType="{x:Type GroupItem}">
38 <Expander Margin="5,0,0,0" Background="{Binding .,Converter={StaticResource ConverterBackgroundHeader}}">
39 <Expander.Header >
40 <StackPanel Orientation="Horizontal" >
41 <TextBlock Text="{Binding Path=Name}" />
42 <TextBlock Text=" => "/>
43 <TextBlock Text="{Binding Path=ItemCount}"/>
44 <TextBlock Text=" items"/>
45 </StackPanel>
46 </Expander.Header>
47 <ItemsPresenter />
48 </Expander>
49 </ControlTemplate>
50 </Setter.Value>
51 </Setter>
52 </Style>
53 </GroupStyle.ContainerStyle>
54 </GroupStyle>
55 </DataGrid.GroupStyle>
56 <DataGrid.Columns>
57 <DataGridTextColumn Header="Main" Binding="{Binding Main}" />
58 <DataGridTextColumn Header="Section" Binding="{Binding Section}" />
59 <DataGridTextColumn Header="Leaf" Binding="{Binding Leaf}" />
60 <DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" />
61 <DataGridTextColumn Header="Age" Binding="{Binding Age}" />
62 </DataGrid.Columns>
63
64 </DataGrid>
65 </Grid>
66
67 </Grid>
68 </Window>
69
Here you can see that I added a template for the GroupStyle property of the datagrid. The template is an expander and I read an example of this here: http://wpftutorial.net/DataGrid.html
I just added a left margin of 5 pixels to get an offset for every child group in the hierarchy.
The Expander background is linked to a converter where I managed to get a different colour for each group in the hierarchy.
Background="{Binding .,Converter={StaticResource ConverterBackgroundHeader}}">
The code for the converter is: 1 public class ConverterBackgroundHeader : IValueConverter
2 {
3
4 #region IValueConverter Members
5
6
7 public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
8 {
9 int level = 0;
10
11 CollectionViewGroup obj = value as CollectionViewGroup;
12
13 if (obj == null) return value;
14
15 while ((obj.Items[0] as CollectionViewGroup) != null)
16 {
17 level++;
18 obj = obj.Items[0] as CollectionViewGroup;
19 }
20
21 BrushConverter bc = new BrushConverter();
22
23 switch (level)
24 {
25 case 2:
26 return (Brush)bc.ConvertFrom("#E9E8FF");
27 case 1:
28 return (Brush)bc.ConvertFrom("#E3FFFE");
29 case 0:
30 return (Brush)bc.ConvertFrom("#F8FFE3");
31
32 }
33
34 return value;
35
36 }
37
38 // ConvertBack is not implemented for a OneWay binding.
39 public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
40 {
41 throw new NotImplementedException();
42 }
43
44 #endregion
45 }
The converter receives a CollectionViewGroup. I need to know at what level of the hierarchy the group is.
Since the last group, the group formed by mean of the last sort description of the ListCollectionView, has one or more instances of my business objects as its Items and since, instead, the other groups have other CollectionViewGroup objects as their Items, I just iterate through the hierarchy incrementing a variable until I find an instance of my business objects. Then I simply return a different color for each value I find from the while loop.
The last thing I want to show is the RowHeaderStyle="{DynamicResource DataGridRowHeaderStyle1}" used in the datagrid.
1 <Application x:Class="ColouredGroupedGrid.App"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
5 StartupUri="MainWindow.xaml">
6
7 <Application.Resources>
8
9 <BooleanToVisibilityConverter x:Key="bool2VisibilityConverter"/>
10 <Style x:Key="RowHeaderGripperStyle" TargetType="{x:Type Thumb}">
11 <Setter Property="Height" Value="8"/>
12 <Setter Property="Background" Value="Transparent"/>
13 <Setter Property="Cursor" Value="SizeNS"/>
14 <Setter Property="Template">
15 <Setter.Value>
16 <ControlTemplate TargetType="{x:Type Thumb}">
17 <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
18 </ControlTemplate>
19 </Setter.Value>
20 </Setter>
21 </Style>
22 <Style x:Key="DataGridRowHeaderStyle1" TargetType="{x:Type DataGridRowHeader}">
23 <Setter Property="Template">
24 <Setter.Value>
25 <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
26 <Grid>
27 <Microsoft_Windows_Themes:DataGridHeaderBorder Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}" IsSelected="{TemplateBinding IsRowSelected}" Orientation="Horizontal" Padding="0" SeparatorBrush="{TemplateBinding SeparatorBrush}" SeparatorVisibility="{TemplateBinding SeparatorVisibility}">
28 <StackPanel Orientation="Horizontal">
29 <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
30 <Control SnapsToDevicePixels="false" Template="{Binding ValidationErrorTemplate, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Visibility="{Binding (Validation.HasError), Converter={StaticResource bool2VisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}"/>
31 </StackPanel>
32 </Microsoft_Windows_Themes:DataGridHeaderBorder>
33 <Thumb x:Name="PART_TopHeaderGripper" Style="{StaticResource RowHeaderGripperStyle}" VerticalAlignment="Top"/>
34 <Thumb x:Name="PART_BottomHeaderGripper" Style="{StaticResource RowHeaderGripperStyle}" VerticalAlignment="Bottom"/>
35 </Grid>
36 </ControlTemplate>
37 </Setter.Value>
38 </Setter>
39 </Style>
40
41 </Application.Resources>
42
43
44 </Application>
45
This is just the standard template that comes up with Expression Blend if you tell it to modify the default RowHeaderStyle. I just changed the Background of the DataGridHeaderBorder to Transparent to avoid an annoying border that shows up when you resize the window and the horizontal bar appears.
The complete example is available here.
