Net跨平台UI框架Avalonia入门-安装和使用

Avalonia 简介

Avalonia UI是是Net的跨平台UI框架,支持 Windows、Linux、iOS 和 Android,与Net其他UI框架相比,如WPF(Windows平台)、MAUI跨平台控件(Android、iOS、macOS 和 Windows),主要优势是支持Linux。在国产化的需求下,对于C#开发的程序员,Avalonia适合用来开发Linux的桌面客户端。

更新

v11版本已经发布了,v11版本的见 Net跨平台UI框架Avalonia入门-安装和使用(v11版本)

Avalonia 安装

在Visual Studio(示例使用Visual Studio 2022)中,在菜单栏“扩展”-》“管理扩展”,打开管理扩展界面,搜索Avalonia,选择 Avalonia for Visual Studio 2022扩展包,点击下载。
在这里插入图片描述

下载完成后,根据提示关闭Visual Studio

在这里插入图片描述

关闭Visual Studio之后,会弹出VSIX Installer,点击“Modify”安装,完成之后再打开VS

安装时候需要关闭所有Visual Studio程序,如果未关闭,安装程序会自动关闭正在运行的Visual Studio,所以记得安装时,保持自己的项目并关闭所有Visual Studio

在这里插入图片描述

创建项目中就出现了Avalonia的项目

在这里插入图片描述

常见错误与解决方案

1. 创建项目报错,无法正确加载AvaloniaPackage包,依赖项的包也报错。

win11安装会报这个错误

在这里插入图片描述

暂时未解决,可以尝试重启和修复,建议还是使用Win10开发

1.重启Visual Studio是否能够重新加载,如果无效进行下一步

2.启动Visual Studio Installer安装程序,进行修复,修复完进行重启电脑

在这里插入图片描述

问题2. 设计器不显示

在这里插入图片描述

解决方案:

运行或者生成一下启动项目,设计器就会出现

在这里插入图片描述

使用

在Avalonia中,设计器只能预览,无法进行控件添加移动等操作,也没有属性界面,控件和属性都需要手动输入

Avalonia的前台UI文件是axaml,其格式和编写方式大致与WPF的XAML一样,不过在IDE中缺少工具箱和属性面板,控件基本靠手写。
在代码中加入一些常用的控件,如GridButtonTextBox等,编写属性和事件,常用的如MarginBackgroundVerticalAlignmentHorizontalAlignment等属性与WPF一样,事件如:ButtonClick也是一样。

XAML:

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="AvaloniaApplication1.MainWindow"
        Title="Avalonia跨平台应用">
  <Grid Background="Gray" >

    <Button HorizontalAlignment="Left" 
            VerticalAlignment="Top" 
            Margin="10,50,0,0" 
            Content="按钮" 
            Background="Red" 
            BorderBrush="Green"
            BorderThickness="5"  Click="Button_Click">
    </Button>
    <TextBox  HorizontalAlignment="Left" VerticalAlignment="Top" Text="111" ></TextBox>
    <TextBlock VerticalAlignment="Center" Text="43253543" >
    </TextBlock>
  </Grid>

</Window>

cs:

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

        }

        private void Button_Click(object sender,RoutedEventArgs e)
        {
            var btn = (Button)sender;
            btn.Content = "触发";
        }
    }

效果:

在这里插入图片描述

常见的问题:

输入Click无法识别和生成,显示错误,需要手动编写前后台的代码,手动写了后台的事件,生成一下项目就正常了。

在这里插入图片描述

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海盗Sharp

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值