Share via


Información general sobre ListView

El control ListView proporciona la infraestructura necesaria para mostrar un conjunto de elementos de datos en distintos diseños o vistas. Por ejemplo, un usuario puede desear mostrar los elementos de datos en una tabla y también ordenar sus columnas.

Este tema contiene las secciones siguientes.

  • ¿Qué es un control ListView?
  • Definir un modo de vista para ListView
  • Enlazar datos a ListView
  • Aplicar estilos a un control ListView que implementa GridView
  • Compartir el mismo modo de vista
  • Crear un modo de vista personalizado
  • Temas relacionados

¿Qué es un control ListView?

El control ListView es un ItemsControl que se deriva de ListBox. Normalmente, sus elementos son miembros de una recolección de datos y se representan como objetos ListViewItem. ListViewItem es un control ContentControl que puede contener un solo elemento secundario. Sin embargo, ese elemento secundario puede ser cualquier elemento visual.

Definir un modo de vista para ListView

Para especificar un modo de vista para el contenido de un control ListView, se establece la propiedad View. Un modo de vista que Windows Presentation Foundation (WPF) proporciona es GridView, que muestra una colección de elementos de datos en una tabla que tiene columnas personalizables.

En el ejemplo siguiente se muestra cómo definir GridView para un control ListView que muestra información de empleados.


<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

  <ListView.View>

    <GridView AllowsColumnReorder="true"
              ColumnHeaderToolTip="Employee Information">

      <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=FirstName}" 
                      Header="First Name" Width="100"/>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=LastName}" 
                      Width="100">
                      <GridViewColumnHeader>Last Name
                          <GridViewColumnHeader.ContextMenu>
                          <ContextMenu  MenuItem.Click="LastNameCM_Click"  
                                        Name="LastNameCM">
                              <MenuItem Header="Ascending" />
                              <MenuItem Header="Descending" />
                          </ContextMenu>
                          </GridViewColumnHeader.ContextMenu>
                      </GridViewColumnHeader>
                  </GridViewColumn>

                  <GridViewColumn DisplayMemberBinding=
                          "{Binding Path=EmployeeNumber}" 
                      Header="Employee No." Width="100"/>
    </GridView>

  </ListView.View>
</ListView>

En la ilustración siguiente se muestra la presentación de los datos del ejemplo anterior.

ListView con resultado GridView

Puede crear un modo de vista personalizado mediante la definición de una clase que herede de la clase ViewBase. La clase ViewBase proporciona la infraestructura necesaria para crear una vista personalizada. Para obtener más información acerca de cómo crear una vista personalizada, vea Cómo: Crear un modo de vista personalizado para un control ListView.

Enlazar datos a ListView

Use las propiedades Items y ItemsSource para especificar los elementos para un control ListView. En el ejemplo siguiente se establece la propiedad ItemsSource en una recolección de datos que se denomina EmployeeInfoDataSource.

<ListView ItemsSource="{Binding Source=
                       {StaticResource EmployeeInfoDataSource}}">

En GridView, los objetos GridViewColumn se enlazan a campos de datos específicos. En el ejemplo siguiente se enlaza un objeto GridViewColumn a un campo de datos al especificar Binding para la propiedad DisplayMemberBinding.

Dim gvc1 As New GridViewColumn()
gvc1.DisplayMemberBinding = New Binding("FirstName")
gvc1.Header = "FirstName"
gvc1.Width = 100
GridViewColumn gvc1 = new GridViewColumn();
gvc1.DisplayMemberBinding = new Binding("FirstName");
gvc1.Header = "FirstName";
gvc1.Width = 100;
<GridViewColumn DisplayMemberBinding=
                    "{Binding Path=FirstName}" 
                Header="First Name" Width="100"/>

También puede especificar Binding como parte de una definición DataTemplate que se usa para definir el estilo de las celdas de una columna. En el ejemplo siguiente, DataTemplate que se identifica con ResourceKey establece Binding para GridViewColumn. Observe que en este ejemplo no se define DisplayMemberBinding porque, en ese caso, se invalidaría el enlace especificado por DataTemplate.

<DataTemplate x:Key="myCellTemplateMonth">
  <DockPanel>
    <TextBlock Foreground="DarkBlue" HorizontalAlignment="Center">
      <TextBlock.Text>
        <Binding Path="Month"/>
      </TextBlock.Text>
    </TextBlock>
  </DockPanel>
</DataTemplate>
<GridViewColumn Header="Month" Width="80"
      CellTemplate="{StaticResource myCellTemplateMonth}"/>

Aplicar estilos a un control ListView que implementa GridView

El control ListView contiene objetos ListViewItem, que representan los elementos de datos que se muestran. Puede usar las propiedades siguientes para definir el contenido y estilo de los elementos de datos:

Para evitar problemas de alineación entre las celdas en GridView, no utilice ItemContainerStyle para establecer propiedades o agregar contenido que afecte al ancho de un elemento de ListView. Por ejemplo, puede producirse un problema de alineación al establecer la propiedad Margin en ItemContainerStyle. Para especificar propiedades o definir contenido que afecta al ancho de los elementos en GridView, utilice las propiedades de la clase GridView y sus clases relacionadas, como GridViewColumn.

Para obtener más información sobre cómo utilizar GridView y sus clases auxiliares, vea Información general sobre GridView.

Si define ItemContainerStyle para un control ListView y también define ItemTemplate, debe incluir un elemento ContentPresenter en el estilo de manera que ItemTemplate funcione correctamente.

No use las propiedades HorizontalContentAlignment y VerticalContentAlignment para contenido de ListView que se muestre mediante GridView. Para especificar la alineación del contenido de una columna de GridView, defina CellTemplate.

Compartir el mismo modo de vista

Dos controles ListView no pueden compartir al mismo tiempo el mismo modo de vista. Si intenta utilizar el mismo modo de vista con más de un control ListView, se producirá una excepción.

Para especificar un modo de vista que puedan usar varios controles ListView simultáneamente, utilice plantillas o estilos. Para obtener un ejemplo de cómo definir vistas como recursos (Resources), vea ListView with Multiple Views Sample.

Crear un modo de vista personalizado

Las vistas personalizadas como GridView se derivan de la clase abstracta ViewBase, que proporciona las herramientas necesarias para mostrar elementos de datos que se representan como objetos ListViewItem.

Para obtener un ejemplo de un modo de vista personalizado, vea ListView with Multiple Views Sample.

Vea también

Referencia

GridView

ListView

ListViewItem

Binding

Conceptos

Información general sobre GridView

Optimizar el rendimiento: Controles

Otros recursos

Temas "Cómo..." sobre ListView