Entrada de Avalonia del marco de interfaz de usuario multiplataforma de Net: el uso de DataGrid

Uso de DataGrid en Avalonia

DataGrid La tabla de datos es un control muy importante en la interfaz de usuario del cliente. DataGrid en Avalonia es un paquete separado Avalonia.Controls.DataGrid. Para usar DataGrid, debe presionar este paquete en Nuget. A continuación, se presenta la instalación y el uso de DataGrid.

Instalación del paquete DataGrid

Necesita ser instalado en Nuget

Selección de versión, consistente con la versión del marco Avalonia

Al instalar, debe prestar atención a que Avalonia.Controls.DataGridla versión del paquete debe ser consistente con la versión del marco Avalonia, de lo contrario, es posible que la instalación no se realice correctamente.

La versión del marco Avalonia es la "Versión Avalonia" seleccionada para crear el proyecto, generalmente o 0.10.18( 11.0.0-preview422 de mayo de 2023 22:31:23)

La versión del marco Avalonia también se puede ver en "Dependencias → Paquetes"

Si está utilizando la versión de vista previa, en el administrador de paquetes nuget, debe marcar "Incluir versión preliminar" en el lado derecho del cuadro de búsqueda para ver la versión de vista previa.

Uso de DataGrid

referencia de estilo

Haga referencia al archivo de estilo DataGrid en App.axaml (o haga referencia a él en otras interfaces utilizadas)

Se debe hacer referencia al archivo de estilo; de lo contrario, no se mostrará DataGrid

<!--下面样式文件二选一-->
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/>
<StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Simple.xaml"/>

El efecto de Fluent.xaml:

El efecto de estilo es relativamente completo.

El efecto de Simple.xaml:

más fácil

Usar cuadrícula de datos

El uso de DataGrid es el mismo que WPF escribiendo DataGrid.Columnscolumnas

Diferencias con WPF:

1. La propiedad de unión esItems
2. Y muchos atributos deben inicializarse asignando sus propios valores
   1. Por ejemplo, si necesita arrastrar el encabezado de la columna para ajustar el ancho, debe agregarCanUserResizeColumns="True"
   2. Debe arrastrar y soltar el encabezado de la columna para ajustar el orden de las columnas, y debe agregarlo usted mismoCanUserReorderColumns="True"
   3. …

 <DataGrid Name="MyDG" >
            <DataGrid.Columns>
                <DataGridTextColumn
                    Width="1*"
                    Binding="{Binding Id}"
                    Header="序号" />
                <DataGridTextColumn
                    Width="1*"
                    Binding="{Binding Name}"
                    Header="姓名" />
                <DataGridTextColumn
                    Width="1*"
                    Binding="{Binding Description}"
                    Header="姓名" />
            </DataGrid.Columns>
        </DataGrid>

C#

  //后台绑定
  List<User> users = new List<User>();
  users.Add(new User() {
    
     Id=1,Name="张一",Description="1111111"});
  users.Add(new User() {
    
     Id=2,Name="张二",Description="2222222"});
  MyDG.Items = users;

efecto de visualización: