Avalonia学习实践(一)--示例

最新推荐文章于 2024-07-24 11:25:52 发布
最新推荐文章于 2024-07-24 11:25:52 发布
阅读量9.8k 收藏 45
点赞数 9
分类专栏： 学习实践 .NET 文章标签： 学习 avalonia .NET跨平台
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lordwish/article/details/124741729
版权

Avalonia是基于.NET的跨平台UI框架，能够支持在Windows、Linux、MacOS等操作系统中运行客户端。在官方的MAUI没有发布最新稳定版，对于客户端程序的跨平台开发仍然是不错的选择，尤其是已经有WPF基础的，能够很快上手。

0.开发环境

开发工具：VisualStudio 2019
处理架构：x86架构（AMD系列）
操作系统：Windows10，统信UOS家庭版

1.安装VS插件

打开VS“扩展>管理扩展”，搜索“Avalonia”，安装“Avalonia for Visual Studio 2019,2017”。
在这里插入图片描述

2.创建新应用

插件安装完成时，在创建新项目界面，可以看到Avalonia的模板，有常规模式应用和MVVM模式应用。有些WPF基础的可以选择MVVM模式应用。选择“Avalonia MVVM Application”。
在这里插入图片描述

如果VS刚刚更新过NET6，可能会提示错误，不能正常编译。将项目文件中的目标框架从NET6.0改为NET5.0。如果能够正常编译则忽略。
在这里插入图片描述

3.代码项目结构

这是典型的MVVM模式结构，主要代码文件及目录用途如下：
Program.cs：系统入口
App.axaml：应用样式及初始化等
ViewLocator：View层与ViewModel层的映射
在这里插入图片描述

4.应用示例

4.1应用需求

实现一个简单功能，从文件中读取气象数据，包括观测站点、时间、温度、湿度、降水量、气压、风速等，以列表形式进行展示。
原始数据是从国家气象数据中心下载的公开数据，用于做示例。由于只是简单示例，只考虑了txt文件的读取，没有Excel表格操作，也不涉及到数据库和ORM。
气象数据为txt文件，数据间以空格间隔。
在这里插入图片描述
另外还有一份观测站点的数据，与气象数据中的站点编号能够进行对应。

观测站点的原始文件是PDF，导出成Excel后又导出成txt

在这里插入图片描述

4.2界面布局

Avaloina的axaml文件与WPF的xaml文件规则一致，切换起来没有什么困难。

DataGrid控件需要单独安装，默认的控件库中是没有的。打开NuGet管理器，搜索“Avalonia.Controls.DataGrid”进行安装
在这里插入图片描述

页面布局代码如下：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="80"></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <WrapPanel Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center">
<TextBox Width="180" Height="30" Margin="0,0,5,0" Text="{Binding ClimateSourcePath,Mode=TwoWay}"></TextBox>
        <Button Height="30" Width="110" Margin="0,0,5,0" HorizontalContentAlignment="Center" Command="{Binding SelectClimateFileCommand}">选择气象文件</Button>
        <Button Height="30" Width="110" HorizontalContentAlignment="Center" Command="{Binding GetClimateCommand}">加载气象数据</Button>
    </WrapPanel>
    <DataGrid Items="{Binding ClimateModels}" Grid.Row="1" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTextColumn Width="*" Header="区站号" Binding="{Binding Station_Id_C}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="站名" Binding="{Binding StationName}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="年"  Binding="{Binding Year}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="月"  Binding="{Binding Mon}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="日" Binding="{Binding Day}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="时次" Binding="{Binding Hour}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="气压" Binding="{Binding PRS}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="海平面气压" Binding="{Binding PRS_Sea}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="最大风速" Binding="{Binding WIN_S_Max}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="温度" Binding="{Binding TEM}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="湿度" Binding="{Binding RHU}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="降水量" Binding="{Binding PRE_1h}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="风力" Binding="{Binding windpower}"></DataGridTextColumn>
            <DataGridTextColumn Width="*" Header="体感温度" Binding="{Binding tigan}"></DataGridTextColumn>
            <DataGridTextColumn Width="2*" Header="地理位置信息" Binding="{Binding GeoLocation}"></DataGridTextColumn>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

4.3数据对象

