2020-04-30发表.NET9 分钟读完 (大约1347个字)

Avalonia 体验

最近在做跨平台（Mac OS 和 Windows）的项目，虽然最终采用了 QT 和 C++ 的组合，但是依然试水一下 Avalonia ，毕竟是 Star 了好几年的跨平台 WPF 框架，因为之前一直没有跨 Mac OS 的需求，所以一直在用 Windows 平台下的 .NET WPF，今天来看看 Avalonia 跨平台 WPF 的体验吧。

1.安装 Avalonia Template

第一步肯定是要安装 Avalonia 的项目模版了，这样可以为 dotnet cli 提供快速创建项目的能力。

1.去下面的 github 地址把 Avalonia 模板 clone 下来：

https://github.com/AvaloniaUI/avalonia-dotnet-templates

2.执行安装命令，将 Avalonia 模板安装到 dotnet cli。

dotnet new –install [path-to-repository]

path-to-repository 就是你 clone 下来的地址，安装结束以后，dotnet cli 回列出当前系统中所有可供选择的模板。

2.创建第一个 Avalonia 项目

因为我们已经安装了 Avalonia 的项目模板，所以直接运行创建模板的命令：

dotnet new avalonia.mvvm -o QuickAvalonia

没有问题的话，会看到 The template “Avalonia .NET Core MVVM App” was created successfully.

这样我们就创建了我们的第一个 Avalonia 项目，

3.运行第一个 Avalonia 项目

因为使用官方的模板创建的，所以已经内置了 Hello World，我们可以直接通过运行命令跑起来.

dotnet run

4.解析 Avalonia 项目结构

开发体验还不错，简单的几个命令就创建了一个跨平台的 WPF 架构软件，我们开始试水体验一下，不过在这之前我们先解析一下项目结构。

Dependencies

依赖的 Dotnet 框架，我这里是是 Dotnet 3.1.201
Assets

资源文件，这里放了一个 ico，用作软件的图标
Models

空文件夹，Avalonia 官方预设的文件夹，以后咱们的业务模型可以放到这里
ViewModels

放置 VM 的文件夹，里头已经有两个预设了，可以看到 MainWindowViewModel 和 ViewModelBase。

MainWindowViewModel

using System;
using System.Collections.Generic;
using System.Text;

namespace QuickAvalonia.ViewModels
{
    public class MainWindowViewModel : ViewModelBase
    {
        public string Greeting => "Hello World!";
    }
}

有一个 CLI 封装属性，用于在窗口显示 binding 的 Hello world。

ViewModelBase

using System;
using System.Collections.Generic;
using System.Text;
using ReactiveUI;

namespace QuickAvalonia.ViewModels
{
    public class ViewModelBase : ReactiveObject
    {
    }
}

所有的 viewmodel 继承这个 ViewModelBase，然后他继承了 ReactiveOjbect，这个是 Avalonia 的内置类，做过 WPF 的人都知道，MVVM 模式，所有具备通知 UI 的属性，都需要继承 INotifyPropertyChange 接口，所以这个 ReactiveOjbect 应该是也是实现了 INotifyPropertyChange 接口的基类，而且看 MainWindowViewModel 里头属性封装如此简洁，ReactiveOjbect 应该还实现了 AOP ，可以让我们不用像常规封装属性那种麻烦的写法，如果没有实现 AOP，常规的写法应该是这样：

private Rect _RectLeft;
public Rect RectLeft
{
	get { return _RectLeft; }
	set
	{
		_RectLeft = value;
		NotifyChanged(() => RectLeft);
	}
}

这是常规具备 UI 通知属性的封装写法，所以 Avalonia 可以写得如此简洁应该就是实现了 AOP，我们继续往下看。

Views

视图，有一个主窗口，内容只有一个
1
<TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
用于显示文件，同时也是绑定了 MainWIndowViewModel
App

管理我们应用程序的注入还有主窗口配置的工作
Program

启动项目的主入口，有 bug 信息的输出，还有管理 app 生命周期，以及注入 Avalonia UI 框架的工作

ViewLocator

// Copyright (c) The Avalonia Project. All rights reserved.
// Licensed under the MIT license. See licence.md file in the project root for full license information.

using System;
using Avalonia.Controls;
using Avalonia.Controls.Templates;
using QuickAvalonia.ViewModels;

namespace QuickAvalonia
{
    public class ViewLocator : IDataTemplate
    {
        public bool SupportsRecycling => false;

        public IControl Build(object data)
        {
            var name = data.GetType().FullName.Replace("ViewModel", "View");
            var type = Type.GetType(name);

            if (type != null)
            {
                return (Control)Activator.CreateInstance(type);
            }
            else
            {
                return new TextBlock { Text = "Not Found: " + name };
            }
        }

        public bool Match(object data)
        {
            return data is ViewModelBase;
        }
    }
}

视图寻址器，根据 ViewModels 里头的类去匹配他的视图，他会把地址的 ViewModels，替换成 Views，然后找到 VIewModel 对应的 View。

项目结构就是这样了，如果搞过 WPF MVVM 的开发者应该看到之后很情切友好，这是一个具备的数据驱动以及 AOP 架构的 WPF，开发体验是非常不错的，现在我们做一点修改，把显示的文字换了，把字体加大，背景颜色换掉，来体验一下 Avalonia 的开发体验。

5. 初步体验

1.修改显示的文字

1	public string Greeting => "My First Avalonia";

2.修改字体大小

1 2	<TextBlock FontSize="60" Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>

3.修改背景颜色

1	Background="Red"

再次运行

6.总结

技术方面就不讨论了，做过 WPF 的开发者应该都了解，我们只说跨平台的体验，虽然没有去下载和体验跨平台的 xmal 设计器 AvaloniaStudio，但是体验依然还是非常不错，数据驱动，AOP，自动 view 寻址，快速创建项目等等，都非常不错，不过不知道异形窗口的体验如何，改天我再写一篇关于 Avalonia 异形窗口构建的体验。

#Dotnet Avalonia