像 MvvmLight 一样使用 CommunityToolkit.Mvvm 工具包

news2024/9/20 14:33:29

文章目录

简介
一、安装工具包
二、实现步骤
- 1.按照MvvmLight 的结构创建对应文件夹和文件
- 2.编辑 ViewModelLocator
- 3.引用全局资源
二、使用详情
- 1.属性
- 2.命令
- 3. 消息通知
- 4. 完整程序代码展示
运行结果

简介

CommunityToolkit.Mvvm 包（又名 MVVM 工具包，以前称为 Microsoft.Toolkit.Mvvm）是一个现代、快速和模块化的 MVVM 库。它是 .NET 社区工具包的一部分，围绕以下原则生成：
1、独立于平台和运行时 - .NET Standard 2.0、.NET Standard 2.1 和 .NET 6（与 UI 框架无关）
2、易于选取和使用 - 对应用程序结构或编码范例（“MVVM”之外）没有严格的要求，也就是可以灵活使用。
3、按需取用 - 自由选择要使用的组件。
4、引用实现 - 精简且高效，为基类库中包含的接口提供实现，但缺少直接使用它们所需的具体类型。
MVVM 工具包由 Microsoft 维护和发布，是 .NET Foundation 的一部分。它还由几个内置于 Windows 的第一方应用程序（如 Microsoft Store）使用。
此包面向 .NET Standard，因此可在任何应用平台上使用：UWP、WinForms、WPF、Xamarin、Uno 等；并且可在任何运行时上使用：.NET Native、.NET Core、.NET Framework 或 Mono。它在所有这些平台和运行时上都可运行。 API 图面在任何情况下都相同，因此非常适合生成共享库。
此外，MVVM 工具包还有一个 .NET 6 目标，用于在 .NET 6 上运行时实现更多内部优化。在这两种情况下，公共 API 图面都是相同的，因此 NuGet 将始终解析包的最佳版本，使用者无需担心有哪些 API 可以在其平台上使用的问题。

一、安装工具包

首先创建一个WPF应用程序，这里命名为 CommunityToolkitDemo，目标框架为 .NET Framework 4.6.1 。Microsoft Visual Studio Enterprise 2022 (64 位) - 版本 17.10.4 。创建项目完成后，打开NuGet 包管理器，搜索 CommunityToolkit.Mvvm ，本例安装的是当前最新版 8.2.2 版本。如下所示：
在这里插入图片描述

二、实现步骤

1.按照MvvmLight 的结构创建对应文件夹和文件

创建 ViewModel 文件夹，创建 ViewModelLocator 文件，如下所示：
在这里插入图片描述

2.编辑 ViewModelLocator

代码如下（示例）：

 public class ViewModelLocator
 {
   
     public static IServiceProvider ServiceProvide {
    get; set; }
     public ViewModelLocator()
     {
   
         ServiceProvide = GetService();
     }

     private IServiceProvider GetService()
     {
   
         var service = new ServiceCollection();
         service.AddSingleton<MainViewModel>();
         return service.BuildServiceProvider();
     }
     public MainViewModel Main
     {
   
         get
         {
   
             return ServiceProvide.GetService<MainViewModel>();
         }
     }
 }

service.AddSingleton(); 每次新的ViewModel 就通过这里进行添加，然后在创建对应的属性名。

public MainViewModel Main
 {
   
     get
     {
   
         return ServiceProvide.GetService<MainViewModel>();
     }
 }

3.引用全局资源

在 App.xaml 中将 ViewModel 作为资源添加引用。这里做法与MvvmLight 一致。
在这里插入图片描述
做完以上工作，我们就实现了像 MvvmLight 一样使用 CommunityToolkit.Mvvm 工具包。

二、使用详情

1.属性

  [ObservableProperty]
  private string dateTimeStr;
  public string DateTimeStr
  {
   
      get {
    return dateTimeStr; }
      set
      {
   
          SetProperty(ref dateTimeStr, value);
      }
  }

2.命令

 public RelayCommand<string> ButtonClickCmd {
     get; set; }

 public MainViewModel()
 {
   
     ButtonClickCmd = new RelayCommand<string>(FunMenu);
 }

        public void FunMenu(string p)
        {
   
            switch (p)
            {
   
                case "最小化":
                    WindowMin();
                    break;
                case "最大化":
                    WindowMax();
                    break;
                case "关闭":
                    AppClose();
                    break;
                case "改变数值":
                    ChangeValue();
                    break;
            }
        }

3. 消息通知

在MainViewModel 视图中发送三个消息，分别是窗体关闭、最大化和最小化功能实现。


        private void AppClose()
        {
   
            WeakReferenceMessenger.Default.Send("MainWindowClose");
        }

        private void WindowMax()
        {
   
            WeakReferenceMessenger.Default.Send("MainWindowMax");
        }

        private void WindowMin()
        {
   
            WeakReferenceMessenger.Default.Send("MainWindowMin");
        }

在 MainWindows 中实现消息的接受与处理

 public MainWindow()
 {
   
     InitializeComponent();

     //消息注册
     RegisterMessage();
 }

 private void RegisterMessage()
 {
   
     WeakReferenceMessenger.Default.Register<string>(this,HandleMessage);
 }

 private void HandleMessage(object recipient, string message)
 {
   
     switch (message)
     {
   
         case "MainWindowClose":
             AppClose();
             break;
         case "MainWindowMax":
             MainWindowMax();
             break;
         case "MainWindowMin":
             MainWindowMin();
             break;
     }
 }

4. 完整程序代码展示

项目目录结构：
在这里插入图片描述
1、App.xaml 文件代码如下：

<Application x:Class="CommunityToolkitDemo.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:CommunityToolkitDemo" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" d1p1:Ignorable="d" xmlns:d1p1="http://schemas.openxmlformats.org/markup-compatibility/2006"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <FontFamily x:Key="iconfont">/Assets/Fonts/#iconfont</FontFamily>
            <vm:ViewModelLocator x:Key="Locator" d:IsDataSource="True" xmlns:vm="clr-namespace:CommunityToolkitDemo.ViewModel"/>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Assets/Styles/CommonStyleDictionary.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

2、MainWindow.xaml 文件代码如下：

<Window x:Class="CommunityToolkitDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:local="clr-namespace:CommunityToolkitDemo" 
        mc:Ignorable="d"
        xmlns:viewmodel="clr-namespace:CommunityToolkitDemo.ViewModel" 
        d:DataContext="{d:DesignInstance Type=viewmodel:MainViewModel}"
        DataContext="{Binding Source={StaticResource Locator},Path=Main}"
        Title="MainWindow" Height="450" Width="800" Background="#2b2b2b" ResizeMode="CanResize"
        AllowsTransparency="True" WindowStyle="None" WindowStartupLocation="CenterScreen">
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/Assets/Styles/SystemButton.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Viewbox x:Name="RootViewbox" Stretch="Fill">
        <Grid x:Name="MainContent" ClipToBounds="True" Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="40"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="30"/>
            </Grid.RowDefinitions>
            <!--Grid 没有设置背景则不支持拖拽-->
            <Grid Grid.Row="0"  Background="#1F2336"