MVVM框架

在WPF开发中,经典的编程模式是MVVM,是为WPF量身定做的模式,该模式充分利用了WPF的数据绑定机制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI显示和逻辑代码的耦合度,如需要更换界面时,逻辑代码修改很少,甚至不用修改。
与WinForm开发相比,我们一般在后置代码中会使用控件的名字来操作控件的属性来更新UI,而在WPF中通常是通过数据绑定来更新UI;在响应用户操作上,WinForm是通过控件的事件来处理,而WPF可以使用命令绑定的方式来处理,耦合度将降低。
一、MVVM框架简介
1. 什么是MVVM?
MVVM是Model-View-ViewModel的简写。微软的WPF(Windows Presentation Foundation–微软推出的基于Windows 的用户界面框架)带来了新的技术体验, 使得软件UI层更加细节化、可定制化。
与此同时,在技术层面,WPF也带来了 诸如Binding(绑定)、Dependency Property(依赖属性)、Routed Events(路由事件)、Command(命令)、DataTemplate(数据模板)、ControlTemplate(控制模板)等新特性。
MVVM模式其实是MVP模式与WPF结合的应用方式时发展演变过来的一种新型架构模式。它立足于原有MVP框架并且把WPF的新特性糅合进去,以应对客户日益复杂的需求变化。
结构模型如下:
《MVVM框架》

Model: 就是系统中的对象,可包含属性和行为(就是一个class,是对现实中事物的抽象,开发过程中涉及到的事物都可以抽象为Model,例如客户,客户的姓名、编号、电话、住址等);
View: 就是用xaml实现的界面,负责与用户交互,接收用户输入,把数据展现给用户;
ViewModel: 是一个C#类,负责收集需要绑定的数据和命令,聚合Model对象,通过View类的DataContext属性绑定到View,同时也可以处理一些UI逻辑。显示的数据对应着ViewMode中的Property,执行的命令对应着ViewModel中的Command。
三者之间的关系: View对应一个ViewModel,ViewModel可以聚合N个Model,ViewModel可以对应多个View

  1. MVVM的优势
    MVVM的根本思想就是界面和业务功能进行分离,View的职责就是负责如何显示数据及发送命令,ViewModel的功能就是如何提供数据和执行命令。各司其职,互不影响。

在实际的业务场景中我们经常会遇到客户对界面提出建议要求修改,使用MVVM模式开发,当设计的界面不满足客户时,我们仅仅只需要对View作修改,不会影响到ViewModel中的功能代码,减少了犯错的机会。
随着功能地增加,系统越来越复杂,相应地程序中会增加View和ViewModel文件,将复杂的界面分离成局部的View,局部的View对应局部的ViewModel,功能点散落在各个ViewModel中,每个ViewModel只专注自己职能之内的事情。ViewModel包含了View要显示的数据,并且知道View的交互代码,所以ViewModel就像一个无形的View。
使用MVVM架构具有以下优势:
易维护(低耦合),视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的”View”上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
灵活扩展(可重用性),可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑;
易测试,界面向来是比较难于测试的,而现在测试可以针对ViewModel来写
独立开发,开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用Expression Blend可以很容易设计界面并生成xml代码。
3.MVVM的应用场景
使用MVVM框架的好处就是当前后端进行一些数据交互的时候,前端可以通过Ajax请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据和内容,特别是对于移动端应用场景,刷新页面的代价太昂贵,会重新加载很多资源,虽然有些资源会被缓存,但是页面的DOM、JS、CSS都会被浏览器重新解析一遍,因此,移动端页面经常会做成SPA单页应用,在这个基础上就诞生了很多MVVM框架,如Angular、React、Vue。

针对具有复杂交互逻辑的前端应用
提供基础的架构抽象
通过Ajax数据持久化,保证前端用户体验
二、MVVM使用及示例
NuGet引用MVVM框架包
《MVVM框架》

引入该框架包之后, 默认会在目录下创建ViewModel层的示例代码
《MVVM框架》

通过在MainViewModel中创建一些业务代码, 将其与MainWindow.xaml 通过上下文的方式关联起来, 而MainWindow则是通过Binding的写法 引用业务逻辑的部分。
2.1. 在MainViewModel中, 添加同一个班级名称, 与学生列表, 分别用于显示在文本 和列表上展示, Command则用于绑定DataGrid的双击命令上, 通过双击, 展示点击行的学生信息:
《MVVM框架》

2.2. 设计UI层,在XMAL文件中 添加一个文本用于显示班级名称, 添加一个DataGrid 用于展示学生列表, 同时DataGrid中添加一个绑定的命令(红色区域)

关于上面红色圈的代码, 为一种绑定语法, 主要在MouseBinding中, MouseAction 以为触发的事件类型, CommandParameter 则是命令传递的参数, 也就是DataGrid选中的一行的类型 Student。Command 则是MainViewModel中定义的Command。RelativeSource FindAncestor,主要用于控件模板或可预测的自包含 UI 组合。
2.3. 前端的绑定工作已经设置好, 后台的代码也添加完成, 目前只需要将MainViewModel 与MainWindow 通过MainWindow的DataContext关联即可
《MVVM框架》

运行效果:
《MVVM框架》

RaisePropertyChanged() 实现动态通知更新
《MVVM框架》

通过set访问器更新ClassName的同时, 调用RaisePropertyChanged 方法, 界面刷新更新后的值;

添加一个无参数的UpdateCommand , 并设置为 UpdateText 手动把ClassName更新为 “高三三班”:
《MVVM框架》

UI层添加一个简单按钮, 绑定后台的UpdateCommand命令

    原文作者:Stupid·XL
    原文地址: https://blog.csdn.net/weixin_44570955/article/details/124072276
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