How do I group items in a WPF ListView

Question

I have a ListView that I want to group results into, however the examples I am finding are not working. How can I group my results?

I want to group on the Status property of a custom object.

This is what I have:

<ListView IsSynchronizedWithCurrentItem="True"
          ItemsSource="{Binding}"
          HorizontalContentAlignment="Stretch"
          ScrollViewer.HorizontalScrollBarVisibility="Disabled"
          Background="Transparent" SelectionChanged="ListView_SelectionChanged"
          Name="lstShelvedOrders">

        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock FontWeight="Bold" FontSize="15"
                         Text="{Binding Path=Status}"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
            </GroupStyle>
        </ListView.GroupStyle>

        <ListView.ItemContainerStyle>
            <Style TargetType="{x:Type ListViewItem}">
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Width" Value="Auto" />
                <Setter Property="FontSize" Value="10.4"  />               
            </Style>
        </ListView.ItemContainerStyle>

        <ListView.View>
            <GridView>
                <GridViewColumn DisplayMemberBinding="{Binding Path=Number}" Header="Shelve ID"  />
                <GridViewColumn DisplayMemberBinding="{Binding Path=Customer}" Header="Customer" />
                <GridViewColumn DisplayMemberBinding="{Binding Path=PurchaseOrderNo}" Header="PO Number" />
                <GridViewColumn DisplayMemberBinding="{Binding Path=SubmittedBy}" Header="Shelved By"  />
                <GridViewColumn DisplayMemberBinding="{Binding Path=OrderDate, StringFormat=MMM dd\, yyyy}" Header="Date"  />
                <GridViewColumn DisplayMemberBinding="{Binding Path=CustomerTerms.Description}" Header="Order Terms"  />
                <GridViewColumn DisplayMemberBinding="{Binding Path=ShippingMethod.Description}" Header="Shipping"  />
                <GridViewColumn DisplayMemberBinding="{Binding Path=TotalPrice, StringFormat=c}" Header="Order Total"  />
            </GridView>
        </ListView.View>
    </ListView>

And this is the code that I have:

 void ShelvedOrderList_DataContextChanged(object sender, System.Windows.DependencyPropertyChangedEventArgs e)
 {
     AddGrouping();
 }

 private void AddGrouping()
 {
     if ( lstShelvedOrders.ItemsSource == null)
     {
         return;
     }

     CollectionView myView = (CollectionView)CollectionViewSource.GetDefaultView(lstShelvedOrders.ItemsSource);
     PropertyGroupDescription groupDescription = new PropertyGroupDescription("Status");
     myView.GroupDescriptions.Add(groupDescription);
 }

Fortran

Answer 1

I notice one thing right away - the GroupStyle.HeaderTemplate will be applied to a CollectionViewGroup, so your DataTemplate should probably look like this:

<GroupStyle>
    <GroupStyle.HeaderTemplate>
        <DataTemplate>
            <TextBlock FontSize="15" FontWeight="Bold" Text="{Binding Name}"/>
        </DataTemplate>
    </GroupStyle.HeaderTemplate>
</GroupStyle>

CollectionViewGroup.Name will be assigned the value of Status for that group.

Unsecured

Well, I'm getting three instances of the group now now, but its grouping so thats a win. Your getting to be my personal hero here. – Fortran

How can I use this code in a MVVM environment? There is no near code line where the list items are set. They're used through binding. I cannot find an event that I can hook the AddGrouping() method into. When the DataContext of the entire user control has changed, the list's ItemsSource is still null. I guess it takes a little longer. – Loux

You can create a CollectionViewSource in XAML with the appropriate grouping, and bind your controls to that instead of the source collection directly. – Unsecured

Is there a way to do this AND make the header a selectable ListView Item? I have a similar issue but when I hit a button I need to remove/edit based on what is selected IE the entire group OR be able to remove just sub items in that group. – Turnbow

Answer 2

I think this can also be better, using a GroupStyle with a new ControlTemplate:

<ListView ItemsSource="{Binding Path=ContactsView}">
  <ListView.GroupStyle>
    <GroupStyle>
      <GroupStyle.ContainerStyle>
        <Style TargetType="{x:Type GroupItem}">
          <Setter Property="Template" Value="{StaticResource ContactsGroupItemTemplate}" />
        </Style>
      </GroupStyle.ContainerStyle>
    </GroupStyle>
  </ListView.GroupStyle>

...

<ControlTemplate TargetType="{x:Type GroupItem}" x:Key="ContactsGroupItemTemplate">
  <Expander IsExpanded="False">
    <Expander.Header>
      <DockPanel>
        <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100"/>
          <TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount}"/>
          <TextBlock FontWeight="Bold" Text=" Items"/>
      </DockPanel>
    </Expander.Header>
    <Expander.Content>
      <ItemsPresenter />
    </Expander.Content>
  </Expander>
</ControlTemplate>

Heatstroke