Información general sobre GridView
El modo de vista GridView es uno de los modos de vista de los controles ListView. La clase GridView y sus clases de respaldo permiten que programadores y usuarios vean las colecciones de elementos en una tabla que normalmente utiliza botones como encabezados de columna interactivos. En este tema se presenta la clase GridView y se describe su uso.
Este tema contiene las secciones siguientes.
- ¿Qué es una vista GridView?
- Diseño y estilo de GridView
- Interacciones del usuario con un control GridView
- Obtener otras vistas personalizadas
- Clases que admiten GridView
- Temas relacionados
¿Qué es una vista GridView?
El modo de vista GridView 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 de GridView predeterminado implementa botones como encabezados de columna. Utilizando botones para los encabezados de columna, puede implementar importantes funciones de interacción con el usuario; por ejemplo, el usuario puede hacer clic en el encabezado de columna para ordenar los datos de GridView según el contenido de una columna concreta.
.gif "Nota") Nota |
|---|
Los controles de botón que GridView utiliza para los encabezados de columna se derivan de ButtonBase. |
En la ilustración siguiente se muestra una vista de GridView de contenido de ListView.
Vista de GridView de contenido de ListView
.png "ListView con estilo")
Las columnas de GridView se representan mediante objetos GridViewColumn, que pueden ajustar su tamaño automáticamente al contenido. Si lo prefiere, puede establecer explícitamente un objeto GridViewColumn en un ancho específico. Puede cambiar el tamaño de las columnas arrastrando el agarrador que aparece entre los encabezados de columna. También puede agregar, quitar, reemplazar y reordenar dinámicamente las columnas, 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 objeto GridView que muestra datos de empleados. En este ejemplo, ListView define EmployeeInfoDataSource como ItemsSource. Las definiciones de propiedad de DisplayMemberBinding enlazan 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 creada por el ejemplo anterior.
GridView que muestra los datos de ItemsSource
.jpg "ListView con resultado GridView")
Diseño y estilo de GridView
Las celdas y el encabezado de las columnas de un control GridViewColumn tienen el mismo ancho. De manera predeterminada, el ancho de cada columna se ajusta a su contenido. Opcionalmente, puede establecer una columna en un ancho fijo.
El contenido de datos relacionados se muestra en filas horizontales. Por ejemplo, en la ilustración anterior, el apellido, nombre y número del Id. de cada empleado se muestran como un conjunto porque aparecen en una fila horizontal.
Definir columnas y aplicarles un estilo en un control GridView
Al definir el campo de datos que se mostrará en un control GridViewColumn, se utilizan las propiedades DisplayMemberBinding, CellTemplate o CellTemplateSelector. La propiedad DisplayMemberBinding tiene precedencia sobre cualquiera de las propiedades de plantilla.
Para especificar la alineación del contenido de una columna de GridView, defina CellTemplate. No use las propiedades HorizontalContentAlignment y VerticalContentAlignment para contenido de ListView que se muestre mediante GridView.
Para especificar las propiedades de plantilla y de estilo de los encabezados de columna, se utilizan las clases GridView, GridViewColumn y GridViewColumnHeader. Para obtener más información, vea Información general sobre plantillas y estilos de encabezado de columna en modo GridView.
Agregar elementos visuales a un control GridView
Para agregar elementos visuales, como controles CheckBox y Button, a un modo de vista GridView, se utilizan plantillas o estilos.
Si define explícitamente un elemento visual como un elemento de datos, puede aparecer una sola vez en un GridView. La razón de ser de esta es que un elemento puede tener un único elemento primario y, por consiguiente, puede aparecer una sola vez en el árbol visual.
Aplicar estilo a las filas de un control GridView
Las clases GridViewRowPresenter y GridViewHeaderRowPresenter se utilizan para dar formato y mostrar las filas de GridView. Para obtener un ejemplo de cómo aplicar un estilo a las filas de un modo de vista GridView, vea Cómo: Aplicar un estilo a una fila en un control ListView que implementa una clase GridView.
Problemas de alineación al utilizar ItemContainerStyle
Para evitar los problemas de alineación entre los encabezados y las celdas de las columnas, no establezca ninguna propiedad ni especifique ninguna plantilla que afecte al ancho de un elemento en una propiedad ItemContainerStyle. Por ejemplo, no establezca la propiedad Margin ni especifique un objeto ControlTemplate que agregue un control CheckBox a una propiedad ItemContainerStyle definida en un control ListView. En su lugar, especifique las propiedades y plantillas que afectan directamente al ancho de columna en las clases que definen un modo de vista GridView.
Por ejemplo, para agregar un control CheckBox a las filas de un modo de vista GridView, agregue el control CheckBox a un objeto DataTemplate y, a continuación, establezca la propiedad CellTemplate en ese objeto DataTemplate.
Interacciones del usuario con un control GridView
Cuando se utiliza un control GridView en la aplicación, el usuario puede interactuar con él y modificar el formato del GridView. Por ejemplo, los usuarios pueden reordenar las columnas, cambiar el tamaño una columna, seleccionar elementos en una tabla y desplazarse por el contenido. También se puede definir un controlador de eventos que responda cuando un usuario haga clic en el botón de encabezado de columna. El controlador de eventos puede realizar operaciones tales 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 funciones de interacción con el usuario de un control GridView:
Reordenar columnas mediante el método de arrastrar y colocar.
Para reordenar las columnas de un control GridView, el usuario presiona el botón primario con el cursor situado encima de un encabezado de columna y la arrastra hasta su 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ólido que muestra dónde insertar la columna.
Si desea modificar el estilo predeterminado de la versión flotante de un encabezado, especifique un objeto ControlTemplate para un tipo GridViewColumnHeader que se active cuando la propiedad Role se establezca en Floating. Para obtener más información, vea Cómo: Crear un estilo para un encabezado de columna de GridView arrastrado.
Ajustar el tamaño de una columna a su contenido
El usuario puede hacer doble clic en el agarrador situado a la derecha de un encabezado de columna para ajustar el tamaño de ésta a su contenido.
NotaPuede establecer la propiedad Width en Double.NaN para crear el mismo efecto.
Seleccionar elementos de fila.
El usuario puede seleccionar uno o más elementos de un control GridView.
Si desea cambiar el objeto Style de un elemento seleccionado, vea Cómo: Utilizar desencadenadores para aplicar un estilo a los elementos seleccionados en un control ListView.
Desplazarse para ver contenido que no se muestra inicialmente en la pantalla.
Si el tamaño de GridView no es suficiente para mostrar todos los elementos, el usuario puede desplazarse en sentido horizontal o vertical mediante las barras de desplazamiento proporcionadas por un control ScrollViewer. Un control ScrollBar está oculto si está visible todo el contenido en una dirección concreta. Los encabezados de columna no se desplazan con una barra de desplazamiento vertical, pero sí horizontalmente.
Interactuar con columnas haciendo clic en los botones de encabezado de columna.
Cuando el usuario hace clic en un botón de encabezado de columna, puede ordenar los datos que se muestran en ella siempre que el programador haya proporcionado un algoritmo de ordenación.
Para proporcionar funcionalidad del tipo de un algoritmo de ordenación, controle el evento Click para los botones de encabezado de columna. Para controlar el evento Click para un solo encabezado de columna, establezca un controlador de eventos para GridViewColumnHeader. Para establecer un controlador de eventos que controle el evento Click para todos los encabezados de columna, establezca el controlador para el control ListView.
Obtener otras vistas personalizadas
La clase GridView, que se deriva de la clase abstracta ViewBase, tan sólo es uno de los modos de vista posibles de la clase ListView. Puede crear otras vistas personalizadas para ListView derivando de la clase ViewBase. Para obtener un ejemplo de un modo de vista personalizado, vea Cómo: Crear un modo de vista personalizado para un control ListView.
Clases que admiten GridView
Las clases siguientes admiten el modo de vista GridView.
Vea también
Tareas
Cómo: Ordenar una columna de GridView cuando se hace clic en un encabezado
Referencia
Conceptos
Información general sobre ListView