Comment : grouper des éléments dans un ListView implémentant un GridView

Mise à jour : novembre 2007

Cet exemple montre comment afficher des groupes d'éléments en mode d'affichage GridView d'un contrôle ListView.

Exemple

Pour afficher des groupes d'éléments dans un ListView, définissez un CollectionViewSource. L'exemple suivant présente un CollectionViewSource qui regroupe des éléments de données d'après la valeur du champ de données Catalog.

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

L'exemple suivant affecte à ItemsSource pour le ListView le CollectionViewSource défini par l'exemple précédent. L'exemple définit également un GroupStyle qui implémente un contrôle Expander.

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


...


</ListView>

Pour l'exemple complet, consultez Regroupement ListView, exemple.

Voir aussi

Concepts

Vue d'ensemble de ListView

Vue d'ensemble de GridView

Référence

ListView

GridView

Autres ressources

Rubriques Comment relatives à ListView

Exemples de ListView