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

元正~Richarlie

于 2025-07-09 08:51:15 发布

阅读量479

点赞数

CC 4.0 BY-SA版权

文章标签： net

原文链接：https://blog.csdn.net/qq_39427511/article/details/130751891

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中缺少工具箱和属性面板，控件基本靠手写。
在代码中加入一些常用的控件，如Grid、Button、TextBox等，编写属性和事件，常用的如Margin、Background、VerticalAlignment、HorizontalAlignment等属性与WPF一样，事件如：Button的Click也是一样。

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" >
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Button</span> <span class="token attr-name">HorizontalAlignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Left<span class="token punctuation">"</span></span> 
        <span class="token attr-name">VerticalAlignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Top<span class="token punctuation">"</span></span> 
        <span class="token attr-name">Margin</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10,50,0,0<span class="token punctuation">"</span></span> 
        <span class="token attr-name">Content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>按钮<span class="token punctuation">"</span></span> 
        <span class="token attr-name">Background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Red<span class="token punctuation">"</span></span> 
        <span class="token attr-name">BorderBrush</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Green<span class="token punctuation">"</span></span>
        <span class="token attr-name">BorderThickness</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span>  <span class="token attr-name">Click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Button_Click<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextBox</span>  <span class="token attr-name">HorizontalAlignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Left<span class="token punctuation">"</span></span> <span class="token attr-name">VerticalAlignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Top<span class="token punctuation">"</span></span> <span class="token attr-name">Text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>111<span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TextBox</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>TextBlock</span> <span class="token attr-name">VerticalAlignment</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Center<span class="token punctuation">"</span></span> <span class="token attr-name">Text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>43253543<span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>TextBlock</span><span class="token punctuation">&gt;</span></span>

</Grid>

</Window>

AI写代码 xml

cs:

 public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
    <span class="token punctuation">}</span>

    <span class="token keyword">private</span> <span class="token return-type class-name"><span class="token keyword">void</span></span> <span class="token function">Button_Click</span><span class="token punctuation">(</span><span class="token class-name"><span class="token keyword">object</span></span> sender<span class="token punctuation">,</span><span class="token class-name">RoutedEventArgs</span> e<span class="token punctuation">)</span>
    <span class="token punctuation">{<!-- --></span>
        <span class="token class-name"><span class="token keyword">var</span></span> btn <span class="token operator">=</span> <span class="token punctuation">(</span>Button<span class="token punctuation">)</span>sender<span class="token punctuation">;</span>
        btn<span class="token punctuation">.</span>Content <span class="token operator">=</span> <span class="token string">"触发"</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>