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的定义


简单代码

xml 复制代码
<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

数据源准备

实体类

csharp 复制代码
public class Person
{
    public int Id { get; set; }
    public string? Name { get; set; }
    public string? Title { get; set; }
    public string? Description { get; set; }
}

数据源

csharp 复制代码
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 = "大帅逼"
     }

 };

普通模板

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

xml 复制代码
<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

xml 复制代码
<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给收购了啊。

相关推荐
@曲终41 分钟前
C语言学习 12(指针学习1)
c语言·经验分享·笔记·学习
SRC_BLUE_171 小时前
[网安靶场] [更新中] UPLOAD LABS —— 靶场笔记合集
笔记
YuanLiu_2271 小时前
代码随想录算法训练营第十三天(递归遍历;迭代遍历;统一迭代;层序遍历)
java·数据结构·笔记·算法·leetcode
Octopus20772 小时前
【C++】读取数量不定的输入数据
开发语言·c++·笔记·学习
Lostgreen2 小时前
计算机网络----基本概念
网络·笔记·学习·计算机网络
孤邑2 小时前
【Linux】网络通信
linux·服务器·网络·笔记·学习
Hacker_xingchen2 小时前
Web 学习笔记 - 网络安全
前端·笔记·学习
就是有点傻2 小时前
C#中面试的常见问题006
开发语言·面试·c#·wpf
青い月の魔女2 小时前
数据结构初阶---复杂度
c语言·数据结构·笔记·学习·算法
坚硬果壳_2 小时前
《硬件架构的艺术》笔记(九):电磁兼容性能设计指南
笔记·硬件架构