创建气象数据类

    /// <summary>
    /// 原始气象数据模型
    /// </summary>
    public partial class ClimateModel
    {
        /// <summary>
        /// 区站号/观测平台标识
        /// </summary>
        public string Station_Id_C { get; set; }
        /// <summary>
        /// 站名
        /// </summary>
        public string StationName { get; set; }
        /// <summary>
        /// 年
        /// </summary>
        public int Year { get; set; }
        /// <summary>
        /// 月
        /// </summary>
        public int Mon { get; set; }
        /// <summary>
        /// 日
        /// </summary>
        public int Day { get; set; }
        /// <summary>
        /// 时次
        /// </summary>
        public int Hour { get; set; }
        /// <summary>
        /// 气压（百帕）
        /// </summary>
        public double PRS { get; set; }
        /// <summary>
        /// 海平面气压（百帕）
        /// </summary>
        public double PRS_Sea { get; set; }
        /// <summary>
        /// 最大风速（米/秒）
        /// </summary>
        public double WIN_S_Max { get; set; }
        /// <summary>
        /// 温度（摄氏度）
        /// </summary>
        public double TEM { get; set; }
        /// <summary>
        /// 相对湿度（%）
        /// </summary>
        public double RHU { get; set; }
        /// <summary>
        /// 降水量（毫米）
        /// </summary>
        public double PRE_1h { get; set; }
        /// <summary>
        /// 风力
        /// </summary>
        public int windpower { get; set; }
        /// <summary>
        /// 体感温度（摄氏度）
        /// </summary>
        public double tigan { get; set; }
        /// <summary>
        /// 地理位置信息
        /// </summary>
        public string GeoLocation { get; set; }
    }

增加了站点名称和地理位置信息两个字段

创建观测站点类

    /// <summary>
    /// 原始站点数据模型
    /// </summary>
    public partial class StationModel
    {
        /// <summary>
        /// 省份
        /// </summary>
        public string Province { get; set; }

        /// <summary>
        /// 区站号/观测平台标识
        /// </summary>
        public string Station_Id_C { get; set; }
        /// <summary>
        /// 站名
        /// </summary>
        public string StationName { get; set; }
        /// <summary>
        /// 纬度（度分）
        /// </summary>
        public int LatitudeDF { get; set; }
        /// <summary>
        /// 经度（度分）
        /// </summary>
        public int LongitudeDF { get; set; }
        /// <summary>
        /// 气压传感器海拔高度（米）
        /// </summary>
        public double MonitorHeight { get; set; }
        /// <summary>
        /// 观测场海拔高度（米）
        /// </summary>
        public double StationHeight { get; set; }
        /// <summary>
        /// 地理位置信息
        /// </summary>
        public string GeoLocation { get; set; }
    }

原始数据中的经纬度为度分秒格式，增加一个字段用来表示十进制的经纬度，同时与气象数据中的站点位置对应。

4.4视图绑定

在MainWindowViewModel中创建属性对象和绑定命令

        #region Data
        //气象数据集合
        private ObservableCollection<ClimateModel> _climateModels;
        public ObservableCollection<ClimateModel> ClimateModels
        {
            get => _climateModels;
            set => this.RaiseAndSetIfChanged(ref _climateModels, value);
        }
		//站点数据集合
        private ObservableCollection<StationModel> _stationModels;

        public ObservableCollection<StationModel> StationModels
        {
            get => _stationModels;
            set => this.RaiseAndSetIfChanged(ref _stationModels, value);
        }
		//气象数据文件路径
        private string _climateSourcePath ;

        public string ClimateSourcePath
        {
            get => _climateSourcePath;
            set => this.RaiseAndSetIfChanged(ref _climateSourcePath, value);
        }
		//站点数据文件路径
        private string _stationSourcePath;

        public string StationSourcePath
        {
            get => _stationSourcePath;
            set => this.RaiseAndSetIfChanged(ref _stationSourcePath, value);
        }

        #endregion

        #region Command
        public ReactiveCommand<Unit,Unit> SelectClimateFileCommand { get; }//选择气象数据文件
        public ReactiveCommand<Unit,Unit> GetClimateCommand { get; }//获取气象数据
        public ReactiveCommand<Unit, Unit> SelectStationFileCommand { get; }//选择站点数据文件
        public ReactiveCommand<Unit,Unit> GetStationCommand { get; }//获取站点数据
        #endregion

4.5数据处理

在MainWindowViewModel中初始化数据并定义处理数据的函数。

public MainWindowViewModel()
{
    _climateModels = new ObservableCollection<ClimateModel>();
    _climateSourcePath = string.Empty;
    SelectClimateFileCommand = ReactiveCommand.Create(SelectClimateFile);
    GetClimateCommand = ReactiveCommand.Create(GetClimateData);

    _stationModels = new ObservableCollection<StationModel>();
    _stationSourcePath = string.Empty;
    SelectStationFileCommand = ReactiveCommand.Create(SelectStationFile);
    GetStationCommand = ReactiveCommand.Create(GetStationData);
}

//选择气象数据文件
private void SelectClimateFile()
{
    var dialog = new OpenFileDialog
    {
        Title = "请选择文件"
    };
    var result= dialog.ShowAsync(Views.MainWindow.Instance);
    if (result.Result != null)
    {
        _climateSourcePath = result.Result[0];
    }
}
//获取气象数据
private void GetClimateData()
{
    if (!string.IsNullOrEmpty(_climateSourcePath))
    {
        _climateModels.Clear();
        using (StreamReader reader = new StreamReader(_climateSourcePath))
        {
            string line;
            while ((line=reader.ReadLine())!=null)
            {
                string[] arrys = line.TrimEnd().Split();
                ClimateModel item = new ClimateModel();
                item.Station_Id_C = arrys[0];
                item.Year = Int32.Parse(arrys[1]);
                item.Mon = Int32.Parse(arrys[2]);
                item.Day = Int32.Parse(arrys[3]);
                item.Hour = Int32.Parse(arrys[4]);
                item.PRS = Double.Parse(arrys[5]);
                item.PRS_Sea = Double.Parse(arrys[6]);
                item.WIN_S_Max = Double.Parse(arrys[7]);
                item.TEM = Double.Parse(arrys[8]);
                item.RHU = Double.Parse(arrys[9]);
                item.PRE_1h = Double.Parse(arrys[10]);
                item.windpower = Int32.Parse(arrys[11]);
                item.tigan = Double.Parse(arrys[12]);
                if (_stationModels.Any(t=>t.Station_Id_C==item.Station_Id_C))
                {
                    var station = _stationModels.First(t => t.Station_Id_C == item.Station_Id_C);
                    item.StationName = station.StationName;
                    item.GeoLocation = station.GeoLocation;
                }
                _climateModels.Add(item);
            }
        }
    }
    else
    {
        var message = MessageBox.Avalonia.MessageBoxManager.GetMessageBoxStandardWindow("提示", "No File Selected");
        message.Show();
    }
}
//选择站点数据文件
private void SelectStationFile()
{
    var dialog = new OpenFileDialog
    {
        Title = "请选择文件"
    };
    var result = dialog.ShowAsync(Views.MainWindow.Instance);
    if (result.Result != null)
    {
        _stationSourcePath = result.Result[0];
    }
}

//获取站点数据
private void GetStationData()
{
    if (!string.IsNullOrEmpty(_stationSourcePath))
    {
        _stationModels.Clear();
        using (StreamReader reader=new StreamReader(_stationSourcePath,Encoding.UTF8))
        {
            string line;
            while ((line=reader.ReadLine())!=null)
            {
                string[] arrys = line.TrimEnd().Split();
                StationModel item = new StationModel();
                 item.Province = arrys[0];
                 item.Station_Id_C = arrys[1];
                 item.StationName = arrys[2];
                 item.LatitudeDF = Int32.Parse(arrys[3]);
                 item.LongitudeDF = Int32.Parse(arrys[4]);
                 item.MonitorHeight = double.Parse(arrys[5]);
                 item.StationHeight = double.Parse(arrys[6]);
                 item.GeoLocation = ConvertGeoLocation(arrys[3], arrys[4]);
                 _stationModels.Add(item);
            }
        }
    }
    else
    {
        var message = MessageBox.Avalonia.MessageBoxManager.GetMessageBoxStandardWindow("提示", "No File Selected");
        message.Show();
    }
}

#region 经纬度转换
/// <summary>
/// 经纬度转换-度分转换为数字
/// </summary>
/// <param name="latitude">纬度(度分)</param>
/// <param name="longitude">经度(度分)</param>
/// <returns></returns>
private string ConvertGeoLocation(string latitude, string longitude)
{
    string result = "";
    string dgreeW = latitude.Substring(0, latitude.Length - 2);
    string minW = latitude.Substring(latitude.Length - 2, 2);
    double digtalW = double.Parse(dgreeW) + double.Parse(minW) / 60;
    string dgreeJ = longitude.Substring(0, longitude.Length - 2);
    string minJ = longitude.Substring(longitude.Length - 2, 2);
    double digtalJ = double.Parse(dgreeJ) + double.Parse(minJ) / 60;
    result = string.Format("{0},{1}", digtalW, digtalJ);
    return result;
} 
#endregion

1.Avalonia默认是不包含的MessageBox的，需要单独安装，可以从Nuget中安装第三方库MessageBox.Avalonia
2.Avalonia自带了打开文件选择对话框OpenFileDialog和保存文件对话框SaveFileDialog等，但可能是使用Task任务调用的原因，与主UI线程不在一个线程内，选择文件后绑定文件路径的控件并没有更新，数据是确实已经改变了。
3.使用Avalonia自带的对话框时需要指定父窗体，如果参照App.axaml.cs中的方法通过应用生命周期ApplicationLifeTime获取当前窗体的示例，在Windows下可以正常弹出对话框，但在Linux环境下程序直接卡死。

4.6成果示例

在这里插入图片描述

坑坑不息，多学有益

ludewig
关注
专栏目录
AvaloniaDockApplication：Dock示例应用程序
02-05
AvaloniaDock应用 Sample 应用程序。 这是完整应用程序。
Avalonia for Visual Studio 2022 扩展包
10-27
解决vs下载速度慢的问题
Avalonia基础学习详细
qq_58159494的博客
07-15 1568
AvaloniaUI是一个基于.NET的跨平台UI框架，允许开发人员使用单个.NET代码库来构建跨平台的应用程序。
Avalonia技术使用示例
易之阴阳，量子纠缠，道之一体，缘起性空
06-26 611
Avalonia是一个现代化的、开源的UI框架，它允许开发者使用XAML和C#（或其他.NET语言）来创建美观的、跨平台的桌面应用程序。现在，你可以通过.NET CLI或者IDE运行你的项目。应用程序将显示一个带有文本“Hello, Avalonia!”的窗口，证明Avalonia已经成功配置并运行。这个示例展示了Avalonia的基本用法，但实际上Avalonia支持更复杂的UI设计、数据绑定、MVVM模式、样式和模板等高级功能，这些都是构建现代桌面应用的关键。2. 修改Program.cs。
Avalonia：可信创.NET 跨平台UI，让JAVA失业者转.NET信创开发！
寒冰屋的专栏
07-15 182
Avalonia：可信创.NET 跨平台UI，让JAVA失业者转.NET信创开发！
Avalonia 实现跨平台的视频聊天、屏幕分享（源码，支持Win、银河麒麟、统信UOS）
zhuweisky
10-16 2094
Avalonia 是现在最流行的C#跨平台UI框架，如果要基于Avalonia 实现视频聊天和远程桌面控制，那么要如何实现了？
Avalonia学习（1：第一个程序）
gc_2299的博客
02-17 1724
学习Avalonia在VS2022中的配置方式，并创建第一个Avalonia项目。
.NET Core UI框架Avalonia
dotNET跨平台
02-26 8821
.NET Core UI框架Avalonia，Avalonia是一个基于WPF XAML的跨平台UI框架，并支持多种操作系统：Windows（.NET Framework，.NET Core），Linux（GTK），MacOS，Android和iOS。Avalonia目前处于测试阶段。GitHub:https://github.com/AvaloniaUI/Avalonia开发准备VS 2017安
Avalonia基础学习
虎哥的博客
04-07 2505
这是典型的MVVM模式结构，主要代码文件及目录用途如下：Program.cs：系统入口App.axaml：应用样式及初始化等ViewLocator：View层与ViewModel层的映射1.模型-视图-视图模型(MVVM)模式在Avalonia中创建一个简单的TODO应用程序2.MVVM是用于编写GUl应用程序的常见模式，也是编写Avalonia应用程序时推荐使用的模式。这里我们将假设一个CRUD应用程序，但这些概念中的大多数都可以应用于所有类型的应用程序。
在简单的示例中将本机（Windows和Linux）视图/控件/应用程序嵌入到Avalonia应用程序中
寒冰屋的专栏
06-19 222
如果需要将本机应用程序移植到多平台Avalonia，或者没有一些本机构建的复杂Avalonia控件，则将本机Windows和Linux控件嵌入到Avalonia应用程序中非常重要。我还介绍了通过IoC容器和动态加载在Avalonia中使用本机视图的最佳架构。最后，本文介绍如何将不同进程运行的本机窗口转换为Avalonia应用程序的可视部分。
Avalonia的初步学习和使用
weixin_45851631的博客
03-15 4038
Avalonia的初步学习和使用，通过模板创建应用程序以及通过vs2022创建应用程序
MessageBox.Avalonia:AvaloniaUI的消息框
03-09
MessageBox.Avalonia 适用于0.10的AvaloniaUI的消息框 首先，您应该安装MessageBox.Avalonia NuGet软件包 dotnet添加程序包MessageBox.Avalonia 或下载此仓库。 -在这里您可以找到API。 最简单的入门方法是： 更新 我们从ReactiveUI中删除了依赖项，这意味着您可以将此lib与mvc一起使用，也可以不与任何reactui项目一起使用 var messageBoxStandardWindow = MessageBox . Avalonia . MessageBoxManager . GetMessageBoxStandardWindow ( " title " , " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed...
material.avalonia：AvaloniaUI中的材料设计
02-04
物质性雪崩 该存储库是样式的集合，可帮助您使用Material Design自定义应用程序主题。 可以通过安装样式的集合，然后将其包括在所需的范围内。 请参阅App.xaml文件的示例： < Application xss=removed clr-namespace:Material.Styles.Themes;assembly=Material.Styles> < Application> < themes : BundledTheme BaseTheme
uwp avalonia
04-26
uwp 如何进行通知
learn-avalonia:这个IT资料库，我在那里学习雪茄
03-18
通过阅读和实践这些示例，你可以逐步熟悉Avalonia的工作原理，掌握创建跨平台应用程序的技能。 总的来说，学习Avalonia不仅能够让你掌握一门新的UI框架，还能增强你在C#和.NET平台上的开发能力，使你能够构建出运行...
Avalonia.FuncUI：使用F＃和Avalonia开发跨平台MVU GUI应用程序！
02-05
Avalonia.FuncUI 是一个基于 F# 和 Avalonia 框架构建的工具，用于创建跨平台的 Model-View-Update (MVU) 图形用户界面（GUI）应用程序。这个项目将 F# 语言的强大功能与 Avalonia 的跨平台 GUI 支持相结合，为...
Avalonia开发实践（三）——GroupBox
最新发布
羽木落凡的博客
07-24 589
近期在项目中要用到GroupBox，结果发现Avalonia原生框架中竟然没有这一控件。想着这个控件也不算复杂，索性就自己实现一个好了。
Avalonia 超级详细学习指南
仰望星空的博客
04-08 5345
什么是 Avalonia？Avalonia 是一个开源的、跨平台的 GUI 框架，允许开发者使用 XAML 和 C# 构建现代化、高性能的桌面应用程序。与其他框架相比，Avalonia 具有强大的跨平台能力和灵活的界面设计。} }()Avalonia 的特点和优势跨平台性：Avalonia 可以在 Windows、Linux、macOS 等多个平台上运行，开发者可以编写一套代码，然后在不同的操作系统上运行相同的应用程序。
简单示例中的多平台Avalonia .NET Framework编程基本概念
寒冰屋的专栏
11-22 2515
Avalonia是一个强大的新的开源跨平台包，用于UI开发类似，但在许多方面，比WPF更强大。本文解释了Avalonia最重要的概念，并为它们提供了动手教程。
avalonia socket
09-13
Avalonia is a cross-platform UI framework that allows you to create applications using XAML and C#. It supports various platforms, including Windows, Linux, and macOS. However, Avalonia itself does not provide a built-in socket library. To use sockets in an Avalonia application, you can make use of the .NET Core networking libraries. The System.Net.Sockets namespace provides classes and methods for socket programming in C#. You can create TCP/IP or UDP sockets, send and receive data, and handle network connections. Here's a simple example of creating a TCP socket in an Avalonia application: ```csharp using System; using System.Net; using System.Net.Sockets; public class SocketExample { public void Connect() { // Create a TCP/IP socket Socket socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp); // Connect to the remote endpoint IPAddress ipAddress = IPAddress.Parse("127.0.0.1"); IPEndPoint remoteEndPoint = new IPEndPoint(ipAddress, 8080); socket.Connect(remoteEndPoint); // Send data byte[] data = System.Text.Encoding.UTF8.GetBytes("Hello, server!"); socket.Send(data); // Receive data byte[] buffer = new byte[1024]; int bytesRead = socket.Receive(buffer); string response = System.Text.Encoding.UTF8.GetString(buffer, 0, bytesRead); Console.WriteLine("Received: " + response); // Close the socket socket.Shutdown(SocketShutdown.Both); socket.Close(); } } ``` This is just a basic example to get you started with socket programming in Avalonia. Remember to handle exceptions, implement proper error handling, and consider using asynchronous methods for better performance in real-world applications.
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值