WPF基础系列六：MVVM框架

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的新特性糅合进去，以应对客户日益复杂的需求变化。

结构模型如下：

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

三者之间的关系： View对应一个ViewModel，ViewModel可以聚合N个Model，ViewModel可以对应多个View

2. MVVM的优势

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

• 在实际的业务场景中我们经常会遇到客户对界面提出建议要求修改，使用MVVM模式开发，当设计的界面不满足客户时，我们仅仅只需要对View作修改，不会影响到ViewModel中的功能代码，减少了犯错的机会。
• 随着功能地增加，系统越来越复杂，相应地程序中会增加View和ViewModel文件，将复杂的界面分离成局部的View，局部的View对应局部的ViewModel，功能点散落在各个ViewModel中，每个ViewModel只专注自己职能之内的事情。ViewModel包含了View要显示的数据，并且知道View的交互代码，所以ViewModel就像一个无形的View。
• 使用MVVM架构具有以下优势：

1. 易维护（低耦合），视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 灵活扩展(可重用性)，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑；
3. 易测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写
4. 独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

3.MVVM的应用场景

       使用MVVM框架的好处就是当前后端进行一些数据交互的时候，前端可以通过Ajax请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据和内容，特别是对于移动端应用场景，刷新页面的代价太昂贵，会重新加载很多资源，虽然有些资源会被缓存，但是页面的DOM、JS、CSS都会被浏览器重新解析一遍，因此，移动端页面经常会做成SPA单页应用，在这个基础上就诞生了很多MVVM框架，如Angular、React、Vue。

1. 针对具有复杂交互逻辑的前端应用
2. 提供基础的架构抽象
3. 通过Ajax数据持久化，保证前端用户体验

二、MVVM使用及示例

1. NuGet引用MVVM框架包
   
   引入该框架包之后, 默认会在目录下创建ViewModel层的示例代码
   
2. 通过在MainViewModel中创建一些业务代码, 将其与MainWindow.xaml 通过上下文的方式关联起来, 而MainWindow则是通过Binding的写法 引用业务逻辑的部分。

• 2.1. 在MainViewModel中, 添加同一个班级名称, 与学生列表, 分别用于显示在文本 和列表上展示, Command则用于绑定DataGrid的双击命令上, 通过双击, 展示点击行的学生信息：
  
  
• 2.2. 设计UI层，在XMAL文件中 添加一个文本用于显示班级名称, 添加一个DataGrid 用于展示学生列表, 同时DataGrid中添加一个绑定的命令(红色区域)
  
  关于上面红色圈的代码, 为一种绑定语法, 主要在MouseBinding中, MouseAction 以为触发的事件类型, CommandParameter 则是命令传递的参数, 也就是DataGrid选中的一行的类型 Student。Command 则是MainViewModel中定义的Command。RelativeSource FindAncestor，主要用于控件模板或可预测的自包含 UI 组合。
• 2.3. 前端的绑定工作已经设置好, 后台的代码也添加完成, 目前只需要将MainViewModel 与MainWindow 通过MainWindow的DataContext关联即可
  
  运行效果：
  

---

RaisePropertyChanged() 实现动态通知更新

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

2. 添加一个无参数的UpdateCommand , 并设置为 UpdateText 手动把ClassName更新为 “高三三班”:
   

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

运行效果：

---

文章参考来源：
链接: C#架构设计-MVVM
链接: WPF自学入门.
链接: MVVM模式简介.
链接: WPF-MVVM框架.