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

使用Avalonia UI实现DataGrid

article 2025/1/30 6:19:33

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 是否为 null

            var 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 是否为 null

            var 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 中某行被双击时触发。即用户快速连续点击某一行时触发。