WPF中的MVVM模式

最新推荐文章于 2024-06-13 14:50:45 发布
最新推荐文章于 2024-06-13 14:50:45 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 软件产品设计 文章标签： wpf binding command button mvc 单元测试
"设计模式"这样的话题似乎快被园子里的兄弟们写透了, 从简单的工厂到 MVC, MVP.  而关于MVVM似乎谈论得相对少些, 今天简单地说说. 值得声明的是: 这里仅仅谈论得是自己对别人发明的东西的一些理解, 可能有所偏误, 望理解. 另外, 搜索了一下,园子里 " clingingboy" 和 " 高阳"大哥也谈到了这个模式, 大家不妨参考一下.
在阅读以下内容以前,建议你对这些内容有所了解: WPF, MVC, MVP, MVVM. 关于MVVM语法层面的内容请参考这里: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx

1, 前提
可以说MVVM是专为WPF打造的模式, 也可以说MVVM仅仅是MVC的一个变种, 但无论如何, 就实践而言, 如果你或你的团队没有使用"Binding"的习惯, 那么研究MVVM就没有多大意义.
另外,个人觉得, 使用Command以及打造一种合理的简化的方式去使用Command也与使用Binding一样重要.

2, 诞生
为了解决现实世界中的问题,我们需要将现实世界中的事物加以抽象, 然后得到了Domain Object, 无论贫血的还是富血的, 我们都可以简单地把他们归结为"由现实世界抽象出来的模型", 也就是我们的model, 也就M-V-VM中的"M".
但其无法与我们的用户进行交互, 所以, 我们需要为其创建一个界面(视图, View), 该视图可以与用户输入设备进行交互, 这很棒, 但问题是如何将View与我们的model关联起来? Binding便可以发挥作用了, 比如视图上的某一个文本框中的文本和Model中的"用户名"关联起来, 用户便可以通过操作该文本框来访问和修改Model的"用户名"了.
这是极其简单的情况, 但实际编程时我们发现, Model中的属性(与方法)往往不那么容易与View中的界面控件关联起来, 比如, "类型不匹配": 界面控件所需要的类型与模型中属性提高的类型不匹配. "需要额外操作": 模型中的数据需要经过一些额外的处理才能传给视图,反之亦然.  此时, 我们意识到View似乎需要一个"Helper"类来处理一些额外工作.
这个helper所包含的代码可以放在除了Model外的很多地方(我们现在不考虑贫血富血之类的争论), 比如View中, 记得自己刚学习窗体程序开发时就是这么干的, 将绝大多数处理逻辑放在那个所谓的CodeBehind中. 后来,正如大家在各种设计模式书籍中所看到的一样,为了将View和Model剥离开来,实现view可替换(比如你可以讲自己精心设计的软件同时运行于窗体程序,Web甚至Mobile上), 便有了MVC. 有了MVC以后似乎就开始滋生M-V-XXX之类的争论与变种模型, 比如MVP以及这里的MVVM,甚至MVP也有着Supervising Controller与Presentation Model两种方式. 但主要围绕两个问题,一是model与view之间的关系, 完全隔离的?单向的还是双向的? 二是这个"XXX"需要完成哪些功能,简单流程调度?复杂规则处理? OK,这些争论都没有关系, 是否采用某种模式取决于你的开发所处的环境(比如语言特性,框架特性)以及你的业务特性以及所面临的主要变化点等等.
但与MVC,MVP所不同的是,MVVM的引入不仅仅是技术上的原因(解除耦合应对变化等老生常谈),另外一个很大原因是:软件团队开发方式的改变.如果你做过一段时间的WPF项目开发的话,你可能会有比较明显的感觉:在View层打造上,如何分配程序员和美工的工作.在继续阅读之前,大家可以看看我以前的一篇文章" 在UI Designer与Developer之间". 以前我们团队采用的便是"集成模式", 我便兼职了其中的" Integrator "角色.这还不错.但说实在的,这仅仅是一个在特殊情况下不得已而为之的暂时方案,所以我们付出了很大的努力开始转向" 收割模式"了,要转向这个模式,至少需要两个基本条件:
(1)你拥有能够熟练运用Blend等工具能为程序员输出XAML的美工, 他专注于纯粹的UI/UE, 另外他还必须具有一定的"程序员"思维.以便输出的东西能很好地作为程序的一部分而运转起来,而不是仅仅"看上去"是那样的.
(2)你需要能够脱离View层但仍能编写出高质量代码的程序员.
幸运的是, 我们在努力创造条件1,并取得了很好的效果.(你可以招一个具有Flash脚本编写经验的并且有极大的学习热情的美工人员, 并对他进行Blend的相关培训). 而MVVM模式为我们实现第二个条件提供了极大的便利. 为什么MVC/MVP模式不行而MVVM可以呢? 很简单, 在MVC和MVP模式中, View层都具有很多代码逻辑, 开发View层的是程序员, 虽然UI/UE团队会做很多工作, 但这个层的"实现者"仍然是程序员. 在以前的开发中,其工作得很好, 而在WPF开发中程序员对View层的展现显得力不从心了,美工(指符合上面条件1的美工)虽然很擅长, 但他会说"可惜我不会程序".于是, 我们需要一种方式将View层的代码逻辑抽取出来,并View层很纯粹以便完全让美工去打造它.相应地, 需要将View层的相应逻辑抽取到一个代码层上,以便让程序员专注在这里.
回想一下, 我们只所以要在View(Xaml)背后写一些代码(C#), 无非是想传递一些数据以及传递数据时的数据的处理或在用户与界面控件进行交互时执行一些操作, 最简单的例子是在MVC中当界面发生交互时View去调用Controler中的某个方法, 以便将该操作的相应"指示"传递到"后台"去. 在以前的技术中, 这样的"衔接性"的代码是必须的. 而在WPF中, 则可以通过另外的技术来进行层与层之间的"衔接", 这就是"Binding" 和"Command", 以及稍后我们会提到的"AttachBehavior". 通过Binding, 我们可以实现数据的传递; 通过Command, 我们可以实现操作的调用.(AttachBehavior的作用稍后再谈). Binding和Command是可以写在XAML中的, 这样看来XAML后面对于的CS文件可以被完全抛弃或不予理会了. 这样的XAML文件正是美工所需要的. 而这些对于Binding以及Command的定义描述以及其他相关信息的代码应该放在那里呢, 当然不是View, 更不是Model, 是"ViewModel". ViewModel是为这个View所量身定制的, 它包含了Binding是所需的相关信息,比如Converter以及为View的Binding提供DataContext, 它包含了Command的定义以便View层可以直接使用, 另外,它还是一个变种的Controler, 它得负责业务流程的调度.
于是, 便有了这副图, 然后, 正如"时势造英雄"所言, MVVM就诞生了.
3, ViewModel 与 单元测试
如果你是一名正在使用MVVM模式打造软件的程序员, 那么我劝你尽快忘掉View. 你所面对的是这样一个模式"UnitTest-ViewModel-Model"(这并非一个模式, 仅仅是我为阐述观点而暂时如此表述的).
记得曾经有一个Model-View-AbstractView模式, 而MVVM中的VM实际也是一个AbstractView: the abstraction of view. 它是一个抽象的View, 具有一个View的灵魂,而不具备相应的可视化控件而已. 所以对于程序员而已, 打造这样一个抽象的VM就可以认为是完成View层的打造了.而当美工完成无数控件组成的实际的View后, 我们就可以用Binding和Command这样的黏合剂将这个抽象的View和实际的View黏合在一起了.
那么在黏合之前, 我们怎么知道自己的VM是否正常工作呢? 单元测试!
在说明对于ViewModel进行单元测试的重要性之前, 送给大家一句话: "View and Unit Test are just two different types of ViewModel consumers" (Josh Smith). 如果我们将ViewModel看作生产者, 那么View和Unit Test都是具有同等地位的消费者而已. 并且UnitTest相比于View而言具备更大的消费能力. 或者你可以简单的认为View也仅仅是一种不太推荐的测试方式而已. 所以要实施好这个模式, 那么对ViewModel的单元测试就是必须的了,并且这个测试要不依赖于任何UI控件. (那么不是不对应ViewModel的开发是不是就应该通过测试来驱动了?TDD?)

4, AttachBehavior
一般情况下利用Command, Binding, AttachProperty等WPF特性, View和ViewModel之间能配合工作得很好.  假设我们有一个Button, 当该Button被点击的时候我们要完成一些操作, 很简单, 将该操作封装成一个Command并绑定到该Button上就可以了, 但如果我们要在Button被Load的时候执行另外一些操作呢?  由于Button没有直接被Load事件所触发的Command, 所以不能使用Command了. 不能直接将Load事件处理器写在Button所在的Xaml所对应的CS文件里, 这和我们刚才对MVVM的设计是相矛盾的. 一个不太好的方案是继承一下Button, 并撰写一个由Load所触发的Command, 这可行, 但明显不好. 正如一个控件没有某个属性并且在不继承的情况下而采用AttachProperty一样, 我们可以采用AttachBehavior. AttachBehavior不是WPF特性, 它仅仅是一个最佳实践, 一个Pattern. 关于AttachBehavior语法如何书写, 请参考 : http://www.codeproject.com/KB/WPF/AttachedBehaviors.aspx
Just4life
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF的MVVM模式详解（一)
cunllp的专栏
02-20 417
详细讲解了WPF类的MVVM框架项目的建立过程。适合新手小白。
WPF-MVVM
张金乙的专栏
12-31 1502
MVVM模式主要目的是现实界面层与其它层（包括业务逻辑层和数据层等）的解耦。
MVVM模式和在WPF中的实现（一）MVVM模式简介
weixin_30279671的博客
10-03 626
MVVM模式解析和在WPF中的实现（一） MVVM模式简介 系列目录： MVVM模式解析和在WPF中的实现（一）MVVM模式简介 MVVM模式解析和在WPF中的实现（二）数据绑定 MVVM模式解析和在WPF中的实现（三）命令绑定 MVVM模式解析和在WPF中的实现（四）事件绑定 MVVM模式解析和在WPF中的实现（五）View和ViewModel的通信 MVVM模式解析和在WPF...
WPF真入门教程24--MVVM模式Command命令
hqwest的专栏
12-25 1528
当创建自己的命令时，不能直接实现ICommand接口，而是要使用System.Windows.Input.RouteCommand类，该类已经实现了ICommand接口，所有WPF命令都是RouteCommand类的实例。MVVM的目的是为了最大限度地降低了Xaml文件和CS文件的耦合度，分离界面和业务逻辑，所以我们要通过命令(Command)的来将Button的事件分离出来。在 WPF 中定义这样一个接口的目的是为了实现 MVVM 的框架设计，换一种的说法就是为了解耦。比如，在假期中使用滴滴打车。
C# WPF入门学习主线篇（三十一）—— MVVM模式简介
最新发布
weixin_56595425的博客
06-13 1070
MVVM模式是WPF开发中的一种重要架构模式，通过将用户界面（View）与业务逻辑和数据（Model）分离，提高了代码的可维护性和可测试性。本文介绍了MVVM模式的基本概念、组件及其交互方式，并通过一个简单的示例演示了如何在WPF应用程序中实现MVVM模式。
WPF MVVM设计模式详解
weixin_41440306的博客
02-27 622
MVVM = Model - View - ViewModel 为什么要使用MVVM模式 团队层面：同意思维方式和实现方法 架构层面：稳定，解耦，富有禅意 代码层面：可读，可测，可替换 什么是Model 现实世界中对象的抽象结果 什么是View和ViewModel View=UI ViewModel=Model For View View和ViewModel的沟通 传递数据-数据属性 传递操作-事件属性 一定要使用MVVM吗？ 根据项目的大小而定，
在wpf编程中使用MVVM模式的优劣
human8848的专栏
09-25 2706
大概要从很久以前说起，那时候使用vc6bia
WPF MVVM框架 漂亮界面风格的WPF 快速入门WPF实例 功能实用架构清晰易入门WPF 界面大方功能实用的WPF教程 WPF实战例子 WPF 简易DEMO
oSenLin123456的博客
06-25 957
这个例子是一个简单的待办事项列表应用程序，它展示了 WPF 的核心概念和语法。另外，该例子还使用了 MVVM 模式，这是一个常见的 WPF 设计模式。通过这个例子，学习者可以了解 WPF 的核心概念和语法，并且掌握三层架构和 MVVM 设计模式的基本原理。视图负责显示应用程序的界面，模型负责保存数据，逻辑负责实现业务逻辑。WPF 快速开发框架，已经集成多种框架，可以直接修改使用在项目中，是入门及快速实施项目的最佳选择。然而，对于初学者来说，WPF 的概念和语法可能会让人望而却步。
WPF的MVVM模式完整示例（登录窗口）
05-16
这个Demo是WPF的MVVM模式的一个登录窗口的完整实例，包含了在MVVM模式下的数据绑定、命令和事件、PasswordBox的绑定、RadioButton等一对多控件的绑定、关闭窗口和打开新窗口和数据验证等内容。
这是一个学习WPF中MvvM模式的仓库.zip
12-25
在这个学习仓库中，可能包含各种WPF项目，展示了如何在实际场景中应用MvvM模式。这些示例可能涵盖了简单的UI设计到复杂的业务逻辑处理，为初学者提供了一个实践和理解MvvM模式的良好平台。 **结论** 掌握WPF中的...
wpf中MVVM模式下窗体跳转及显隐控制实现
09-04
总结，MVVM模式在WPF中的窗体跳转、拖动和显隐控制是通过命令、数据绑定和自定义逻辑实现的。理解并掌握这些基本操作，对于提升WPF应用的开发效率和代码质量至关重要。通过实践和学习`WpfMVVM`示例，开发者可以更...
WPF程序中使用MVVM模式（博客源码）
11-30
博客地址：http://blog.csdn.net/pfe_nova/article/details/41624873 MVVM是Model、View和连接两者的ViewModel组成，Model负责提供数据的业务逻辑，View负责页面的显示，ViewModel连接View和Model，ViewModel通过调用Model获得页面所需要的数据并通过View中的绑定将数据显示到页面上。 如何做到页面与逻辑分离的呢，理想状态下，View层的Code-Behind文件中只有在构造函数中调用初始UI元素的一行代码及设置View层的DataContext为对应的ViewModel。这样美工可根据原始设计图去做相应的美化设计，设计好直接替换即可。当然了还有一个好处就是可以方便的进行单元测试。
wpf中MVVM模式ViewModel通讯
03-26
一般情况下我们可能会遇到当一个界面上的数据显示发生变化，可能通知其他界面，让其他界面上的数据或显示也发生变化。通常包括以下几种情况： 1.主界面通知子界面 2.子界面通知主界面 3.子界面通知子界面
wpf mvvm设计模式示例
11-27
总结来说，“wpf mvvm设计模式示例”是一个演示如何在WPF中运用MVVM模式的实例，它通过一个简单的列表展示了MVVM模式的基本结构和工作原理，包括模型、视图、视图模型的职责划分，数据绑定、命令以及依赖属性和...
C# WPF简单的MVVM模式事例
音尘啊
12-17 5220
一、前言 WPF中使用MVVM模式开发有诸如以下优点： 1.结构清晰明朗，上手成本低，一个新人也能快速的定位自己需要改动代码的位置。 2.耦合度低，更改WPF控件不影响数据结构，更改代码成本低。 3.可重用性高，比如一个处理逻辑放到ViewModel模块中，其他界面如果要用掉直接调用即可。 当然并不是所有的项目都去使用MVVM开发，一些简单的我们也可以按照正常的开发。 本次例子参考“刘铁猛”老师的WPF视频教程，大家有兴趣可以去观看。 话不多说，开始写Demo。 二、需要实现目的 点击相加按钮实现数字一和
WPF之MVVM模式
向往的是：佛祖堂前的鱼，静静听禅。
11-21 7675
MVVM即模型-视图-视图模型 ，是用于解耦 UI 代码和非 UI 代码的 设计模式。借助 MVVM，可以在 XAML 中以声明方式定义 UI，将 UI使用数据绑定标到包含数据和命令的其他层。数据绑定提供数据和结构的松散耦合，使 UI 和链接的数据保持同步，同时可以将用户输入路由到相应的命令。MVVM模式由M（Model），V（View），VM（ViewModel）三部分组成，其设计模式类似为MVC开发模式。目的是解耦UI和代码，编译编辑和修改。
[译]WPF 应用程序和MVVM设计模式 ——Josh Smith
weixin_30510153的博客
12-14 231
这篇文章讨论：模式与WPFMVP模式为什么MVVM更加适用于WPF用MVVM构建一个应用程序译文地址： http://www.cnblogs.com/lujiao_cs/archive/2011/10/30/2229419.html内容：　　专业的软件用户界面开发不太简单。它可能混杂了数据、交互设计、视觉设计、连接、多线程、安全性、国际化、验证、单元测试以及可触摸技术。考虑到用户界面...
WPF基础系列六：MVVM框架
热门推荐
iceberg7012的博客
04-07 2万+
MVVM框架 文章目录MVVM框架前言一、MVVM框架简介1. 什么是MVVM？2. MVVM的优势3.MVVM的应用场景二、MVVM使用及示例 前言 在WPF开发中，经典的编程模式是MVVM，是为WPF量身定做的模式，该模式充分利用了WPF的数据绑定机制，最大限度地降低了Xmal文件和CS文件的耦合度，也就是UI显示和逻辑代码的耦合度，如需要更换界面时，逻辑代码修改很少，甚至不用修改。 与WinForm开发相比，我们一般在后置代码中会使用控件的名字来操作控件的属性来更新UI，而在WPF中通常是通过
wpf mvvm框架_说说MVVM
weixin_39635373的博客
12-12 620
写在前面关于软件架构模式(确切的说是一种软件编码规范或者软件开发模式)，这几年骂战不断。争论的焦点主要是在MVC、MVVM、MVP哪种架构最好，哪种架构才是最牛逼的、扩展性更强的、可维护性更高的。笔者不才，在实际项目中很少用过MVP架构，对于MVP的掌握也是只停留在写写Demo阶段。本篇文章主要着重介绍下MVVM架构在真实项目当中的应用，以及抛开RAC，我们如何自己动手写一个View和V...
wpf中mvvm模式实例
06-26
### 回答1： WPF（Windows Presentation Foundation）是一个基于XAML的应用程序框架，主要面向Windows桌面应用程序的开发。MVVM（Model-View-ViewModel）是一种设计模式，它将应用程序分为三个主要的部分：模型，视图和视图模型。在MVVM中，视图和视图模型是分离的，视图模型呈现数据，并且视图与模型直接通信。 在WPF中，MVVM是一个广泛使用的模式，并且在实际应用程序中实现起来非常简单。以下是一个MVVM模式实例： 我们建立一个学生管理系统，包括添加学生，编辑学生和显示学生。 首先是数据模型（Model），在这个例子中，我们需要一个Student类，包括姓名，年龄和成绩。 ``` public class Student { public string Name { get; set; } public int Age { get; set; } public float Score { get; set; } } ``` 然后是视图模型（ViewModel），在这里我们需要三个属性：Students（学生列表），SelectedStudent（所选学生），和AddCommand（添加学生命令）。 ``` public class StudentViewModel : INotifyPropertyChanged { private ObservableCollection<Student> _students; private Student _selectedStudent; public ICommand AddCommand { get; private set; } public event PropertyChangedEventHandler PropertyChanged; public ObservableCollection<Student> Students { get { return _students; } set { if (_students != value) { _students = value; OnPropertyChanged("Students"); } } } public Student SelectedStudent { get { return _selectedStudent; } set { if (_selectedStudent != value) { _selectedStudent = value; OnPropertyChanged("SelectedStudent"); } } } public StudentViewModel() { Students = new ObservableCollection<Student>(); AddCommand = new RelayCommand(AddStudent); } private void AddStudent() { Students.Add(new Student() { Name = "New Student" }); } private void OnPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } } ``` 最后是视图（View），在这个例子中，我们需要一个包含学生列表和Add按钮的窗口。 ``` <Window x:Class="StudentManager.View.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Student Manager" Height="350" Width="525" DataContext="{StaticResource StudentViewModel}"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <ListView ItemsSource="{Binding Students}" SelectedItem="{Binding SelectedStudent}"> <ListView.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Name}" Margin="5" /> <TextBlock Text="{Binding Age}" Margin="5" /> <TextBlock Text="{Binding Score}" Margin="5" /> </StackPanel> </DataTemplate> </ListView.ItemTemplate> </ListView> <Button Content="Add" Command="{Binding AddCommand}" Grid.Row="1" HorizontalAlignment="Right" Margin="5" Padding="5" /> </Grid> </Window> ``` 在这个例子中，我们使用Data Binding（数据绑定）将视图与视图模型联系起来。数据绑定是指在WPF应用中，允许将数据源与某个控件的属性绑定，当数据源更新时，UI自动更新。为了实现Data Binding，我们使用了INotifyPropertyChanged和RelayCommand。 INotifyPropertyChanged是一个接口，它使ViewModel可以通知视图它的属性已经更新。 RelayCommand是一个实现了ICommand接口的类，它将一些指定的命令关联到一个按钮，当条件满足时该按钮可以被按下。 在这个例子中，我们建立了一个具有添加，编辑和显示学生信息的学生管理器。这个例子演示了MVVM模式如何在WPF实现，希望能帮助你更好的理解如何使用MVVM模式来构建应用程序。 ### 回答2： MVVM（Model-View-ViewModel）是一种软件设计模式，用于将GUI应用程序的UI与其后端逻辑分开。WPF（Windows Presentation Foundation）是一个微软框架，用于创建Windows桌面应用程序。 在WPF中使用MVVM模式需要创建三种对象：模型（Model）、视图（View）和视图模型（ViewModel）。模型代表业务逻辑和数据，视图是用户界面，而视图模型则是连接两者的桥梁。 模型中存储着应用程序的数据，我们需要编写类来表示数据结构。视图是XAML文件，包含了UI设计。视图模型是一个C#类，作为一种观察者模式，观察模型的变化并通知视图来更新。 在视图模型中，需要维护着与视图交互的所有数据和命令。我们使用绑定（Binding）来处理两种对象之间的数据交互，从而实现视图和视图模型的解耦。 所以，实现WPF中的MVVM模式需要我们设计好模型、视图和视图模型之间的交互方式，很好的分离了应用程序的UI逻辑和后端业务逻辑，提高了应用程序的可维护性、可扩展性和可重用性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值