Delen via

Procedure: Items groeperen in een ListView die een GridView implementeert

  • Artikel

In dit voorbeeld ziet u hoe u groepen items kunt weergeven in de GridView weergavemodus van een ListView besturingselement.

Voorbeeld

Als u groepen items in een ListViewwilt weergeven, definieert u een CollectionViewSource. In het volgende voorbeeld ziet u een CollectionViewSource waarmee gegevensitems worden gegroepeerd op basis van de waarde van het Catalog gegevensveld.

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

In het volgende voorbeeld wordt de ItemsSource voor de ListView ingesteld op de CollectionViewSource die in het vorige voorbeeld is gedefinieerd. In het voorbeeld wordt ook een GroupStyle gedefinieerd waarmee een Expander besturingselement wordt geïmplementeerd.

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

Zie ook