Compartilhar via


Como agrupar itens em um ListView que implemente um GridView

Este exemplo mostra como exibir grupos de itens no GridView modo de exibição de um ListView controle.

Exemplo

Para exibir grupos de itens em um , defina um ListViewCollectionViewSourcearquivo . O exemplo a seguir mostra um CollectionViewSource que agrupa itens de dados de acordo com o Catalog valor do campo de dados.

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

O exemplo a seguir define o ItemsSource para o que o ListViewCollectionViewSource exemplo anterior define. O exemplo também define um que implementa um GroupStyleExpander controle.

<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>

Confira também