社区首页 >专栏 >WPF开发-MVVM Toolkit框架的使用

WPF开发-MVVM Toolkit框架的使用

码客说

发布于 2022-06-12 04:36:36

3.3K00

代码可运行

文章被收录于专栏：码客码客

运行总次数：0

代码可运行

前言

官方文档

https://docs.microsoft.com/zh-cn/dotnet/communitytoolkit/mvvm/

安装

在解决方案资源管理器中，右键单击项目，然后选择“管理NuGet包”。搜索 Microsoft.Toolkit.Mvvm 并安装它。

Install-Package Microsoft.Toolkit.Mvvm -Version 7.1.2

添加 using 指令以使用新 API：

using Microsoft.Toolkit.Mvvm;

这个包主要提供了如下的

Microsoft.Toolkit.Mvvm.ComponentModel
Microsoft.Toolkit.Mvvm.DependencyInjection
- Ioc
Microsoft.Toolkit.Mvvm.Input
Microsoft.Toolkit.Mvvm.Messaging
Microsoft.Toolkit.Mvvm.Messaging.Messages

可观察对象

public class UserVM : ObservableObject
{
  private string name;

  public string Name
  {
    get => name;
    set => SetProperty(ref name, value);
  }

  private int age;

  public int Age
  {
    get => age;
    set => SetProperty(ref age, value);
  }
}

页面的类中添加

public partial class MainWindow : Window
{
  private UserVM userVM = new UserVM();

  public MainWindow()
  {
    InitializeComponent();
    DataContext = userVM;
    Task.Run(() =>
             {
               while (true)
               {
                 userVM.Age += 1;
                 Thread.Sleep(1000);
               }
             });
  }
}

页面中

<Grid>
  <StackPanel>
    <TextBlock FontSize="30" Text="{Binding Age}" />
  </StackPanel>
</Grid>

我们就可以看到数字就会一直递增了。

命令

页面中我们添加命令

<StackPanel Height="40" Orientation="Horizontal">
  <TextBlock FontSize="30" Text="{Binding Name}" />
  <TextBlock FontSize="30" Text="{Binding Age}" />

  <Button Command="{Binding IncrementAgeCommand}" Content="年龄递增" />
</StackPanel>

对应的ViewModel中添加命令及响应的事件

public class UserVM : ObservableObject
{
  private string name;

  public string Name
  {
    get => name;
    set => SetProperty(ref name, value);
  }

  private int age;

  public int Age
  {
    get => age;
    set => SetProperty(ref age, value);
  }

  public ICommand IncrementAgeCommand { get; }
  
  public UserVM()
  {
    IncrementAgeCommand = new RelayCommand(IncrementAge);
  }
  
  private void IncrementAge() => Age++;
}

这样只要我们点击按钮，年龄就会递增1。

消息机制

注册与发送

添加传递消息的类

public class ZMessage
{
  public int Code { get; set; }

  public string Message { get; set; }

  public ZMessage(int code, string msg)
  {
    Code = code;
    Message = msg;
  }
}

消息接收与发送

public MainWindow()
{
  InitializeComponent();
  initMessage();
}

private void initMessage()
{
  WeakReferenceMessenger.Default.Register<ZMessage>(
    this,
    (r, m) =>
    {
      Console.WriteLine("接收到信息:" + m.Message);
    }
  );

  WeakReferenceMessenger.Default.Send(new ZMessage(100, "Hello"));
}

可接收消息的类

当然我们也可以让我们的ViewModel接收消息

public class UserVM : ObservableRecipient, IRecipient<ZMessage>
{
  private string name;

  public string Name
  {
    get => name;
    set => SetProperty(ref name, value);
  }

  private int age;

  public int Age
  {
    get => age;
    set => SetProperty(ref age, value);
  }

  public UserVM()
  {
    IsActive = true;
  }

  public void Receive(ZMessage message)
  {
    Name = message.Message;
    Age = message.Code;
  }
}

这里一定要注意

要继承ObservableRecipient类，实现IRecipient<>接口。
只有设置IsActive = true;,才能接收消息。

我们还是在页面的类中发送消息

WeakReferenceMessenger.Default.Send(new ZMessage(18, "XiaoMing"));

页面也稍做修改

<StackPanel Orientation="Horizontal">
  <TextBlock FontSize="30" Text="{Binding Name}" />
  <TextBlock FontSize="30" Text="{Binding Age}" />
</StackPanel>

我们会发现页面上已经变更为我们发送消息的数据了。

控制反转(IOC)

添加依赖库Microsoft.Extensions.DependencyInjection

Install-Package Microsoft.Extensions.DependencyInjection -Version 6.0.0

创建我们要自动注入的类

加入如下是我们用户相关的服务

public interface IUserService
{
  string getUserName();
}

和

public class UserService : IUserService
{
  public string getUserName()
  {
    return "XiaoMing";
  }
}

添加注入的控制

public partial class App : Application
{
  public App()
  {
    Services = ConfigureServices();

    this.InitializeComponent();
  }

  public new static App Current => (App)Application.Current;

  public IServiceProvider Services { get; }

  private static IServiceProvider ConfigureServices()
  {
    var services = new ServiceCollection();

    services.AddSingleton<IUserService, UserService>();

    // ViewModels
    services.AddTransient<UserVM>();

    return services.BuildServiceProvider();
  }
}

其中

AddSingleton 单一实例服务
AddScoped 范围内的服务
AddTransient 暂时性服务

权重：

AddSingleton→AddTransient→AddScoped

生命周期：

AddSingleton 项目启动-项目关闭相当于静态类只会有一个每一次获取的对象都是同一个
AddScoped 请求开始-请求结束在这次请求中获取的对象都是同一个请求时创建
AddTransient 请求获取-（GC回收-主动释放）获取时创建每一次获取的对象都不是同一个

注意：

由于AddScoped对象是在请求的时候创建的所以不能在AddSingleton对象中使用甚至也不能在AddTransient对象中使用

使用

private UserVM userVM = (UserVM)App.Current.Services.GetService(typeof(UserVM));
private IUserService userService = (IUserService)App.Current.Services.GetService(typeof(IUserService));

这样是不是感觉还麻烦了

但是如果我们的ViewModel是这样的

public class UserVM : ObservableObject
{
  private string name;

  public string Name
  {
    get => name;
    set => SetProperty(ref name, value);
  }

  private int age;

  public int Age
  {
    get => age;
    set => SetProperty(ref age, value);
  }

  public ICommand IncrementAgeCommand { get; }

  public IUserService userService { get; }

  public UserVM(IUserService _userService)
  {
    userService = _userService;
    IncrementAgeCommand = new RelayCommand(IncrementAge);
  }

  private void IncrementAge() => Age++;
}