Información general de GridView

2025-05-07

GridView el modo de vista es uno de los modos de vista de un ListView control. La GridView clase y sus clases auxiliares permiten a usted y a los usuarios ver colecciones de elementos en una tabla que normalmente usa botones como encabezados de columna interactivos. En este tema se presenta la GridView clase y se describe su uso.

¿Qué es una vista GridView?

El GridView modo de vista muestra una lista de elementos de datos enlazando campos de datos a columnas y mostrando un encabezado de columna para identificar el campo. El estilo predeterminado GridView implementa botones como encabezados de columna. Mediante el uso de botones para encabezados de columna, puede implementar funcionalidades importantes de interacción del usuario; Por ejemplo, los usuarios pueden hacer clic en el encabezado de columna para ordenar GridView los datos según el contenido de una columna específica.

Nota:

GridView usa los controles de botón para los encabezados de columna que se derivan de ButtonBase.

La ilustración siguiente muestra una GridView vista de ListView contenido.

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

GridView Las columnas se representan mediante GridViewColumn objetos, que pueden ajustar automáticamente el tamaño a su contenido. Si lo desea, puede establecer explícitamente un GridViewColumn con un ancho específico. Puede cambiar el tamaño de las columnas arrastrando la barra de control entre los encabezados de columna. También puede agregar, quitar, reemplazar y reordenar columnas dinámicamente porque esta funcionalidad está integrada en GridView. Sin embargo, GridView no puede actualizar directamente los datos que muestra.

En el ejemplo siguiente se muestra cómo definir un GridView objeto que muestra los datos de los empleados. En este ejemplo, ListView define EmployeeInfoDataSource como ItemsSource. Las definiciones de propiedades de DisplayMemberBinding vinculan el contenido de GridViewColumn a las categorías de datos de EmployeeInfoDataSource.


<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 tabla que crea el ejemplo anterior. El control GridView muestra datos de un objeto ItemsSource:

Captura de pantalla que muestra un ListView con salida de GridView.

Diseño y estilo de GridView

Las celdas de la columna y el encabezado de la columna de un GridViewColumn tienen el mismo ancho. De forma predeterminada, cada columna ajusta su ancho para ajustarse a su contenido. Opcionalmente, puede establecer una columna en un ancho fijo.

El contenido de datos relacionado se muestra en filas horizontales. 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.

Definir y aplicar estilos a las columnas en GridView.

Al definir el campo de datos que se va a mostrar en GridViewColumn, use las propiedades DisplayMemberBinding, CellTemplate o CellTemplateSelector. La DisplayMemberBinding propiedad tiene prioridad sobre cualquiera de las propiedades de plantilla.

Para especificar la alineación del contenido en una columna de GridView, defina un CellTemplate. No utilice las propiedades HorizontalContentAlignment y VerticalContentAlignment para contenido que se muestra utilizando un ListView.

Para especificar las propiedades de plantilla y estilo para los encabezados de columna, use las GridViewclases , GridViewColumny GridViewColumnHeader . Para obtener más información, vea GridView Column Header Styles and Templates Overview.

Agregar elementos visuales a gridView

Para agregar elementos visuales, como CheckBox y Button controles, a un GridView modo de vista, use plantillas o estilos.

Si define explícitamente un elemento visual como un elemento de datos, solo puede aparecer una vez en .GridView Esta limitación existe porque un elemento solo puede tener un elemento primario y, por tanto, solo puede aparecer una vez en el árbol visual.

Estilo de filas en un GridView

Usa las clases GridViewRowPresenter y GridViewHeaderRowPresenter para dar formato y mostrar las filas de un GridView. Para un ejemplo de cómo dar estilo a las filas en un GridView modo de visualización, vea Dar estilo a una fila en un control ListView que implementa un control GridView.

Problemas de alineación al usar ItemContainerStyle

Para evitar problemas de alineación entre encabezados de columna y celdas, no establezca una propiedad ni especifique una plantilla que afecte el ancho de un elemento en un ItemContainerStyle. Por ejemplo, no establezca la Margin propiedad ni especifique un ControlTemplate que agregue un CheckBox a un ItemContainerStyle que se define en un 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.

Por ejemplo, para agregar un CheckBox a las filas en modo de vista GridView, agregue el CheckBox a un DataTemplate y, a continuación, establezca la propiedad CellTemplate en ese DataTemplate.

Interacciones de usuario con gridView

Cuando usas un GridView en tu aplicación, los usuarios pueden interactuar con y modificar el formato del GridView. Por ejemplo, los usuarios pueden reordenar columnas, cambiar el tamaño de una columna, seleccionar elementos de una tabla y desplazarse por el contenido. También puede definir un controlador de eventos que responda cuando un usuario hace clic en el botón de encabezado de columna. El controlador de eventos puede realizar operaciones como ordenar los datos que se muestran en GridView según el contenido de una columna.

En la lista siguiente se describen con más detalle las funcionalidades de uso GridView para la interacción del usuario:

Reordene las columnas mediante el método de arrastrar y colocar.

Los usuarios pueden reordenar las columnas de un GridView elemento presionando el botón izquierdo del mouse mientras está sobre un encabezado de columna y arrastrando esa columna a una nueva posición. 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.

Si desea modificar el estilo predeterminado para la versión flotante de un encabezado, especifique un ControlTemplate para un tipo de GridViewColumnHeader que se desencadene cuando la propiedad Role esté establecida en Floating. Para obtener más información, vea Crear un estilo para un encabezado de columna GridView arrastrado.
Cambie el tamaño de una columna a su contenido.

Los usuarios pueden hacer doble clic en la barra de control a la derecha de un encabezado de columna para cambiar el tamaño de una columna para ajustarse a su contenido.

Nota:

Puede establecer la Width propiedad en Double.NaN para producir el mismo efecto.
Seleccione elementos de fila.

Los usuarios pueden seleccionar uno o varios elementos en un GridView.

Si desea cambiar el Style de un elemento seleccionado, vea Usar desencadenadores para aplicar estilo a los elementos seleccionados en un control ListView.
Desplácese para ver el contenido que no está visible inicialmente en la pantalla.

Si el tamaño de GridView no es lo suficientemente grande para mostrar todos los elementos, los usuarios pueden desplazarse horizontal o verticalmente utilizando barras de desplazamiento, que son proporcionadas por un controlador ScrollViewer. Un ScrollBar está oculto si todo el contenido es visible en una dirección específica. Los encabezados de columna no se desplazan con una barra de desplazamiento vertical, pero se desplazan horizontalmente.
Interactúe con columnas haciendo clic en los botones de encabezado de columna.

Cuando los usuarios hacen clic en un botón de encabezado de columna, pueden ordenar los datos que se muestran en la columna si ha proporcionado un algoritmo de ordenación.

Puede gestionar el evento de Click para los botones de encabezado de columna con el fin de ofrecer funcionalidades como un algoritmo de ordenamiento. Para manejar el evento Click de un único encabezado de columna, establezca un controlador de eventos en el GridViewColumnHeader. Para establecer un controlador de eventos que maneja el evento Click para todos los encabezados de columna, configure el controlador en el control ListView.

Obtener otras vistas personalizadas

La GridView clase, que se deriva de la ViewBase clase abstracta, es solo uno de los modos de vista posibles para la ListView clase . Puede crear otras vistas personalizadas para ListView derivando de la ViewBase clase . Para obtener un ejemplo de un modo de vista personalizado, vea Crear un modo de vista personalizada para un control ListView.

Clases auxiliares de GridView

Las siguientes clases admiten el GridView modo de vista.