Nasıl yapılır: GridView Uygulayan ListView İçinde Öğeleri Gruplandırma

  • Makale

Bu örnek, bir denetimin görünüm modunda öğe GridView gruplarının ListView nasıl görüntüleneceğini gösterir.

Örnek

içindeki ListViewöğe gruplarını görüntülemek için bir CollectionViewSourcetanımlayın. Aşağıdaki örnekte, veri öğelerini veri alanının değerine göre gruplandıran Catalog bir CollectionViewSource gösterilmektedir.

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

Aşağıdaki örnek için ListViewCollectionViewSource değerini önceki örneğin tanımladığı şekilde ayarlarItemsSource. Örnek ayrıca bir GroupStyle denetim uygulayan bir Expander tanımlar.

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

Ayrıca bkz.