当前位置：首页 > news >正文

使用Avalonia UI实现DataGrid

news 2025/8/2 12:18:53

1.Avalonia中的DataGrid的使用

DataGrid 是客户端 UI 中一个非常重要的控件。在 Avalonia 中，DataGrid 是一个独立的包 Avalonia.Controls.DataGrid，因此需要单独通过 NuGet 安装。接下来，将介绍如何安装和使用 DataGrid 控件。

2.安装 DataGrid 包

要使用 DataGrid 控件，首先需要在 NuGet 中安装 Avalonia.Controls.DataGrid 包。只需在 NuGet 搜索框中输入 Avalonia.Controls.DataGrid，然后进行安装即可。

版本选择
在安装 Avalonia.Controls.DataGrid 包时，请确保其版本与 Avalonia 框架版本一致，否则可能导致安装失败。Avalonia 框架版本是您创建项目时选择的“Avalonia Version”。

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

3.DataGrid的使用

在 App.axaml 文件中（或其他需要使用 DataGrid 的界面文件），需要引用 DataGrid 的样式文件。可以通过以下方式在界面中引入：

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

注：必须引用 DataGrid 的样式文件，否则 DataGrid 将无法正确显示。

4.代码实现

App.axaml文件

<Application xmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"x:Class="datagridTest.App"RequestedThemeVariant="Default"><!-- "Default" ThemeVariant follows system theme variant. "Dark" or "Light" are other available options. --><Application.Styles><FluentTheme/><StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml"/></Application.Styles>
</Application>

MainWindow.axaml文件

<Window xmlns="https://github.com/avaloniaui"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:datagridTest"x:Class="datagridTest.MainWindow"x:DataType="local:MainWindow"Title="DataGrid Test" Width="400" Height="300"><StackPanel><!-- 显示 People 的数量，修改为显示“行数” --><TextBlock Text="{Binding PeopleCountText}" Margin="10" FontSize="16" /><!-- 按钮：点击后加载数据 --><Button Content="加载数据" Margin="10" Click="LoadDataButton_Click"/><!-- 按钮：点击后清除数据 --><Button Content="清除数据" Margin="10" Click="ClearDataButton_Click"/><!-- DataGrid --><DataGrid Name="DataGrid1" Margin="10" ItemsSource="{Binding People}"SelectionChanged="DataGrid_SelectionChanged"DoubleTapped="DataGrid_DoubleTapped" IsReadOnly="True"><DataGrid.Columns><DataGridTextColumn Header="ID" Binding="{Binding Id}" /><DataGridTextColumn Header="姓名" Binding="{Binding Name}" /><DataGridTextColumn Header="Age" Binding="{Binding Age}" /></DataGrid.Columns></DataGrid></StackPanel>
</Window>

MainWindow.axaml.cs文件

using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Avalonia.Interactivity;
using MsBox.Avalonia;namespace datagridTest
{public partial class MainWindow : Window, INotifyPropertyChanged{private List<Person> _people;public List<Person> People{get => _people ?? (_people = new List<Person>());set{_people = value;OnPropertyChanged();OnPropertyChanged(nameof(PeopleCountText));}}public string PeopleCountText => $"一共有{People.Count}行数据";public MainWindow(){InitializeComponent();DataContext = this;People = new List<Person>();}private void InitializeComponent(){AvaloniaXamlLoader.Load(this);System.Diagnostics.Debug.WriteLine("XAML loaded successfully");// 获取 DataGrid 控件的引用DataGrid1 = this.FindControl<DataGrid>("DataGrid1");}private void LoadDataButton_Click(object sender, RoutedEventArgs e){People = new List<Person>{new Person { Id = 1, Name = "张三(John Doe)", Age = 30 },new Person { Id = 2, Name = "李四(Jane Smith)", Age = 25 },new Person { Id = 3, Name = "王五(Sam Brown)", Age = 35 }};}private void ClearDataButton_Click(object sender, RoutedEventArgs e){People = new List<Person>();}private void DataGrid_SelectionChanged(object sender, SelectionChangedEventArgs e){if (DataGrid1 == null) return; // 检查 DataGrid1 是否为 nullvar selectedPerson = DataGrid1.SelectedItem as Person;if (selectedPerson != null){MsBox.Avalonia.MessageBoxManager.GetMessageBoxStandard("点击按钮（Button Clicked）", "您点击了: " + selectedPerson.Name).ShowWindowAsync();}}// 双击行时触发private void DataGrid_DoubleTapped(object sender, Avalonia.Interactivity.RoutedEventArgs e){if (DataGrid1 == null) return; // 检查 DataGrid1 是否为 nullvar selectedPerson = DataGrid1.SelectedItem as Person;if (selectedPerson != null){MsBox.Avalonia.MessageBoxManager.GetMessageBoxStandard("点击按钮（Button Clicked）", "您点击了: " + selectedPerson.Id).ShowWindowAsync();}}public event PropertyChangedEventHandler PropertyChanged;protected void OnPropertyChanged([CallerMemberName] string propertyName = null){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}}public class Person{public int Id { get; set; }public string Name { get; set; }public int Age { get; set; }}
}

代码解析：

1.INotifyPropertyChanged接口：
一定要实现INotifyPropertyChanged接口，否则界面datagrid数据无法展示。INotifyPropertyChanged 接口用于数据绑定通知，确保当数据变化时，界面能够自动更新。

2.数据绑定 (Binding):
在XAML中，DataGrid的ItemsSource属性通过Binding绑定到了People属性。这意味着DataGrid会显示People集合中的数据。

3.后台代码中的People属性:
在MainWindow类中，People是一个List<Person>类型的属性。它存储了要在界面上显示的数据。

4.初始化和数据加载:
MainWindow构造函数中，DataContext被设置为this（即MainWindow的实例），使得XAML中的绑定可以访问People属性。

4.数据加载和清除:
在LoadDataButton_Click方法中，当点击加载数据按钮时，People属性被设置为一个新的List<Person>，这会触发OnPropertyChanged()方法，从而更新界面。

5.DataGrid_SelectionChanged 事件
触发时机：该事件在 DataGrid 中的选中项发生变化时触发。例如，用户点击了某一行或选择了某个单元格时。

6.DataGrid_DoubleTapped 事件事件
触发时机：该事件在 DataGrid 中某行被双击时触发。即用户快速连续点击某一行时触发。