文章目录
- 相关链接
- 前言
- Avalonia相对于WPF的新特性简单介绍
- ChatGPT推荐
- [Avalonia Demo案例](#Avalonia Demo案例)
- [Avalonia 开始使用](#Avalonia 开始使用)
- [Avalonia 文件扩展名](#Avalonia 文件扩展名)
- [Avalonia Toolkit 扩展安装](#Avalonia Toolkit 扩展安装)
- [修改.net core版本](#修改.net core版本)
- Avalonia对WPF的修改
- 数据绑定
- 数据模板
- 总结
相关链接
前言
C# 上位机技术的终点有两个技术,Avalonia和Unity。Godot目前3D还是太拉了,MAUI目前也只是玩具。Avalonia是跨平台版本的WPF,而Unity是实现3D预览效果的选择。Avalonia算是上位机的终点了,我目前打算学习Avalonia+ReactiveUI
Avalonia相对于WPF的新特性简单介绍
ChatGPT推荐
因为Avalonia的中文资料实在是太少了,这里我们得用ChatGpt,而且最好是纯英文文档去学习。
比如我要搜一下【UserControl.DataContext and Design.DataContext 】在Avalonia里面使用的区别。为了顺便学一下英文,我这里也将使用纯英文的官方文档
Avalonia Demo案例
下载好了要进行编译,文件挺多的,我本地编译了10分钟左右。
Avalonia 开始使用
启动成功
Avalonia 文件扩展名
Avalonia Toolkit 扩展安装
修改.net core版本
当前日期2024年2月21日,现在新建的Avalonia的项目是.net core 7.0框架。我们将这个修改为.net core 8.0
Avalonia对WPF的修改
类CSS选择器
WPF 是没有CSS选择器的,但是Avalonia有。因为CSS有点吃性能而且容易出错样式混乱,但是CSS写起来是真的方便。
我们这里简单介绍一下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写出来。
数据源准备
实体类
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给收购了啊。