Group Items in a ListView That Implements a GridView

How to: Group Items in a ListView That Implements a GridView

This example shows how to display groups of items in the GridView view mode of a ListView control.


To display groups of items in a ListView, define a CollectionViewSource. The following example shows a CollectionViewSource that groups data items according to the value of the Catalog data field.

<CollectionViewSource x:Key='src' 
                      Source="{Binding Source={StaticResource MyData}, 
    <PropertyGroupDescription PropertyName="@Catalog" />

The following example sets the ItemsSource for the ListView to the CollectionViewSource that the previous example defines. The example also defines a GroupStyle that implements an Expander control.

<ListView ItemsSource='{Binding Source={StaticResource src}}' 
        <Style TargetType="{x:Type GroupItem}">
          <Setter Property="Margin" Value="0,0,0,5"/>
          <Setter Property="Template">
              <ControlTemplate TargetType="{x:Type GroupItem}">
                <Expander IsExpanded="True" BorderBrush="#FFA4B97F" 
                      <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" 
                                 Margin="5,0,0,0" Width="100"/>
                      <TextBlock FontWeight="Bold" 
                                 Text="{Binding Path=ItemCount}"/>
                    <ItemsPresenter />



For the complete sample, see ListView Grouping Sample.

See Also

Community Additions

© 2015 Microsoft