Información general sobre GridViewGridView Overview

GridView modo de vista es uno de los modos de visualización para un ListView control.GridView view mode is one of the view modes for a ListView control. La GridView clase y sus clases auxiliares permiten que usted y a los usuarios ver colecciones de elementos en una tabla que normalmente utiliza botones como encabezados de columna interactivos.The GridView class and its supporting classes enable you and your users to view item collections in a table that typically uses buttons as interactive column headers. Este tema se presenta la GridView clase y describe su uso.This topic introduces the GridView class and outlines its use.

¿Qué es una vista GridView?What Is a GridView View?

El GridView modo muestra una lista de elementos de datos por campos de datos de enlace a las columnas y mostrar un encabezado de columna para identificar el campo de vista.The GridView view mode displays a list of data items by binding data fields to columns and by displaying a column header to identify the field. El valor predeterminado GridView estilo implementa botones como encabezados de columna.The default GridView style implements buttons as column headers. Mediante los botones para los encabezados de columna, puede implementar capacidades de interacción de usuario importantes; Por ejemplo, los usuarios hacer clic en el encabezado de columna para ordenar GridView datos según el contenido de una columna específica.By using buttons for column headers, you can implement important user interaction capabilities; for example, users can click the column header to sort GridView data according to the contents of a specific column.

Nota

Controla el botón que GridView se derivan de los usos de los encabezados de columna ButtonBase.The button controls that GridView uses for column headers are derived from ButtonBase.

La siguiente ilustración muestra un GridView ver de ListView contenido.The following illustration shows a GridView view of ListView content.

Captura de pantalla que muestra la vista GridView de contenido de ListView.

GridView las columnas se representan mediante GridViewColumn objetos, que pueden ajustarse automáticamente a su contenido.GridView columns are represented by GridViewColumn objects, which can automatically size to their content. Si lo desea, puede establecer explícitamente un GridViewColumn a un ancho específico.Optionally, you can explicitly set a GridViewColumn to a specific width. Puede cambiar el tamaño de las columnas si arrastra la barra de redimensionamiento que se encuentra entre los encabezados de columna.You can resize columns by dragging the gripper between column headers. Dinámicamente también puede agregar, quitar, reemplazar y reordenar columnas porque esta funcionalidad está integrada en GridView.You can also dynamically add, remove, replace, and reorder columns because this functionality is built into GridView. Sin embargo, GridView no se puede actualizar directamente los datos que muestra.However, GridView cannot directly update the data that it displays.

El ejemplo siguiente muestra cómo definir un GridView que muestra los datos de empleados.The following example shows how to define a GridView that displays employee data. En este ejemplo, ListView define la EmployeeInfoDataSource como el ItemsSource.In this example, ListView defines the EmployeeInfoDataSource as the ItemsSource. Las definiciones de propiedad de DisplayMemberBinding enlazar GridViewColumn contenido a EmployeeInfoDataSource categorías de datos.The property definitions of DisplayMemberBinding bind GridViewColumn content to EmployeeInfoDataSource data categories.


<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 siguiente ilustración se muestra la tabla creada en el ejemplo anterior.The following illustration shows the table that the previous example creates. El control GridView muestra los datos de un objeto ItemsSource:The GridView control displays data from an ItemsSource object:

Captura de pantalla que muestra un ListView con resultado GridView.

Estilo y diseño de GridViewGridView Layout and Style

Las celdas de columna y el encabezado de columna de un GridViewColumn tienen la misma anchura.The column cells and the column header of a GridViewColumn have the same width. De forma predeterminada, cada columna ajusta su anchura para ajustarse al contenido.By default, each column sizes its width to fit its content. Opcionalmente, puede establecer un ancho de columna fijo.Optionally, you can set a column to a fixed width.

El contenido de datos relacionado se muestra en filas horizontales.Related data content displays in horizontal rows. Por ejemplo, en la ilustración anterior, el apellido, el nombre y el número de identificador de cada empleado se muestran como un conjunto porque aparecen en una fila horizontal.For example, in the previous illustration, each employee's last name, first name, and ID number are displayed as a set because they appear in a horizontal row.

Definición y aplicación de estilos de columna en GridViewDefining and Styling Columns in a GridView

Al definir el campo de datos para mostrar en un GridViewColumn, utilice el DisplayMemberBinding, CellTemplate, o CellTemplateSelector propiedades.When defining the data field to display in a GridViewColumn, use the DisplayMemberBinding, CellTemplate, or CellTemplateSelector properties. El DisplayMemberBinding propiedad tiene precedencia sobre cualquiera de las propiedades de plantilla.The DisplayMemberBinding property takes precedence over either of the template properties.

Para especificar la alineación del contenido de una columna de un GridView, defina un CellTemplate.To specify the alignment of content in a column of a GridView, define a CellTemplate. No utilice el HorizontalContentAlignment y VerticalContentAlignment las propiedades de ListView contenido que se muestra mediante el uso de un GridView.Do not use the HorizontalContentAlignment and VerticalContentAlignment properties for ListView content that is displayed by using a GridView.

Para especificar las propiedades de plantilla y estilo de los encabezados de columna, utilice el GridView, GridViewColumn, y GridViewColumnHeader clases.To specify template and style properties for column headers, use the GridView, GridViewColumn, and GridViewColumnHeader classes. Para más información, consulte Información general sobre plantillas y estilos de encabezado de columna en modo GridView.For more information, see GridView Column Header Styles and Templates Overview.

Incorporación de elementos visuales a un control GridViewAdding Visual Elements to a GridView

Para agregar elementos visuales, tales como CheckBox y Button controles, un GridView modo de vista, use plantillas o estilos.To add visual elements, such as CheckBox and Button controls, to a GridView view mode, use templates or styles.

Si se define explícitamente un elemento visual como un elemento de datos, puede aparecer solo una vez en un GridView.If you explicitly define a visual element as a data item, it can appear only one time in a GridView. Esta limitación existe porque un elemento puede tener un único elemento primario y, por tanto, puede aparecer solo una vez en el árbol visual.This limitation exists because an element can have only one parent and therefore, can appear only one time in the visual tree.

Aplicación de estilos a filas en GridViewStyling Rows in a GridView

Use la GridViewRowPresenter y GridViewHeaderRowPresenter clases para dar formato y mostrar las filas de una GridView.Use the GridViewRowPresenter and GridViewHeaderRowPresenter classes to format and display the rows of a GridView. Para obtener un ejemplo de cómo aplicar estilos a filas en un GridView el modo de vista, vea aplicar estilo a una fila de un ListView que implementa un control GridView.For an example of how to style rows in a GridView view mode, see Style a Row in a ListView That Implements a GridView.

Problemas de alineación al usar ItemContainerStyleAlignment Issues When You Use ItemContainerStyle

Para evitar problemas de alineación entre los encabezados de columna y las celdas, no establezca una propiedad o especificar una plantilla que afecta al ancho de un elemento en un ItemContainerStyle.To prevent alignment issues between column headers and cells, do not set a property or specify a template that affects the width of an item in an ItemContainerStyle. Por ejemplo, no establezca la Margin propiedad o especificar un ControlTemplate que agrega un CheckBox a un ItemContainerStyle que se define en un ListView control.For example, do not set the Margin property or specify a ControlTemplate that adds a CheckBox to an ItemContainerStyle that is defined on a ListView control. En su lugar, especifique las propiedades y plantillas que afectan al ancho de columna directamente en las clases que definen un GridView modo de vista.Instead, specify the properties and templates that affect column width directly on classes that define a GridView view mode.

Por ejemplo, para agregar un CheckBox a las filas de GridView modo de vista, agregue el CheckBox a un DataTemplatey, a continuación, establezca el CellTemplate propiedad a la que DataTemplate.For example, to add a CheckBox to the rows in GridView view mode, add the CheckBox to a DataTemplate, and then set the CellTemplate property to that DataTemplate.

Interacciones del usuario con GridViewUser Interactions with a GridView

Cuando se usa un GridView en la aplicación, los usuarios pueden interactuar con y modificar el formato de la GridView.When you use a GridView in your application, users can interact with and modify the formatting of the GridView. Por ejemplo, los usuarios pueden reordenar las columnas, cambiar el tamaño de una columna, seleccionar elementos en una tabla y desplazarse por el contenido.For example, users can reorder columns, resize a column, select items in a table, and scroll through content. También puede definir un controlador de eventos para que responda cuando un usuario hace clic en el botón de encabezado de columna.You can also define an event handler that responds when a user clicks the column header button. El controlador de eventos puede realizar operaciones tales como ordenar los datos que se muestran en el GridView según el contenido de una columna.The event handler can perform operations like sorting the data that is displayed in the GridView according to the contents of a column.

En la lista siguiente describe con más detalle las capacidades de GridView para la interacción del usuario:The following list discusses in more detail the capabilities of using GridView for user interaction:

  • Reordenar columnas con el método de arrastrar y colocar.Reorder columns by using the drag-and-drop method.

    Los usuarios pueden reordenar las columnas de una GridView al presionar el botón primario del mouse mientras se encuentra sobre un encabezado de columna y, a continuación, arrastrar la columna a una nueva posición.Users can reorder columns in a GridView by pressing the left mouse button while it is over a column header and then dragging that column to a new position. Mientras el usuario arrastra el encabezado de columna, se muestra una versión flotante del encabezado, así como una línea negra sólida que muestra dónde insertar la columna.While the user drags the column header, a floating version of the header is displayed as well as a solid black line that shows where to insert the column.

    Especifique si desea modificar el estilo predeterminado para la versión flotante de un encabezado, un ControlTemplate para un GridViewColumnHeader tipo que se desencadena cuando el Role propiedad está establecida en Floating.If you want to modify the default style for the floating version of a header, specify a ControlTemplate for a GridViewColumnHeader type that is triggered when the Role property is set to Floating. Para más información, consulte Crear un estilo para un encabezado de columna de GridView arrastrado.For more information, see Create a Style for a Dragged GridView Column Header.

  • Cambiar el tamaño de una columna para ajustarla a su contenido.Resize a column to its content.

    Los usuarios pueden hacer doble clic en la barra de redimensionamiento a la derecha de un encabezado de columna para cambiar el tamaño de una columna con el fin de ajustarla a su contenido.Users can double-click the gripper to the right of a column header in order to resize a column to fit its content.

    Nota

    Puede establecer el Width propiedad Double.NaN para producir el mismo efecto.You can set the Width property to Double.NaN to produce the same effect.

  • Seleccionar elementos de fila.Select row items.

    Los usuarios pueden seleccionar uno o varios elementos en un GridView.Users can select one or more items in a GridView.

    Si desea cambiar la Style de un elemento seleccionado, vea utilizar desencadenadores para el estilo de los elementos seleccionados en un ListView.If you want to change the Style of a selected item, see Use Triggers to Style Selected Items in a ListView.

  • Desplazarse para ver el contenido que inicialmente no aparece en la pantalla.Scroll to view content that is not initially visible on the screen.

    Si el tamaño de la GridView es no suficientemente grande como para mostrar todos los elementos, los usuarios pueden desplazarse horizontalmente o verticalmente mediante el uso de las barras de desplazamiento, que se proporciona un ScrollViewer control.If the size of the GridView is not large enough to display all the items, users can scroll horizontally or vertically by using scrollbars, which are provided by a ScrollViewer control. Un ScrollBar se oculta si todo el contenido está visible en una dirección específica.A ScrollBar is hidden if all the content is visible in a specific direction. Los encabezados de columna no se desplazan con una barra de desplazamiento vertical, sino que se desplazan en horizontal.Column headers do not scroll with a vertical scroll bar, but do scroll horizontally.

  • Interactuar con las columnas haciendo clic en los botones de encabezado de columna.Interact with columns by clicking the column header buttons.

    Cuando los usuarios hacen clic en un botón de encabezado de columna, pueden ordenar los datos que se muestran en la columna si disponen de un algoritmo de ordenación.When users click a column header button, they can sort the data that is displayed in the column if you have provided a sorting algorithm.

    Puede controlar la Click eventos para los botones de encabezado de columna con el fin de ofrecer funcionalidades como un algoritmo de ordenación.You can handle the Click event for column header buttons in order to provide functionality like a sorting algorithm. Para controlar la Click eventos para un solo encabezado de columna, establezca un controlador de eventos en el GridViewColumnHeader.To handle the Click event for a single column header, set an event handler on the GridViewColumnHeader. Para establecer un controlador de eventos que controla la Click eventos para todos los encabezados de columna, establezca el controlador en el ListView control.To set an event handler that handles the Click event for all column headers, set the handler on the ListView control.

Obtención de otras vistas personalizadasObtaining Other Custom Views

El GridView (clase), que se deriva el ViewBase clase abstracta, es solo uno de los posibles modos de visualización para el ListView clase.The GridView class, which is derived from the ViewBase abstract class, is just one of the possible view modes for the ListView class. Puede crear otras vistas personalizadas para ListView derivando de la ViewBase clase.You can create other custom views for ListView by deriving from the ViewBase class. Para obtener un ejemplo de un modo de visualización personalizado, vea Crear un modo de vista personalizado para un control ListView.For an example of a custom view mode, see Create a Custom View Mode for a ListView.

Clases que admiten GridViewGridView Supporting Classes

La siguiente las clases que admiten el GridView modo de vista.The following classes support the GridView view mode.

Vea tambiénSee also