DEV Community

José De Freitas
José De Freitas

Posted on

Cómo usar DataGrid en Avalonia

Es probable que hayas intentado usar el control DataGrid de Avalonia sin éxito alguno. En este corto tutorial te enseñaré a usarlo. Además, te mostraré cómo puedes personalizar su aspecto predeterminado y su funcionamiento.

Antes de comenzar, debes saber que, para la fecha en la que escribo este artículo, el método que verás a continuación es el que debe seguirse para usar el control DataGrid. Puede que en el futuro Avalonia incluya directamente este control.

Añadir un DataGrid

Si intentas añadir el control DataGrid verás que no aparecerá nada; esto se debe a que Avalonia no incluye por defecto los estilos para este control. Por suerte, solo tienes que cambiar una línea de código para poder ver la representación del DataGrid.

En el archivo App.axaml añade la siguiente línea dentro de la etiqueta Application.Styles:

<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Default.xaml"/>
Enter fullscreen mode Exit fullscreen mode

¡Eso es todo! En las últimas versiones de Avalonia no es necesario que incluyas el paquete de este control en el archivo de proyecto. Si no te funciona solo con este paso, puede que no estés usando la última versión de Avalonia. En NuGet puedes encontrar el paquete del control DataGrid.

Probablemente te diste cuenta de que de esta manera estás incluyendo el estilo Default. Por supuesto, puedes incluir el estilo Fluent si es que estás usando ese estilo en el resto de tu aplicación. Como todos los controles de Avalonia, puedes editarlos a tu gusto.

Modificar otros aspectos

Aquí no termina la cosa: puedes modificar otros aspectos sobre este control. Un aspecto muy llamativo a cambiar son los encabezados de la tabla:

<DataGrid Items="{Binding Items}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Item name" Binding="{Binding Name}"/>
        <DataGridTextColumn Header="Short description" Binding="{Binding Description}"/>
    </DataGrid.Columns>
</DataGrid>
Enter fullscreen mode Exit fullscreen mode

De esta manera, los nombres de los encabezados serán los que tú quieras que sean, sin importar el nombre de las propiedades.

Hay otras propiedades del control DataGrid que puedes cambiar, a saber: AutoGenerateColumns, CanUserReorderColumns, CanUserResizeColumns y CanUserSortColumns. Los nombres de estas son lo suficientemente descriptivos, así que me abstengo a describirlas. Puedes encontrar una tabla con las descripciones en la documentación oficial de Avalonia. También, la etiqueta DataGridTextColumn incluye la propiedad Width, la cual te permite determinar la anchura de las columnas (recuerda que, por defecto, la anchura de una columna es determinada por el elemento con el nombre más largo que hay bajo esa columna).

Esto es todo. Un artículo corto sobre una cuestión sencilla, pero que al principio te rompe la cabeza, pues esperas poder usar el control DataGrid directamente.

Discussion (0)