Using GroupStyle with ListView and define ControlTemplate

We already few examples of using GroupStyle here, here and here. This time we are going to apply the group style in listview not in listbox. In our first step here is our data class.

Code Snippet

public class EmployeeInfo
{
    public EmployeeInfo(int id, string name, string department)
    {
        ID = id;
        Name = name;
        Department = department;
    }

    public int ID
    { get; set; }

    public string Name
    { get; set; }

    public string Department
    { get; set; }
}

 

Then we insert some sample data in it and create group on the basis of departments. Here is a code of it.

Code Snippet

employees.Add(new EmployeeInfo(10, "Mark", "Sales"));
employees.Add(new EmployeeInfo(20, "David", "Accounts"));
employees.Add(new EmployeeInfo(30, "Alex", "Management"));
employees.Add(new EmployeeInfo(40, "Erik", "Accounts"));
employees.Add(new EmployeeInfo(50, "John", "Sales"));
employees.Add(new EmployeeInfo(60, "Scott", "Sales"));
employees.Add(new EmployeeInfo(70, "Jake", "Sales"));
employees.Add(new EmployeeInfo(80, "Bill", "Management"));
employees.Add(new EmployeeInfo(90, "Chris", "Accounts"));

list.ItemsSource = employees;

CollectionView cv = (CollectionView)CollectionViewSource.GetDefaultView(list.ItemsSource);
PropertyGroupDescription pgd = new PropertyGroupDescription("Department");
cv.GroupDescriptions.Add(pgd);

 

Now come to the XAML side. Here is a code to define our control template.

Code Snippet

<GroupStyle>
    <GroupStyle.ContainerStyle>
        <Style TargetType="GroupItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type GroupItem}">
                        <StackPanel>
                            <TextBlock FontWeight="Bold" Foreground="Blue" FontSize="16"
                                      TextAlignment="Center" Text="{Binding Path=Name}"/>
                            <ItemsPresenter/>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GroupStyle.ContainerStyle>
</GroupStyle>

 

The important thing here is we define one stack panel and display heading of the group there. To display data in a list grid view style, we simply uses ItemsPresenter. Here is complete XAML code of our program.

Code Snippet

<Window x:Class="WpfListViewGroup.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow" Height="400" Width="525">
    <Grid>
        <ListView Name="list" Margin="5" ItemsSource="{Binding}">
            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="GroupItem">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type GroupItem}">
                                        <StackPanel>
                                            <TextBlock FontWeight="Bold" Foreground="Blue" FontSize="16"
                                                      TextAlignment="Center" Text="{Binding Path=Name}"/>
                                            <ItemsPresenter/>
                                        </StackPanel>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </ListView.GroupStyle>
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="ID" Width="75" DisplayMemberBinding="{Binding ID}"/>
                    <GridViewColumn Header="Name" Width="300" DisplayMemberBinding="{Binding Name}"/>
                    <GridViewColumn Header="Department" Width="100" DisplayMemberBinding="{Binding Department}"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

 

And here is complete C# code of the program.

Code Snippet

using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Data;

namespace WpfListViewGroup
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<EmployeeInfo> employees = new ObservableCollection<EmployeeInfo>();

        public MainWindow()
        {
            InitializeComponent();

            employees.Add(new EmployeeInfo(10, "Mark", "Sales"));
            employees.Add(new EmployeeInfo(20, "David", "Accounts"));
            employees.Add(new EmployeeInfo(30, "Alex", "Management"));
            employees.Add(new EmployeeInfo(40, "Erik", "Accounts"));
            employees.Add(new EmployeeInfo(50, "John", "Sales"));
            employees.Add(new EmployeeInfo(60, "Scott", "Sales"));
            employees.Add(new EmployeeInfo(70, "Jake", "Sales"));
            employees.Add(new EmployeeInfo(80, "Bill", "Management"));
            employees.Add(new EmployeeInfo(90, "Chris", "Accounts"));

            list.ItemsSource = employees;

            CollectionView cv = (CollectionView)CollectionViewSource.GetDefaultView(list.ItemsSource);
            PropertyGroupDescription pgd = new PropertyGroupDescription("Department");
            cv.GroupDescriptions.Add(pgd);            
        }
    }

    public class EmployeeInfo
    {
        public EmployeeInfo(int id, string name, string department)
        {
            ID = id;
            Name = name;
            Department = department;
        }

        public int ID
        { get; set; }

        public string Name
        { get; set; }

        public string Department
        { get; set; }
    }
}

 

This is the output of the program.