Partager via


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

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>

Voir aussi

Référence

ListView

GridView

Concepts

Vue d'ensemble de ListView

Vue d'ensemble de GridView

Autres ressources

Rubriques "Comment utiliser le ListView"