Posted by: Zeeshan Amjad | May 13, 2011

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&quot;
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
       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.

GroupStyleListViewOutput

Advertisements

Responses

  1. […] already saw an example of applying GroupStyle with ListBox here and with ListView here.  We can apply the same technique with DatGrid. In first step we define the data class. […]

  2. Thanks Zeeshan God Bless You My Friend ! Have nice Life !

    • Thanks Nilesh to like it.

      Regards
      Zeeshan Amjad

  3. U are awesome… From last 1 hr i was searching for this…. and was beating my head in search results of MVVM, Observablecollections.. bla bla..

    • Hi Risky

      Thanks to like it. I am glad that it is helpful to you.

      Regards
      Zeeshan Amjad


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: