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

2023-11-17

Avalonia中的DataGrid的使用

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

DataGrid包安装

DataGrid的包需要在Nuget中安装，直接搜索Avalonia.Controls.DataGrid安装即可（V11正式版之前）

在这里插入图片描述

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

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

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

v11版本

v11版本更新之后，使用avalonia框架创建的项目，依赖包中自动带了DataGrid包，不需要另外安装

在这里插入图片描述

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区别：

绑定属性是Items
并且很多属性需要自己赋值进行初始化
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>

  //后台绑定
  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;

显示效果：

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Avalonia UI

ui

WPF

c

Avalonia