MVVM框架


文章目录

  • MVVM框架
  • 前言
  • 一、MVVM框架简介
    • 1. 什么是MVVM?
    • 2. MVVM的优势
    • 3.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框架.

WPF基础系列六:MVVM框架相关推荐

  1. WPF基础系列二:控件简介

    控件简介 文章目录 控件简介 前言 一.控件 二.控件类型 三.控件详解 1.ContentControl 类 2.HeaderedContentControl 类 3.ItemsControl 类 ...

  2. 【自动化测试技术QTP基础系列六】---QTP脚本录制及回放

    QTP有普通.Analog和Low Level3三种录制模式 普通录制模式是最常用的一种录制模式 Analog录制模式,它能精确地记录下鼠标和键盘在被测试对象中的一系列操作过程,包括鼠标的移动和拖拽. ...

  3. CentOS基础系列六 :搭建DNS服务(详细图解)

    一.DNS服务介绍 DNS(Domain Name Server,域名服务器)是为了便于访问Internet而采用的一种分布式的域名→IP地址的映射查询和管理方法.用户在不知道主机IP地址而只知道主机 ...

  4. Scrum入门基础系列之Scrum起源

    Scrum入门基础系列之Scrum起源 2条回复 Scrum入门基础系列之Scrum起源 说起Scrum就不得不提Scrum之父 – Jeff Sutherland和Ken Schwaber,Jeff ...

  5. .NET Core 3 WPF MVVM框架 Prism系列之事件聚合器

    本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的使用事件聚合器实现模块间的通信 一.事件聚合器  在上一篇 .NET Core 3 WPF MVVM框架 Prism系列之模块化 ...

  6. c#事件的发布-订阅模型_NET Core 3 WPF MVVM框架 Prism系列之事件聚合器

    本文将介绍如何在.NET Core3环境下使用MVVM框架Prism的使用事件聚合器实现模块间的通信 一.事件聚合器#  在上一篇 .NET Core 3 WPF MVVM框架 Prism系列之模块化 ...

  7. WPF基础到企业应用系列8——依赖属性之“风云再起”

    一. 摘要 首先圣殿骑士很高兴"WPF 基础到企业应用系列" 能得到大家的关注.支持和认可.看到很多朋友留言希望加快速度的问题,我会尽力的,对你们的热情关注也表示由衷的感谢.这段时 ...

  8. WPF快速入门系列(8)——MVVM快速入门

    一.引言 在前面介绍了WPF一些核心的内容,其中包括WPF布局.依赖属性.路由事件.绑定.命令.资源样式和模板.然而,在WPF还衍生出了一种很好的编程框架,即WVVM,在Web端开发有MVC,在WPF ...

  9. 一起谈.NET技术,WPF 基础到企业应用系列5——WPF千年轮回2

    一,摘要 首先很高兴这个系列能得到大家的关注和支持,前端时间身体状况不适,所以暂停了更新,对此表示非常抱歉,以后会逐渐加快进度,不过由于这是一个很长的系列,我也想把它写好,所以以后也会慢慢来,在这个系 ...

  10. WPF 基础到企业应用系列2——WPF前世今生

    1.开篇前言       很多时候了解一项新技术的历史和趋势往往比这项技术的本身价值还要重要.WPF作为一项新技术(已经三年多了,或者应该叫老技术了),我们都有必要了解它的来龙去脉,尤其是公司的CTO ...

最新文章

  1. 路由器和宽带路由器故障汇总!
  2. 10版微机监测怎么显示服务器,铁路信号网络版微机监测系统的研究
  3. Linux修改终端显示前缀及环境变量
  4. NC命令行作为服务端、客户端以及win32 套接字程序的简单连接测试
  5. java web 加载类_Tomcat类加载机制
  6. HDU-1686Oulipo(kmp)
  7. restframe_work1
  8. java实现图片base64写入本地
  9. java 反编译工具=_java反编译工具(XJad)v2.2
  10. 将Excel中的信息生成奖状
  11. ffplay音视频同步
  12. Mysql如何清空数据库的单表数据 , 所有表数据
  13. java 省市县数据_Jsoup获取全国地区数据(省市县镇村)
  14. 系统集成项目管理工程师(中级)常用英语汇总
  15. MySQL多表左右连接查询
  16. 透明贴图原理--浅显易懂
  17. 手机浏览器下载IOS版APP
  18. golang 实现HTTP代理和反向代理
  19. OpenGL课程设计 光线追踪
  20. 使用BMFont工具来精简字体库

热门文章

  1. 浏览班级为计算机的同学记录的命令,2011年全国计算机等级考试二级VFP笔记(4)...
  2. Lunar Pro for Mac v5.2.2 – 实用的外接显示器屏幕亮度调节工具
  3. 手把手教你快速搭建Struts2框架【详细教程,建议收藏】
  4. 【GD32F407】 读写内部flash函数
  5. Server 2012 R2 安装 Microsoft Windows CredSSP 远程执行代码漏洞补丁
  6. 基于YOLO的实时目标检测。包括Windows平台运行演示软件、模型网络和结构、模型推理和封装原始代码。
  7. 总管家云CRM 解除业务员的后顾之忧
  8. QQ浏览器计算机未安装flash,Win8提示计算机没有安装Flash播放器怎么办
  9. PCB的IPC标准是什么
  10. 【稀饭】react native 系列教程之已有项目接入React Native