Avalonia中如何将View事件映射到ViewModel层

news/2025/2/13 18:52:36/

前言

前面的文章里面我们有介绍在Wpf中如何在View层将事件映射到ViewModel层的文章,传送门,既然WPF和Avalonia是两套不同的前端框架,那么WPF里面实现模式肯定在这边就用不了,本篇我们将分享一下如何在Avalonia前端框架下面将事件映射到ViewModel层。本章内容还是在上一节的基础上做扩展讲解。Avalonia中使用Prism实现区域导航功能

安装行为扩展

在Avalonia框架下面有它自己的行为扩展,我们需要借助这些扩展库里面的行为扩展来实现我们今天要讲解的功能。

dotnet add package Avalonia.Xaml.Behaviors --version 11.0.5

编写View层的代码

我们先来一个简单的页面加载事件的触发,View层代码如下:

<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:prism="http://prismlibrary.com/"xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"xmlns:ia="clr-namespace:Avalonia.Xaml.Interactions.Core;assembly=Avalonia.Xaml.Interactions"prism:ViewModelLocator.AutoWireViewModel="True"mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"x:Class="AvaloniaTest.Views.ViewB" Background="Green"><i:Interaction.Behaviors><ia:EventTriggerBehavior EventName="Loaded"><ia:InvokeCommandAction Command="{Binding OnLoad}"></ia:InvokeCommandAction></ia:EventTriggerBehavior></i:Interaction.Behaviors><StackPanel><TextBlock Text="{Binding Title}"></TextBlock></StackPanel>
</UserControl>

在这里插入图片描述

             xmlns:i="clr-namespace:Avalonia.Xaml.Interactivity;assembly=Avalonia.Xaml.Interactivity"xmlns:ia="clr-namespace:Avalonia.Xaml.Interactions.Core;assembly=Avalonia.Xaml.Interactions"

这段代码的意思是在头部引入了事件行为用到的两个命名空间Avalonia.Xaml.Interactivity和Avalonia.Xaml.Interactions。

  <i:Interaction.Behaviors><ia:EventTriggerBehavior EventName="Loaded"><ia:InvokeCommandAction Command="{Binding OnLoad}"></ia:InvokeCommandAction></ia:EventTriggerBehavior></i:Interaction.Behaviors>

这段代码的意思是我们给Interactivity的Interaction.Behaviors属性赋值,这里面我们用到了Avalonia.Xaml.Interactions里面的EventTriggerBehavior,字面意思是“事件触发行为”,我们设置EventName属性为Loaded,这个是axalm的前端加载事件名称。

编写ViewModel层的代码

using Prism.Commands;
using Prism.Regions;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace AvaloniaTest.ViewModels
{public class ViewBViewModel : ViewModelBase, INavigationAware{private string _title = "ViewB";public string Title{get => _title;set{SetProperty(ref _title, value);}}public bool IsNavigationTarget(NavigationContext navigationContext){return true;}public void OnNavigatedFrom(NavigationContext navigationContext){}public void OnNavigatedTo(NavigationContext navigationContext){}private DelegateCommand _onLoad;public DelegateCommand OnLoad => _onLoad ?? (_onLoad=new DelegateCommand(() => {Debug.WriteLine("OnLoad is run!");}));}
}

相比较上一篇的内容,其实就多了一个命令属性OnLoad
在这里插入图片描述

运行程序查看效果,果然在导航页面加载的时候会进入该方法,完美。
在这里插入图片描述


http://www.ppmy.cn/news/1264097.html

相关文章

服务器数据损坏了有办法修复吗 ?

对于企业网站来说&#xff0c;数据库往往是服务器中最核心的部分&#xff0c;所以一旦数据库发生损坏&#xff0c;将会给企业带来巨大的损失&#xff0c;因 此数据库的数据恢复功能变得越来越重要了。在服务器运行过程中&#xff0c;由于断电、操作不当或者是客观原因损坏到服务…

(一)五种最新算法(SWO、COA、LSO、GRO、LO)求解无人机路径规划MATLAB

一、五种算法&#xff08;SWO、COA、LSO、GRO、LO&#xff09;简介 1、蜘蛛蜂优化算法SWO 蜘蛛蜂优化算法&#xff08;Spider wasp optimizer&#xff0c;SWO&#xff09;由Mohamed Abdel-Basset等人于2023年提出&#xff0c;该算法模型雌性蜘蛛蜂的狩猎、筑巢和交配行为&…

logback整合rabbitmq实现消息记录日志

logback.xml文件配置 <!-- 配置rabbitmq的信息&#xff0c;数据取值yml --><springProperty name"rabbitmqHost" source"spring.rabbitmq.host"/><springProperty name"rabbitmqPort" source"spring.rabbitmq.port"/&g…

Tomcat使用https方式连接

Tomcat使用https方式连接 拢共分两步&#xff0c;第一步&#xff1a;生成密钥。第二步&#xff1a;修改配置。 第一步&#xff1a;生成密钥。 keytool -genkey -v -alias tomcat -keyalg RSA -validity 365 -keystore /usr/tomcat-8.5/conf/tomcat.keystore第二步&#xff1…

【动态规划】【广度优先】LeetCode2258:逃离火灾

作者推荐 本文涉及的基础知识点 二分查找算法合集 动态规划 二分查找 题目 给你一个下标从 0 开始大小为 m x n 的二维整数数组 grid &#xff0c;它表示一个网格图。每个格子为下面 3 个值之一&#xff1a; 0 表示草地。 1 表示着火的格子。 2 表示一座墙&#xff0c;你跟…

vue2+electron桌面端一体机应用

vue2+electron项目 前言:公司有一个项目需要用Vue转成exe,首先我使用vue-cli脚手架搭建vue2项目,然后安装electron 安装electron 这一步骤可以省略,安装electron-builder时会自动安装electron npm i electron 安装electron-builder vue add electron-builder 项目中多出…

设计产品原型的心得

1.避免使用多余的元件 一个能满足的&#xff0c;就别用2个&#xff0c;能用axure自带的元件&#xff0c;就不要使用控件动态面板中继器 制作元件。 2.及时命名、规范化命名 对要进行交互事件的元件和动态面板要及时命名&#xff0c;在之后的修改里会降低很大成本。另外命名也要…

Mac系统升级node.js版本和npm版本

升级node.js版本 第一步&#xff1a;查询当前node.js版本 node -v 第二步&#xff1a;清除node.js的缓存 sudo npm cache clean -f 第三步&#xff1a;验证缓存是否清空 npm cache verify 第四步&#xff1a;安装n工具&#xff0c;n工具是专门用于管理node.js版本的工具…