Net跨平台UI框架Avalonia入门-DataGrid的使用

Avalonia中的DataGrid的使用

DataGrid 数据表格是客户端UI中很重要的一个控件，Avalonia中的DataGrid是单独一个包Avalonia.Controls.DataGrid，要使用DataGrid，需要另外在Nuget中按这个包，下面介绍一下DataGrid的安装和使用

DataGrid包安装

需要在Nuget中安装

版本选择，与Avalonia框架版本一致

安装的时候需要注意Avalonia.Controls.DataGrid包的版本要跟Avalonia框架版本一致，否则可能无法安装成功。

Avalonia框架版本就是创建项目选择的“Avalonia Version”一般为0.10.18或者11.0.0-preview4(2023年5月22日22:31:23)

Avalonia框架版本也可以在“依赖项→包”中查看

如果使用的是预览版，在nuget包管理器中，需要勾选搜索框右侧的“包括预发行版”，才能看到preview的版本。

DataGrid的使用

样式引用

在App.axaml（或者在其他使用的界面上引用）中引用DataGrid的样式文件

必须引用样式文件，否则不会显示DataGrid

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

Fluent.xaml的效果：

样式效果比较全

Simple.xaml的效果：

比较简单

使用DataGrid

DataGrid的使用和WPF一样通过DataGrid.Columns编写列

与WPF区别：

1. 绑定属性是Items
2. 并且很多属性需要自己赋值进行初始化
   1. 例如需要拖拽列头进行调整宽度，需要增加CanUserResizeColumns="True"
   2. 需要拖拽列头进行列的顺序调整，需要自己添加CanUserReorderColumns="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;

显示效果：