文章目录
- 相关链接
- 前言
- Avalonia相对于WPF的新特性简单介绍
- ChatGPT推荐
- Avalonia Demo案例
- Avalonia 开始使用
- Avalonia 文件扩展名
- Avalonia Toolkit 扩展安装
- 修改.net core版本
- Avalonia对WPF的修改
- 类CSS选择器
- Style的定义
- 简单代码
- 数据绑定
- 直接绑定
- UserControl.DataContext和Design.DataContext的区别
- 数据模板
- 数据源准备
- 实体类
- 数据源
- 普通模板
- 改成样式Styles
- 总结
相关链接
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给收购了啊。