浅谈WPF之MVVM工具包

在之前的WPF示例中,都会用到一个MVVM框,也是一个比较常的MVVM框架,就是MVVM工具包【CommunityToolkit.Mvvm】,今天专门以一个简单的小例子,简述一下MVVM工具包的常见用法,仅供学习分享使用,如有不足之处,还请指正。

什么是MVVM工具包?

CommunityToolkit.Mvvm 包(又名 MVVM 工具包)是一个现代、快速和模块化的 MVVM 库。 MVVM工具包是 .NET 社区工具包的一部分,围绕以下原则生成:

  • 独立于平台和运行时 - .NET Standard 2.0、.NET Standard 2.1 和 .NET 6🚀(与 UI 框架无关)
  • 易于选取和使用 - 对应用程序结构或编码范例(“MVVM”之外)没有严格的要求,也就是可以灵活使用。
  • 按需取用 - 自由选择要使用的组件。
  • 引用实现 - 精简且高效,为基类库中包含的接口提供实现,但缺少直接使用它们所需的具体类型。

MVVM 工具包由 Microsoft 维护和发布,是 .NET Foundation 的一部分。

安装MVVM工具包

在Visual Studio 开发工具中,可以通过NuGet包管理器进行安装。点击项目右键,选择“管理NuGet程序包”,打开NuGet管理窗口,然后搜索“CommunityToolkit.Mvvm”,进行安装即可,目前最新版本为8.2.2 。如下所示:

可观测对象ObservableObject

可观测对象ObservableObject,实现了 INotifyPropertyChanged 和 INotifyPropertyChanging 接口,是MVVM工具包实现的可观测对象的基类。如果某些类中的属性需要具备变更通知功能,则可能继承此类,如ViewModel或者Model等。主要分两个步骤:

1. 模型类继承ObservableObject,即拥有了基类具有的方法和属性。

2. 将传统属性的set方法中字段=value,修改为SetProperty(ref 字段名,value)。

以Student为例,如下所示:

 
using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace DemoMVVM.Models
{
public class Student:ObservableObject
{
private int id;
public int Id
{
get { return id; }
set {SetProperty(ref id , value); }
}
private string name;
public string Name
{
get { return name; }
set { SetProperty(ref name , value); }
}
}
}

命令RelayCommand

RelayCommand是ICommand的实现,可以向ViewModel中的方法公开委托,从而可以包装标准的方法或者Lamada表达式。如下所示:

 
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using DemoMVVM.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;
namespace DemoMVVM.ViewModels
{
public class MainWindowViewModel:ObservableObject
{
private Student student;
public Student Student
{
get { return student; }
set { student = value; }
}
public MainWindowViewModel()
{
student = new Student();
}
private ICommand saveCommand;
public ICommand SaveCommand=>saveCommand??=new RelayCommand(Save);
private void Save()
{
MessageBox.Show($"需要保存的信息为Id={Student.Id},Name={Student.Name}!");
}
}
}

控制反转Ioc

使用MVVM模式进行开发,最重要的目的是为了解耦,其中常见的方式就是通过依赖注入的方式实现控制反转,进而实现解耦。目前来说,MVVM工具包并未实现此功能,因为已经有专门的API来实现,如:Microsoft.Extensions.DependencyInjection。

首先安装依赖注入的库【Microsoft.Extensions.DependencyInjection】,当前最新,通过NuGet包管理器进行安装,如下所示:

在App启动程序中,创建IServiceProvider对像,并初始化注入ViewModel,如下所示:

 
using DemoMVVM.ViewModels;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;
namespace DemoMVVM
{
/// <summary>
/// Interaction logic for App.xaml
/// </summary>
public partial class App : Application
{
public IServiceProvider ServiceProvider { get; private set; }
public new static App Current => (App)Application.Current;
public App()
{
ServiceProvider=ConfigurationServices();
}
private static IServiceProvider ConfigurationServices()
{
var services = new ServiceCollection();
services.AddTransient<MainWindowViewModel>();
return services.BuildServiceProvider();
}
}
}

在视图类中,进行获取对应的服务即可,如下所示:

 
using DemoMVVM.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace DemoMVVM
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = App.Current.ServiceProvider.GetService(typeof(MainWindowViewModel));
}
}
}

以上就实现了控制反转,将对象的创建与释放,交到容器去处理,而不是由视图去做。

视图数据绑定

因为视图的DataContext和ViewModel对象是同一个,所以在UI视图中,只需要对控件进行数据绑定即可,如下所示:

 
<Window x:Class="DemoMVVM.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:DemoMVVM"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="400">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.6*"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="编号" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="10"></TextBlock>
<TextBox Text="{Binding Student.Id}" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="130" Height="35" Margin="10" VerticalContentAlignment="Center"></TextBox>
<TextBlock Text="姓名" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Right" Margin="10"></TextBlock>
<TextBox Text="{Binding Student.Name}" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="130" Height="35" Margin="10" VerticalContentAlignment="Center"></TextBox>
<Button Content="保存" Command="{Binding SaveCommand}" Grid.Row="2" Grid.ColumnSpan="2" HorizontalAlignment="Center" Height="30" Width="120"></Button>
</Grid>
</Window>

示例演示

经过上述步骤,就实现了MVVM模式的数据绑定和命令调用,如下所示

 

参考文档

在本实例中,只是简单介绍了MVVM工具包的使用,如若想具体了解更详细内容,可参考官方文档,

1. MVVM工具包:https://learn.microsoft.com/zh-cn/dotnet/communitytoolkit/mvvm/

2. 依赖注入:https://learn.microsoft.com/zh-cn/dotnet/core/extensions/dependency-injection

以上就是【浅谈WPF之MVVM工具包】的全部内容,旨在抛砖引玉,一起学习,共同进步。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/770459.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

选项式API和组合式API的区别

选项式(options) API 和组合式(composition) API两种不同的风格书写&#xff0c;Vue3 的组件可以使用这两种api来编写。 选项式API和组合式API的区别 选项式API 选项式 API&#xff0c;具有相同功能的放在一起&#xff0c;可以用包含多个选项的对象来描述组件的逻辑&…

WPF---1.入门学习

学习来源 布局 wpf布局原则 一个窗口中只能包含一个元素 不应显示设置元素尺寸 不应使用坐标设置元素的位置 可以嵌套布局容器 StackPanel-->表单条件查找布局 DataGrid wpf布局容器 StackPanel: 水平或垂直排列元素&#xff0c;Orientation属性分别: Horizontal / Vertic…

Java数据结构-ArrayList

目录 1. 初识集合框架2. ArrayList的介绍3. ArrayList的使用3.1 构造方法3.2 add3.3 addAll3.4 remove3.5 get3.6 set3.7 contains3.8 IndexOf3.9 lastIndexOf3.10 subList 4. ArrayList的遍历4.1 简单粗暴法4.2 循环遍历法4.3 迭代器 1. 初识集合框架 Java集合框架是Java编程…

基于OneAPI+ChatGLM3-6B+FastGPT搭建LLM大语言模型知识库问答系统

搭建大语言模型知识库问答系统 部署OneAPI部署一个LLM模型部署嵌入模型部署FastGPT新建FastGPT对话应用新建 FastGPT 知识库应用 部署OneAPI 拉取镜像 docker pull justsong/one-api创建挂载目录 mkdir -p /usr/local/docker/oneapi启动容器 docker run --name one-api -d …

粘包/半包及解决方案

一、粘包/半包介绍 1&#xff1a;粘包 粘包&#xff08;Packet Concatenation&#xff09;通常发生在基于流式传输协议&#xff08;如 TCP&#xff09;的通信中&#xff0c;因为 TCP 是面向流的传输协议&#xff0c;它不保证数据包的边界&#xff0c;而是将数据视为连续的字节…

密码学及其应用1 —— 密码学概述

1 密码学的基本概念 1.1 网络安全的定义 网络安全是网络领域的一个专业领域&#xff0c;它涵盖了在基础计算机网络基础设施中所采取的措施、网络管理员为保护网络及网络可访问资源免受未授权访问而采纳的政策&#xff0c;以及对其有效性&#xff08;或无效性&#xff09;的持续…

2024年2月线上助听器综合电商(京东天猫淘宝)热销排行榜

鲸参谋监测的综合电商平台&#xff08;京东天猫淘宝&#xff09;2月份助听器品牌销量销额排行榜已揭晓&#xff01; 根据鲸参谋电商大数据显示&#xff0c;2月助听器在综合电商平台销量约为19万&#xff0c;环比上个月下滑了2%&#xff0c;同比去年下滑了25%&#xff1b;销售额…

基于nodejs+vue发艺美发店管理系统python-flask-django-php

系统根据现有的管理模块进行开发和扩展&#xff0c;采用面向对象的开发的思想和结构化的开发方法对发艺美发店管理的现状进行系统调查。采用结构化的分析设计&#xff0c;该方法要求结合一定的图表&#xff0c;在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”的…

