06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序

前面讲过,MVVM 架构是一种设计思想,不仅适用于WPF,MAUI,还有其他的C#开发同样都适用。而MVVM框架除了MVVM Toolkit,还有MVV MLight (停止维护),Prism等等,本章小节主要学习Toolkit.

1. MVVM Toolkit 框架特点

  • 是一种轻量级且开源免费的 MVVM 框架
  • 由微软开发维护

 2. MVVM Toolkit  常用的基本类型

  • ​ObservableObject 所有对象属性必须继承自该类型,并且提供了 SetProperty 方法,使用 SetProperty 方法自动通知前端属性发生了改变。注意,属性值不变时,该方法SetProperty 不会触发,属性值变化时才会触发。
  • RelayCommand  前端页面绑定命令的点击事件
  • AsyncRelayCommand  前端页面绑定命令的异步点击事件,返回值是Task
  • WeakReferenceMessenger 消息订阅
  • ObservableRecipient 消息订阅
  • ​IRecipient 消息订阅

 3. 接下来介绍在WPF 如何使用

3.1  新建一个WPF 项目,Nuget 搜索安装 Microsoft.Toolkit.Mvvm

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第1张图片

4. 实现一个功能,页面点击按钮时,把 TextBox 的值传到后台页面,并且把该值绑定回来前端页面中。 

  4.1 首先建一个类,继承自 ObservableObject 类

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第2张图片

1. 创建完整的属性快捷方式是输入 propfull 按两次Tab

2.  必须设置 SetProperty 方法。当属性值发生改变时,通知前端。

    原生的写法 

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第3张图片

第三方MVVM 框架中ObservableObject是实现了INotifyPropertyChanged和INotifyPropertyChanging接口基类。 所以原生写法和第三方写法原理差不太多。

4.2 在 S71200ViewModel 类中,添加一个命令,并且进行实例化。

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第4张图片

 同步方法,也可以改变异步的方式

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第5张图片

4.3 前端组件页面

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第6张图片

  1. 使用 Binding 是一种固定语法,绑定后台的属性
  2. 绑定模式,model是一个(mode)是枚举的类型,一共有5个种
    2.1 OneWay(源变就更新目标属性)
    2.2 TwoWay(源变就更新目标并且目标变就更新源)
    2.3 OneTime(只根据源来设置目标,以后都不会变)
    2.4 OneWayToSource(与OneWay相反)
    2.5 Default 默认(可以单向或双向,是靠被值定的源或目标是否有get或set来指定的)
  3. UpdateSourceTrigger属性,由于WPF中,对于TextBox,除了Text属性之外的所有属性源会随属性的改变而立即更新;但是Text属性不一样,它只有在目标元素失焦后才更新。所以要想让TextBox中的变化立即传递到源,就需要设置UpdateSourceTrigger 来控制。如果不设置该属性,后台取到的值是空值。

参考:文献1,文献2

4.4 把S71200ViewModel 与页面进行关联

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第7张图片 

4.5 测试验证,点击页面按钮时,触发该命令。

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第8张图片

 4.6 另外一种取前端页面值的方式,但这种方式与MVVM 无关,也能取到TextBox 输入的值,

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第9张图片4.7 按钮事件的原生实现

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第10张图片

 4.8 后台获取值的方式,打开.cs类文件

 4.9  Address 是TextBox定义的Name,随意起的名称。后台去获取前台输入的值。

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第11张图片

 5. 消息定阅 WeakReferenceMessenger

5.1 如何发布消息

// string 发布的消息类型
WeakReferenceMessenger.Default.Sen("发布出去的就是我");

5.2 如何订阅发布消息

5.2.1 通过匿名方法的方式订阅发布的消息

//订阅
WeakReferenceMessenger.Default.Register(this,method);
//string 就是订阅时传过来的数据类型
// this 指向当前使用的类

//订阅方法
public void method(object obj,string msg){

// msg 接受到的数据
}

注意:发布的消息类型中,如果发布的是string 类型,所有订阅了string 类型的消息,都能接收到所有发布的string 类型的消息。

5.2.2 通过指定 token 的方式发布指定的消息

WeakReferenceMessenger.Default.Send("发送的消息", "token");

5.2.3 并且订阅时只接收固定token 发布的消息

//订阅,第二个 string 就是 token
WeakReferenceMessenger.Default.Register(this,"token",method);
//string 就是订阅时传过来的数据类型
// this 指向当前使用的类

//订阅方法
public void method(object obj,string msg){

// msg 接受到的数据
}

 6. 消息定阅 ObservableRecipient,​IRecipient 

6.1 在要实现消息订阅或发布的类中,实现ObservableRecipient 类型和IRecipient  接口

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第12张图片

 6.2 当前我发布了一个string 类型的消息

WeakReferenceMessenger.Default.Sen("发布消息");

6.3 那么实现的方法就能获取到已发布的string 类型的消息

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第13张图片

注意,想要消息能被订阅,要把IsActive 赋值 为true 才行

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第14张图片

6.4 消息定阅和发布,也可以通过不同的对象进行发布和订阅。

例如,当前我这个订阅的消息,只想定阅某个类的,不想让它订阅所有的string 类型的消息

发布可以这样写

WeakReferenceMessenger.Default.Send<对象类>();

订阅可以这样指定

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第15张图片 

这样就能订阅到指定对象发布消息内容了,而不是全部都会订阅到。

 7. IOC 注入,目前这个框架没有提供,不过可以通过别的方式进行ico处理

1.为什么要用到ioc,比如当前我们要写一个数据接口供页面调数据啥的,反正就是一些接口数据服务,数据操作等等

7.1 例如,当前建立一个接口服务类,用来进行数据操作06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第16张图片

7.2 然后类里面,通过注入的方式,使用到该接口进行数据操作

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第17张图片

 7.3 如果要同上面一样,在wpf 使用ioc 注入 ,那应该要这样处理。

首先要 Nuget 安装一个库,这个库是能支持ioc 注入的库

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第18张图片 

7.4 安装完成后,需要进行初始化。主要是这种处理ioc 的库,它的生命周期必须要跟我们应用程序同步,所以需要在应用程序初始化的时候,这个ioc 容器也要初始化

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第19张图片

 7.5  初始化的方法里面,进行接口的注册的

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第20张图片

 7.6 这样写之后,由于之前使用的mvvm 中进行初始化绑定时,之前是这样子写

this.DataContext=new MainWindowViewModel();

 但现在需要改成这样子,需要把这个MainWindowViewModel 注册到ioc 容器中

06 MAUI,WPF使用 MVVM Toolkit 框架 构建 MVVM 程序_第21张图片

 然后初始化绑定时变成这样子,通过Services 来获取

this.DataContext=App.Current.Services.GetService(typeof(MainWindowViewModel));

容器初始化代码

  public partial class App : Application
    {
        public App()
        {
            Services = GetService();
        }
        public new static App Current => (App)(Application.Current);

        public IServiceProvider Services {get;}
        public static IServiceProvider GetService()
        {
            var services = new ServiceCollection();
            services.AddSingleton();
            services.AddScoped();
            return services.BuildServiceProvider();

        }
    }

内容出自:【2022全网首发】WPF应用开发中的轻型级MVVM框架-MVVM Toolkit 教程后附源码 B0560_哔哩哔哩_bilibili

建议大家还是直接看视频好,毕竟我只是记录一下学习的过程。 

你可能感兴趣的:(MAUI入门学习专栏,wpf,c#,开发语言)