Este video le muestra cómo comenzar a usar el control DevExpress .NET MAUI Data Grid para mostrar datos dentro de una tabla. Antes de comenzar, le recomendamos que revise nuestro video sobre cómo usar nuestra Galería NuGet para incorporar nuestros controles en su nueva aplicación .NET MAUI o que revise la sección de inicio en la documentación. Para este video, también vamos a suponer que tiene la última versión de Visual Studio con todas las cargas de trabajo necesarias instaladas.
Si no está familiarizado con el marco .NET MAUI, consulte la documentación de Microsoft sobre cómo comenzar a usar esta plataforma. Está bien. Empecemos. Vamos a utilizar nuestra aplicación de muestra disponible en GitHub. En la pantalla de inicio de Visual Studio, haga clic en Clonar un repositorio. Especifique la ubicación del repositorio: puede encontrar un enlace a este repositorio en la descripción a continuación. Y haga clic en clonar. Cuando se descargue la solución, ejecútela en su dispositivo o emulador favorito. Nuestros controles .NET MAUI son compatibles con ambas plataformas móviles: Android e iOS. Ejecutaremos este ejemplo en un emulador de Android. Esta aplicación consta de una sola pantalla que muestra una lista de empleados. Las columnas de la cuadrícula contienen una imagen, el nombre del contacto, el cargo, el número de teléfono y otra información de la fuente de datos enlazada. Ahora echemos un vistazo a cómo se implementa esta aplicación y luego haremos algunas personalizaciones adicionales.
Eche un vistazo al archivo ViewModel. Contiene un objeto de datos representado por la clase Empleado. Esta clase expone el nombre, la foto, la fecha de nacimiento y otras propiedades de datos. Las fotos se almacenan en los recursos de la aplicación. La clase EmployeeData en el archivo Model almacena objetos de datos de muestra. La clase EmployeeDataViewModel representa un modelo de vista para nuestra vista principal. Vincularemos nuestra cuadrícula a la colección Empleados en el modelo de vista. Ahora abramos el archivo de marcado de MainPage. En la parte superior del archivo de marcado, puede ver el espacio de nombres DXG XAML que contiene nuestro control Data Grid. Luego puede ver que la propiedad BindingContext está establecida en una instancia de ViewModel. La página en sí contiene una instancia de DataGridView. Está vinculado a la propiedad Employees de ViewModel. Luego usamos la colección Columns para especificar las columnas de la cuadrícula.
Si no especificamos esta colección, el control crea una columna para cada campo de datos en la fuente de datos enlazada y usa una plantilla de datos predeterminada para representar los datos. En este ejemplo, especificamos columnas y plantillas de datos explícitamente. Como puede ver, la primera columna está vinculada al campo de datos de la foto y utiliza un objeto de imagen para representar los datos. La segunda columna muestra datos de múltiples campos de datos en una sola columna. Utiliza múltiples objetos Label para mostrar datos de texto.
A continuación, puede ver las declaraciones de otras columnas: teléfono, fecha de nacimiento, etc. Estas columnas no declaran una plantilla de datos personalizada. Ahora vamos a crear otra columna más que muestre la edad de un empleado. La fuente de datos enlazada no contiene esta información, lo que significa que debemos calcular estos datos en función de los datos de otras columnas. Para hacer esto, primero debemos declarar la columna. Y luego, usamos el evento CustomUnboundColumnData para proporcionar valores para esta columna. En un controlador de eventos, usamos el campo de datos BirthDate para calcular la edad del empleado.
Ejecutemos la aplicación. Ahora la cuadrícula muestra una nueva columna con valores calculados. Puede ajustar el ancho de la columna sobre la marcha. Nuestro Grid Control es compatible con la función Hot Reload. La siguiente función que usaremos en este tutorial es la agrupación. Vamos a mostrar usuarios y administradores en diferentes grupos. Todo lo que tenemos que hacer es habilitar la opción IsGrouped del campo de datos de acceso. El control le permite agrupar elementos por valor de datos o valor mostrado por fecha (la fecha exacta, mes, trimestre o año), o agrupar valores alfabéticamente. En este ejemplo, agrupamos filas por valor exacto en el campo Datos de acceso. Ejecutemos la aplicación de nuevo. Como puede ver ahora, todos los empleados se dividen en dos grupos: administradores y usuarios. Agreguemos un resumen de grupo para saber cuántos empleados tenemos en cada grupo. Usamos la propiedad GroupSummaries para este propósito y agregamos una instancia de GridColumnSummary a esta colección. Luego especificamos el nombre de la columna y el tipo de resumen.
Listo, la cuadrícula muestra resúmenes en las filas del grupo. También puede explorar Data Grid en nuestra aplicación de demostración. Esta aplicación está disponible en App Store, Google Play y GitHub. Un enlace al repositorio está disponible en la descripción a continuación. Clonemos este repositorio y ejecutemos la aplicación. La demostración de First Look muestra casi la misma lista de empleados, pero la columna Foto está arreglada. La demostración de desplazamiento virtual muestra qué tan rápido es nuestra cuadrícula de datos para representar una gran cantidad de datos.
Si esta característica está habilitada, la cuadrícula procesa solo aquellas filas y columnas que se muestran actualmente en la ventana gráfica. La demostración de edición muestra varios editores de datos utilizados para actualizar valores en las celdas. Puede editar valores directamente en las celdas o habilitar un formulario de datos separado. Y eso es todo por este video. Puede descargar la aplicación y explorar otras demostraciones para ver cómo se implementan. Si te gustó este video, danos un pulgar hacia arriba, si tienes preguntas, por favor comenta a continuación. Y no olvides suscribirte y tocar la campanita para que te avisemos cada vez que publiquemos nuevo contenido. Gracias por mirar y gracias por elegir DevExpress..