使用Avalonia UI实现DataGrid

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 的样式文件。可以通过以下方式在界面中引入:

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

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

4.代码实现

App.axaml文件

XML 复制代码
<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文件

XML 复制代码
<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文件

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

5.界面展示

源码地址:https://download.csdn.net/download/weixin_44643352/90323900

相关推荐
极小狐9 小时前
极狐GitLab 通用软件包存储库功能介绍
java·数据库·c#·gitlab·maven
钢铁男儿9 小时前
C# 方法(可选参数)
数据库·mysql·c#
yuanpan10 小时前
.net/C#进程间通信技术方案总结
开发语言·c#·.net
IM1GENIUS13 小时前
.NET高频技术点(持续更新中)
c#·.net
red-fly13 小时前
c#修改ComboBox当前选中项的文本
c#·combobox
bicijinlian16 小时前
.Net HttpClient 概述
c#·.net·httpclient·.net httpclient
码观天工17 小时前
.NET 原生驾驭 AI 新基建实战系列(七):Weaviate ── 语义搜索的智能引擎创新者
ai·c#·.net·向量数据库·weaviate
Zhen (Evan) Wang18 小时前
.NET 8 + Angular WebSocket 高并发性能优化
c#·.net·angular
chenyuhao202418 小时前
链表面试题7之相交链表
数据结构·算法·链表·面试·c#
菜鸟分享录19 小时前
MCP 入门实战:用 C# 开启 AI 新篇章
ai·c#·semantic kernel·mcp