WPF ListView Grouping

The code example shows how to group data in a WPF ListView.

In data driven applications, we often need to show a set of records grouped by a specific field. In this article, we’ll see how we can use a WPF ListView to groups data.

Let's start with an example.
 
Step 1: First we create a class as Employee into MainWindow.xaml.cs 
First, let’s create a class Employee and an enum Department. Each employee belongs to a department. 
  1. public class Employee  
  2. {  
  3. public string Name { get; set; }  
  4. public int Age { get; set; }  
  5. public string Email { get; set; }  
  6. public Department dept { get; set; }  
  7. }

  8. public enum Department  
  9. {  
  10. Accounting,  
  11. Economics,  
  12. Finance,  
  13. Management,  
  14. Marketing,  
  15. }  
Step 2: Create Xaml as given below. Add ListView into Grid. 
 
Now, let’s create a UI and bind and display some data to the controls. Once we have data filled, we will apply WPF tricks to customize the appearance even further. 
  1. <Window x:Class="ListViewGrouping.MainWindow"  
  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"  
  5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6. xmlns:local="clr-namespace:ListViewGrouping"  
  7. mc:Ignorable="d"  
  8. Title="ListViewGrouping" Height="450" Width="800">  
  9. <Grid>  
  10. <ListView Name="lvEmps">  
  11. <ListView.View>  
  12. <GridView>  
  13. <GridViewColumn Header="Name" Width="150" DisplayMemberBinding="{Binding Name}" />  
  14. <GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />  
  15. <GridViewColumn Header="Email" Width="150" DisplayMemberBinding="{Binding Email}" />  
  16. </GridView> </ListView.View>  
  17. <ListView.GroupStyle>  
  18. <GroupStyle>  
  19. <GroupStyle.HeaderTemplate>  
  20. <DataTemplate>  
  21. <TextBlock FontWeight="Bold" FontSize="14" Text="{Binding Name}"/>  
  22. </DataTemplate>  
  23. </GroupStyle.HeaderTemplate>  
  24. </GroupStyle>  
  25. </ListView.GroupStyle>  
  26. </ListView>  
  27. </Grid>  
  28. </Window>  
Step 3: Insert the values into the ListView while initialize the components.
 
Now, we are going to create some objects. A List<Employee> is a collection of Employee objects. A collection of objects will be then bound to the ListsView control. 
 
  1. public partial class MainWindow : Window  
  2. {  
  3. public MainWindow()  
  4. {  
  5. InitializeComponent();  
  6. List<Employee> items = new List<Employee>();  
  7. items.Add(new Employee() { Name = "Ram Charan", Age = 33, Email = "r.charan@gmail.com", dept = Department.Accounting });  
  8. items.Add(new Employee() { Name = "Raju Rastogi", Age = 22, Email = "e.rastogi@gmail.com", dept = Department.Management });  
  9. items.Add(new Employee() { Name = "Dilip Bhatt", Age = 35, Email = "d.bhatt@gmail.com", dept = Department.Economics });  
  10. items.Add(new Employee() { Name = "Dipesh Patil", Age = 33, Email = "d.patil@gmail.com", dept = Department.Accounting });  
  11. items.Add(new Employee() { Name = "Ronak Sharma", Age = 39, Email = "r.sharma@gmail.com", dept = Department.Finance });  
  12. items.Add(new Employee() { Name = "Punit Shah", Age = 43, Email = "p.shah@gmail.com", dept = Department.Economics });  
  13. items.Add(new Employee() { Name = "Haresh Shukla", Age = 25, Email = "h.shukla@gmail.com", dept = Department.Management });  
  14. items.Add(new Employee() { Name = "John Cena", Age = 32, Email = "j.cena@gmail.com", dept = Department.Accounting });  
  15. items.Add(new Employee() { Name = "Govind Patil", Age = 41, Email = "g.patil@gmail.com", dept = Department.Marketing });  
  16. lvEmps.ItemsSource = items;  
  17. CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(lvEmps.ItemsSource);  
  18. PropertyGroupDescription groupDescription = new PropertyGroupDescription("dept");  
  19. view.GroupDescriptions.Add(groupDescription);  
  20. }  
  21. }  
Now, let’s build and run the application. The output UI looks like the following:
 
 
As above figure, you can see the department wise grouping on the employee detail.
 
Step 4: Customizing the group header
 
Now, let’s customize the group header. 
  1. <Window x:Class="ListViewGrouping.MainWindow"  
  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"  
  5. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  6. xmlns:local="clr-namespace:ListViewGrouping"  
  7. mc:Ignorable="d"  
  8. Title="ListViewGrouping" Height="450" Width="800">  
  9. <Grid>  
  10. <ListView Name="lvEmps">  
  11. <ListView.View>  
  12. <GridView>  
  13. <GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />  
  14. <GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />  
  15. </GridView>  
  16. </ListView.View>  
  17. <ListView.GroupStyle>  
  18. <GroupStyle>  
  19. <GroupStyle.ContainerStyle>  
  20. <Style TargetType="{x:Type GroupItem}">  
  21. <Setter Property="Template">  
  22. <Setter.Value>  
  23. <ControlTemplate>  
  24. <Expander IsExpanded="True">  
  25. <Expander.Header>  
  26. <StackPanel Orientation="Horizontal">  
  27. <TextBlock Text="{Binding Name}" FontWeight="DemiBold" Foreground="DarkSlateGray" FontSize="20"VerticalAlignment="Bottom" />  
  28. <TextBlock Text="{Binding ItemCount}" FontSize="18" Foreground="Gray" FontWeight="Bold"FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />  
  29. <TextBlock Text=" record(s)" FontSize="16" Foreground="Gray" FontStyle="Italic"VerticalAlignment="Bottom" />  
  30. </StackPanel>  
  31. </Expander.Header>  
  32. <ItemsPresenter />  
  33. </Expander>  
  34. </ControlTemplate>  
  35. </Setter.Value>  
  36. </Setter>  
  37. </Style>  
  38. </GroupStyle.ContainerStyle>  
  39. </GroupStyle>  
  40. </ListView.GroupStyle>  
  41. </ListView>  
  42. </Grid>  
  43. </Window>  
After applying the above code, run the project. You can see the grouping output as below figure. Now, you can see there is an Expander control groups records based on their departments.

 
 
After closing the Expanders, the UI looks like the following: 
 
 
 
In this code sample, we saw how to use a WPF ListView control to group data.