Avalonia 初学笔记(2):简单了解与WPF的区别

相关链接

Avalonia UI 官网

Avalonia 官方文档

Avalonia学习笔记 CSDN博客专栏

前言

C# 上位机技术的终点有两个技术，Avalonia和Unity。Godot目前3D还是太拉了，MAUI目前也只是玩具。Avalonia是跨平台版本的WPF，而Unity是实现3D预览效果的选择。Avalonia算是上位机的终点了，我目前打算学习Avalonia+ReactiveUI

Avalonia相对于WPF的新特性简单介绍

B站_十月的寒流：Avalonia中的那些让WPF开发者相见恨晚的特性

ChatGPT推荐

因为Avalonia的中文资料实在是太少了，这里我们得用ChatGpt，而且最好是纯英文文档去学习。

免费的ChatGPT网址

比如我要搜一下【UserControl.DataContext and Design.DataContext 】在Avalonia里面使用的区别。为了顺便学一下英文，我这里也将使用纯英文的官方文档

Avalonia Demo案例

Avalonia.Samples Github仓库地址

下载好了要进行编译，文件挺多的，我本地编译了10分钟左右。

Avalonia 开始使用

Avalonia 开始使用

启动成功

Avalonia 文件扩展名

Avalonia Toolkit 扩展安装

修改.net core版本

当前日期2024年2月21日，现在新建的Avalonia的项目是.net core 7.0框架。我们将这个修改为.net core 8.0

Avalonia对WPF的修改

Avalonia Get Started

类CSS选择器

WPF 是没有CSS选择器的，但是Avalonia有。因为CSS有点吃性能而且容易出错样式混乱，但是CSS写起来是真的方便。

Avalonia Styling

我们这里简单介绍一下Avalonia的Style，因为Avalonia的Style是像前端的CSS选择器一样的语法，这里不展开说明

Style的定义

简单代码

<UserControl 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"
             xmlns:vm="clr-namespace:AvaloniaReactiveUI_Demo.ViewModels"
             mc:Ignorable="d"
             d:DesignWidth="800"
             d:DesignHeight="450"
             x:Class="AvaloniaReactiveUI_Demo.Views.MainView"
             x:DataType="vm:MainViewModel">

  <UserControl.DataContext>
    <vm:MainViewModel />
  </UserControl.DataContext>

  <UserControl.Styles>
    <Style Selector="TextBlock.test" >
      <Setter Property="Background"
              Value="Red"/>
    </Style>
  </UserControl.Styles>
  <StackPanel>
    <TextBlock Text="{Binding Greeting}"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"/>
    <Button Content="Calculate"/>
    <TextBlock Classes="test add"  >Header</TextBlock>
    <TextBlock  >Header</TextBlock>
    <Grid ShowGridLines="True">

    </Grid>
  </StackPanel>
</UserControl>

数据绑定

Avalonia的数据绑定和WPF的数据绑定差不多。首先和和默认的分层一致

直接绑定

UserControl.DataContext和Design.DataContext的区别

这里我就直接上ChatGPT了

额，没怎么看懂。好像差不多吧。到时候用的时候感受一下。我这里还是保持这个UserControl.DataContext好了

数据模板

官方的数据模板我没看明白，主要他的代码不全，没有把ViewModel写出来。

Avalonia Data Templates

数据源准备

实体类

public class Person
{
    public int Id { get; set; }
    public string? Name { get; set; }
    public string? Title { get; set; }
    public string? Description { get; set; }
}

数据源

public List<Person> People => new List<Person>() {
     new Person()
     {
         Name = "小王",
         Id = 1,
         Description="王哥",
         Title = "大王"
     },
     new Person()
     {
         Name = "小美",
         Id = 2,
         Description = "美美的",
         Title = "美姐"
     },
     new Person()
     {
         Name = "大帅",
         Id = 3,
         Description = "帅帅",
         Title = "大帅逼"
     }

 };

普通模板

这个是最标准的数据源绑定

<ListBox ItemsSource="{Binding People}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel>
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="Id:" />
          <TextBlock Text="{Binding Id}" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="Name:" />
          <TextBlock Text="{Binding Name}" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="Description:" />
          <TextBlock Text="{Binding Description}" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="Title:" />
          <TextBlock Text="{Binding Title}" />
        </StackPanel>
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

改成样式Styles

<UserControl.Styles>
  <Style Selector="ListBox.Test">
    <Setter Property="ItemTemplate" >
      <Setter.Value>
        <DataTemplate>
          <StackPanel>
            <StackPanel Orientation="Horizontal">
              <TextBlock Text="Id:" />
              <TextBlock Text="{Binding Id}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
              <TextBlock Text="Name:" />
              <TextBlock Text="{Binding Name}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
              <TextBlock Text="Description:" />
              <TextBlock Text="{Binding Description}" />
            </StackPanel>
            <StackPanel Orientation="Horizontal">
              <TextBlock Text="Title:" />
              <TextBlock Text="{Binding Title}" />
            </StackPanel>
          </StackPanel>
        </DataTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</UserControl.Styles>


<ListBox ItemsSource="{Binding People}" Classes="Test">

</ListBox>

但是我看官方案例的方法不是这样的，是这么写的。我目前也不是很了解

总结

Avalonia对WPF最大的两个问题进行了解决，Style的CSS写法和Binding的方法。WPF的Style是纯样式继承的方法。两个各有利弊。而且Avalonia的代码提示还是比较弱的，微软啥时候能把Avalonia给收购了啊。