博客

Avalonia的初步学习和使用

  • Post author:
  • Post category:其他


1、使用Avalonia生成一个窗口

步骤1：下载Avalonia的模板 

dotnet new install Avalonia.Templates

步骤二：创建一个新的名为MyApp的应用程序 

dotnet new avalonia.app -o MyApp

步骤三：导航到MyApp并运行 

cd MyApp
dotnet run


2、在Visual Studio中安装Avalonia的扩展

工具：Visual Studio2022

.net版本：.net7.0.201

步骤一：安装avalonia的扩展

点击vs2022中的扩展->搜索avalonia->下载->关闭Visual Studio会自动安装

步骤二：新建一个项目


运行截图

.axaml文件说明

  • 要使用控件，必须引入命名空间：xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
  • 本案例采用mvvm模式，其中视图是围绕视图模型构建的，所以要在视图中引入视图模型：x:DataType=”vm:MainWindowViewModel
  • 其中.axaml控制外观、.cs控制行为
  • 图标：Icon=”/Assets/avalonia-logo.ico”
  • 标题：Title=”AvaloniaApplication1″
  • 将TextBlock的Text属性绑定到MainWindowViewModel的Greeting方法上：<TextBlock Text=”{Binding Greeting}” HorizontalAlignment=”Center” VerticalAlignment=”Center”/>
  • 要设置实际的DataContext运行时，在代码中设置DataContext属性(查看App.axaml.cs）

3、Avalonia组成

（1）控制器

（2）输入

Avalonia输入系统使用

直接事件

和

路由事件

来支持文本输入、焦点管理和鼠标定位。

（3）布局



  • Panel


    : Child controls are stacked on top of each other to fill the panel



  • DockPanel


    : Child controls are aligned to the edges of the panel



  • StackPanel


    : Child controls are stacked either vertically or horizontally



  • WrapPanel


    : Child controls are positioned in left-to-right order and wrapped to the next line when there are more controls on the current line than space allows



  • Grid


    : Child controls are positioned by rows and columns



  • Canvas


    : Child controls provide their own layout

（4）数据绑定

  • Multiple binding modes: one way, two way, one-time and one-way to source

（5）Graphics图集

（6）Animation动画

PS:文档地址：

Getting Started – Avalonia UI


版权声明：本文为weixin_45851631原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。