Freigeben über

Vorgehensweise: Gruppieren von Elementen in einer ListView, die eine GridView implementiert

In diesem Beispiel wird gezeigt, wie Gruppen von Elementen im GridView Ansichtsmodus eines ListView Steuerelements angezeigt werden.

Beispiel

Zum Anzeigen von Gruppen von Elementen in einem ListView, definieren Sie eine CollectionViewSource. Im folgenden Beispiel wird gezeigt, wie CollectionViewSource Datenelemente entsprechend dem Wert des Catalog Datenfelds gruppiert.

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

Im folgenden Beispiel wird der ItemsSource für den ListView auf den CollectionViewSource festgelegt, der im vorherigen Beispiel definiert wird. Im Beispiel wird auch ein GroupStyle Steuerelement definiert, das ein Expander Steuerelement implementiert.

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

Siehe auch