javaSwing愤怒的小鸟游戏

一、简介 游戏名称是“愤怒的小鸟”&#xff0c;英文称为“AngryBird”。 “愤怒的小鸟”是著名游戏公司Rovio偶然间开发出来的益智游戏&#xff0c;从2009年12月上市到iOS。&#xff0c;讲述了鸟类和猪因为猪偷鸟蛋反生的一系列故事。游戏的类型版本是横向版本的水平视角&…

6、运行时数据区

Java虚拟机在运行Java程序过程中管理的内存区域&#xff0c;称之为运行时数据区。《Java虚拟机规范》中规定了每一部分的作用。 3.1 程序计数器 程序计数器&#xff08;Program Counter Register&#xff09;也叫PC寄存器&#xff0c;每个线程会通过程序计数器记录当前要执行的…

opencv各个模块介绍(1)

Core 模块&#xff1a;核心模块&#xff0c;提供了基本的数据结构和功能。 常用的核心函数&#xff1a; cv::Mat&#xff1a;表示多维数组的数据结构&#xff0c;是OpenCV中最常用的类之一&#xff0c;用于存储图像数据和进行矩阵运算。 cv::Scalar&#xff1a;用于表示多通道…

网络分层协议和应用模型

分层模型 五层网络模型 MAC地址跟IP地址的区别&#xff1a;MAC地址是唯一的&#xff0c;相当于每个人的指纹&#xff0c;出生时就是唯一的&#xff1b;IP地址就相当于是你当前的住址&#xff0c;是会发生变化的&#xff0c;但是是动态唯一的。 应用层协议 URL URL&#xff…

基于Colab训练的yolov4-tiny自定义数据集(可用于OpenCV For Unity)

参考资料文档和视频。 1.打开文档,点击【文件】【在云端硬盘中保存一份副本】,即将文档复制到自己云端硬盘。 2.打开该文件,按文中提示进行。 【代码执行程序】【更改运行时类型】修改运行时为GPU(免费的GPU不好用,收费的好用,某宝上几十元就可用一个月) 步骤1) !git…

如何调用occtproxy放入自己的wpf文件

1.创建一个wpf程序 2.添加项目occtproxy.vcxproj 3.把该项目配置类型设为dll 4.添加引用 5.报错显示&#xff0c;这是因为还没有生成dll 6.把occtproxy设为启动项目运行&#xff0c;设定输出目录在该目录下&#xff0c;生成dll 7.再运行&#xff0c;即可

一文整合工厂模式、模板模式、策略模式

为什么使用设计模式 今天终于有时间系统的整理一下这几个设计模式了&#xff0c; 这几个真是最常用的&#xff0c;用好了它们&#xff0c;你就在也不用一大堆的if else 了。能更好的处理大量的代码冗余问题。 在我们的实际开发中&#xff0c;肯定会有这样的场景&#xff1a;我…

2024年云仓酒庄新动态:铸就新篇章

原标题&#xff1a;刘总出席成都糖酒会&#xff1a;信任铸就云仓酒庄新篇章&#xff0c;共襄盛举展未来近日&#xff0c;备受瞩目的成都糖酒会盛大开幕&#xff0c;吸引了来自全国各地的业界精英和代表。在这场盛大的行业盛会上&#xff0c;云仓酒庄的刘总亲临现场。 现场&…

以XX大学校园为例的智慧能源管理系统建设方案【能源物联网+智能微电网数字校园、节能校园、低碳校园】

建设背景 贯彻落实《中共中央 国务院关于完整准确全面贯彻新发展理念做好碳达峰碳中和工作的意见》和《国务院关于印发2030年前碳达峰行动方案的通知》要求&#xff0c;把绿色低碳发展纳入国民教育体系。 2021年3月26日为推动信息技术与教育教学深度融合&#xff0c;教育部印…

2.6 IDE(集成开发环境)是什么

IDE&#xff08;集成开发环境&#xff09;是什么 IDE 是 Integrated Development Environment 的缩写&#xff0c;中文称为集成开发环境&#xff0c;用来表示辅助程序员开发的应用软件&#xff0c;是它们的一个总称。 通过前面章节的学习我们知道&#xff0c;运行 C 语言&…

eclipse导入svn项目

1、配置maven 2、用svn引入项目 3一直点击next,到最后选完成。

基于springboot的房屋租赁管理系统+数据库+免费远程调试

项目介绍: 基于springboot的房屋租赁管理系统。Javaee项目&#xff0c;springboot项目&#xff0c;采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringBoot JspMaven来实现。MyS…