Compartir a través de


Cómo: Agrupar elementos en un control ListView que implementa un modo GridView

En este ejemplo se muestra cómo mostrar grupos de elementos en el modo de vista GridView de un control ListView.

Ejemplo

Para mostrar grupos de elementos en un objeto ListView, defina CollectionViewSource. En el ejemplo siguiente se muestra un objeto CollectionViewSource que agrupa los elementos de datos según el valor del campo de datos Catalog.

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

En el ejemplo siguiente se establece la propiedad ItemsSource para el objeto ListView en el objeto CollectionViewSource definido por el ejemplo anterior. El ejemplo también define un objeto GroupStyle que implementa un control 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>

Vea también

Referencia

ListView

GridView

Conceptos

Información general sobre ListView

Información general sobre GridView

Otros recursos

Temas "Cómo..." sobre ListView