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给收购了啊。

相关推荐
咔叽布吉1 小时前
【论文阅读笔记】CamoFormer: Masked Separable Attention for Camouflaged Object Detection
论文阅读·笔记·目标检测
johnny2331 小时前
《大模型应用开发极简入门》笔记
笔记·chatgpt
亦枫Leonlew1 小时前
微积分复习笔记 Calculus Volume 1 - 4.7 Applied Optimization Problems
笔记·数学·微积分·1024程序员节
小肥象不是小飞象1 小时前
(六千字心得笔记)零基础C语言入门第八课——函数(上)
c语言·开发语言·笔记·1024程序员节
星LZX1 小时前
WireShark入门学习笔记
笔记·学习·wireshark
冷眼Σ(-᷅_-᷄๑)2 小时前
WPF缩放动画和平移动画叠加后会发生什么?
wpf·动画
努力变厉害的小超超3 小时前
ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染
笔记·鸿蒙
△曉風殘月〆4 小时前
WPF MVVM入门系列教程(二、依赖属性)
c#·wpf·mvvm
aloha_7897 小时前
从零记录搭建一个干净的mybatis环境
java·笔记·spring·spring cloud·maven·mybatis·springboot
dsywws8 小时前
Linux学习笔记之vim入门
linux·笔记·学习