AvaloniaUI的学习

lishuangquan1987

已于 2024-08-23 00:15:55 修改

阅读量1.3k

点赞数 16

文章标签： Avalonia ui

于 2024-07-25 22:24:14 首次发布

本文链接：https://blog.csdn.net/lishuangquan1987/article/details/140698162

版权

IDE选择

VS2022
VSCode
Rider

以上三种我都尝试过，体验Rider最好。VS2022的提示功能不好，VSCode太慢，只有Rider的觉得体验跟VS2022开发WPF差不多
总上所述，我选择Rider

Rider配置

安装`Avalonia`模板

安装Avalonia模板：

dotnet new install Avalonia.Templates

在这里插入图片描述

查看已经安装的模板：

dotnet new list

这样新建项目的时候，才能选择Avalonia模板：
在这里插入图片描述

安装`AvaloniaRider`插件

下载好Rider后，需要安装插件AvaloniaRider插件：
在这里插入图片描述

创建项目

创建项目时可以选择这几种模板：
在这里插入图片描述
其中Avalonia Cross Platform Application是Avalonia 11中增加的对移动端（Android和IOS）的支持模板。我们就选择这个。创建完毕后，项目结构大致是这样的：

可以看到有Andriod/Browser/Desktop/IOS的支持。
其中Desktop可以在Windows和Linux上运行。

运行项目

创建好项目之后，等待Nuget自动还原
我改了一下MainView.axaml:

<Grid Background="Blue">
     <Image Source="avares://Avalonia_Test/Assets/avalonia-logo.ico"></Image>
     <TextBlock Text="{Binding Greeting}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
 </Grid>

运行Desktop项目

启动的地方选择带有Desktop的，点击启动
在这里插入图片描述
如果没有什么其他的问题的话，应该很快就能启动了：

运行Andriod项目

运行Android项目之前，需要安装Andriod SDK以及安卓模拟器

安装Android SDK

打开菜单：文件->设置
进入到设置界面，选择语言和框架->Android SDK
点击Edit按钮，进入选择SDK界面，然后勾选要安装的SDK

在这里插入图片描述

安装Andriod 模拟器

此功能需要借助Visual Studio 2022
使用VS2022打开我们刚刚新建的工程：
打开菜单：工具->Android->Android 设备管理器
点击新建按钮，即可增加一个安卓模拟器，我这里是已经增加过了，可以增加多个
在这里插入图片描述

增加后，把它启动起来，然后Rider那里就能看到了。如果没有启动的话，Rider可能启动失败。

在这里插入图片描述

常见问题

1.找不到 Android SDK 目录。

报错详细信息：Xamarin.Android.Tooling.targets(70,5): Error XA5300 : 找不到 Android SDK 目录。按照以下说明安装 Android SDK: https://aka.ms/dotnet-android-install-sdk
若要对命令行生成使用自定义 SDK 路径，请将 “AndroidSdkDirectory” MSBuild 属性设置为自定义路径。
0>------- Finished building project: Avalonia_Test.Android. Succeeded: False. Errors: 1. Warnings: 1

原因说明：安装Android SDK时，没有使用默认目录，而是自定义目录，例如我安装的就是F:\Install\Android_SDK目录。
解决办法：
增加环境变量，把AndroidSdkDirectory设置为Android SDK的安装目录，我这里是F:\Install\Android_SDK所以就设置为这个值：
在这里插入图片描述

注意：修改后要重启Rider

2.找不到 API 级别 34 的 android jar

报错详细信息：Xamarin.Android.Tooling.targets(100,5): Error XA5207 : 找不到 API 级别 34 的 android jar。这意味着未安装 API 级别 34 的 Android SDK 平台。请在 Android SDK 管理器 “工具”>“ Android”>“Android SDK 管理器”… 中安装它，或更改 Xamarin.Android 项目，使其将安装的 API 版本作为目标。(缺少 F:\Install\Android_SDK\platforms\android-34\android.jar。)
0>------- Finished building project: Avalonia_Test.Android. Succeeded: False. Errors: 1. Warnings: 1

解决方法：需要在Rider的Android SDK Mananger安装Android SDK 34,之前安装的是35版本，估计是版本太高导致的：
在这里插入图片描述
修改之后同样需要重启Rider。然后就可以运行啦：

与WPF的差异

一个控件绑定到另外一个控件的属性

<TextBox Height="30" Width="100" x:Name="tb"></TextBox>
<TextBlock Text="{Binding #tb.Text}" ></TextBlock>

列表控件中的元素绑定到ViewModel的DataContext

要实现的效果如下：点击删除操作，能移除元素
在这里插入图片描述
前端代码：

<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:Avalonia_Test.ViewModels"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Avalonia_Test.Views.MainView"
             x:DataType="vm:MainViewModel">
  <Design.DataContext>
    <!-- This only sets the DataContext for the previewer in an IDE,
         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
    <vm:MainViewModel />
  </Design.DataContext>
  <UserControl.Styles>
  </UserControl.Styles>
 <StackPanel >
     <DataGrid Name="DG" ItemsSource="{Binding Models}" IsReadOnly="True" AutoGenerateColumns="False">
         <DataGrid.Columns>
             <DataGridTextColumn Header="姓名" Binding="{Binding Name}"></DataGridTextColumn>
             <DataGridTextColumn Header="年龄" Binding="{Binding Age}"></DataGridTextColumn>
             <DataGridTemplateColumn Header="操作" Width="*">
                 <DataGridTemplateColumn.CellTemplate>
                     <DataTemplate>
                         <HyperlinkButton Content="删除" Command="{Binding #DG.((vm:MainViewModel)DataContext).DeleteCmd}" 
                                          CommandParameter="{Binding}"></HyperlinkButton>
                     </DataTemplate>
                 </DataGridTemplateColumn.CellTemplate>
             </DataGridTemplateColumn>
         </DataGrid.Columns>
     </DataGrid>
     
 </StackPanel>
     
  
</UserControl>

后端代码：

public partial class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        DeleteCmd = new RelayCommand<DataGridModel>(Delete);
    }

    private void Delete(DataGridModel? obj)
    {
        if (this.Models.Contains(obj))
        {
            this.Models.Remove(obj);
        }
    }

    [ObservableProperty] private string _greeting = "Welcome to Avalonia!";
    public ObservableCollection<DataGridModel> Models { get; } = new ObservableCollection<DataGridModel>()
    {
        new DataGridModel(){Name = "tony1",Age = 10},
        new DataGridModel(){Name = "tony2",Age = 20},
        new DataGridModel(){Name = "tony3",Age = 30},
        new DataGridModel(){Name = "tony4",Age = 40},
    };

    public RelayCommand<DataGridModel> DeleteCmd { get; }
}

其中关键的一句<HyperlinkButton Content="删除" Command="{Binding #DG.((vm:MainViewModel)DataContext).DeleteCmd}" CommandParameter="{Binding}">
将命令绑定到ViewModel的DeleteCmd。