WPF:MVVM的由来与属性绑定的过程
WPF:MVVM的由来与属性绑定的过程
1、MVVM
(1)MVVM是什么?
MVVM(Model-View-ViewModel)是一种软件架构设计模式MVVM模式。有助于分离应用程序的业务逻辑和用户界面层,使得开发过程更易于管理,同时也便于单元测试。

Model?
现实世界中对象的抽象结果。
View?
View=UI。
View Model?
ViewModel=Model for View。
View 与 View Model之间的沟通:传递数据:数据属性 传递操作:命令属性。
(2)为什么要使用MVVM?
- 可测试性:由于业务逻辑被封装在ViewModel中,这使得编写单元测试变得更容易。
- 解耦:View和Model之间通过ViewModel间接通信,使得它们彼此独立,易于单独修改和维护。
- 可维护性:清晰的分层结构使得代码更易于理解和维护。
2、数据绑定
现在我们做一个实验,实现一个简单的加法,通过MVVM去实现。

从图中可以看出,有3个数据属性和2个命令属性。
先创建好各层文件夹如下:

对于数据属性,我们先创建一个NotificationObject类,去继承INotifyPropertyChanged这个接口,这个接口用来是实现UI与数据属性之间双向绑定的。

对于命令属性,我们先创建一个DelegateCommand类,继承ICommand这个接口。

ViewModel里面的代码如下:

结果如下:

3、分析
如何执行数据属性呢?(ViewModel与View之间双向交互)
数据绑定的过程,INotifyPropertyChanged里面接口是用来干嘛的?
当我们在UI层里面输入1时(此时对应的值已经传到了Input1了),这个时候会执行属性对应的Set里面的方法

然后执行方法里面的事件,将这个属性名字传递到UI,然后UI绑定的对应的属性就随之改变

也就是说:Input1和Inpu2我们只是通过UI去传值,所以我们并不需要去执行RaisePropertyChanged这个方法。于是,当我注释掉里面的RaisePropertyChanged方法时,经过调试与实验,依然可以显示结果。这个过程是从View到ViewModel的过程。
再来说Input3,这个为什么不可以去掉RaisePropertyChanged这个方法呢?因为当我们去执行命令后,Input3在ViewModel里面的值进行了改变,然后通过事件触发通知UI,传递给相对应的属性名字,这样UI层的值就改变了。这个过程是View Model到View的过程。
如何执行命令属性呢?(View到ViewModel)
我们知道,在MainWindow里面我们需要将xaml的上下文与View Model绑定

然而在创建的ViewModel对象里面,就执行了这个命令属性吗?

于是,经过调试,我发现在new完后并没有去触发委托里面的Add方法,这是为什么呢?
在初始化阶段,AddCommand被创建并设置好执行的动作(即Add方法),但这并不意味着Add方法被立即执行。只有当用户与UI进行交互时(比如点击按钮),AddCommand才会被触发,从而执行Add方法。
这里注意,命令属性的绑定方法:

数据属性的绑定方法,比如文中的TextBox:

WPF:MVVM的由来与属性绑定的过程的更多相关文章
- WPF使用MVVM(一)-属性绑定
WPF使用MVVM(一)-属性绑定 简单介绍MVVM MVVM是Model(数据类型),View(界面),ViewModel(数据与界面之间的桥梁)的缩写,是一种编程模式,优点一劳永逸,初步增加一些逻 ...
- wpf mvvm模式下的image绑定
view文件 <Image Grid.Column="2" Width="48" Height="64" Stretch=" ...
- WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定
原文:WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM ...
- WPF MVVM从入门到精通5:PasswordBox的绑定
原文:WPF MVVM从入门到精通5:PasswordBox的绑定 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通 ...
- WPF使用MVVM(二)-命令绑定
WPF使用MVVM(二)-命令绑定 上一节已经介绍了WPF的属性绑定,这使得我们只需要指定界面的DataContext,然后就可以让界面绑定我们的属性数据呢. 但是上一节还遗留了一个问题就是我们的按钮 ...
- WPF属性绑定实现双向变化
WPF依赖项属性可以实现属性的绑定,成功绑定之后只要修改后台绑定的属性,即可UI同步自动更新绑定的值,无需手动刷新界面:同样,前台的值变化后,通过获取绑定的属性值也可获取UI变化后的值,实现双向变化的 ...
- 【WPF】如何把一个枚举属性绑定到多个RadioButton
一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和 ...
- WPF MVVM UI分离之《交互与数据分离》 基础才是重中之重~delegate里的Invoke和BeginInvoke 将不确定变为确定系列~目录(“机器最能证明一切”) 爱上MVC3系列~全局异常处理与异常日志 基础才是重中之重~lock和monitor的区别 将不确定变成确定~我想监视我的对象,如果是某个值,就叫另一些方法自动运行 将不确定变成确定~LINQ DBML模型可以对
WPF MVVM UI分离之<交互与数据分离> 在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架. 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下 ...
- WPF MVVM初体验
首先MVVM设计模式的结构, Views: 由Window/Page/UserControl等构成,通过DataBinding与ViewModels建立关联: ViewModels:由一组命令,可以绑 ...
- WPF MVVM实现TreeView
今天有点时间,做个小例子WPF MVVM 实现TreeView 只是一个思路大家可以自由扩展 文章最后给出了源码下载地址 图1 图2 模版加上了一个checkbox,选中父类的checkb ...
随机推荐
- 详解Web应用安全系列(3)失效的身份认证
大多数身份和访问管理系统的设计和实现,普遍存在身份认证失效的问题.会话管理是身份验证和访问控制的基础,并且存在于所有有状态的应用程序中.攻击者可以使用指南手册来检测失效的身份认证,但通常会关注密码转储 ...
- hive第二课:Hive3.1.2概述与基本操作(修改版)
Hive3.1.2概述与基本操作 1.Hive基本概念 1.1 Hive简介 Hive本质是将SQL转换为MapReduce的任务进行运算,底层由HDFS来提供数据存储,说白了hive可以理解为一个将 ...
- Sqlalchemy 连接SQL Server 登录失败
实验系统环境 Windows平台 Sqlalchemy 2.0.23 Python 3.10 SQL Server 2012 aioodbc 0.5.0 问题详情 sqlalchemy.exc.Int ...
- javascript的内存(垃圾)回收机制?
垃圾回收机制 1.js中的内存回收 在js中,垃圾回收器每隔一段时间就会找出那些不再使用的数据,并释放其所占用的内存空间. 以全局变量和局部变量来说,函数中的局部变量在函数执行结束后这些变量已经不再被 ...
- Spring面试题及答案
Spring 在ssm中起什么作用? Spring:轻量级框架 作用:Bean工厂,用来管理Bean的生命周期和框架集成. 两大核心: ①. IOC/DI(控制反转/依赖注入) :把dao依赖注入到s ...
- Java 代码实现POST/GET请求
方式一 package com.cyb.util; import java.io.BufferedReader; import java.io.DataOutputStream; import jav ...
- Java-Filter:过滤器请求拦截
1.概念 web中的过滤器:当访问服务器资源时,过滤器可以将请求拦截下来,完成一些特殊的功能 过滤器的作用: 一般用于完成通用的操作,如:登录验证,统一编码处理,敏感字符过滤 2.快速入门 1.步骤 ...
- oeasy教您玩转vim - 87 - # 内容查找grep命令
内容查找 grep 回忆 上次我们尝试了一下各种在vi中执行外部程序 可以排序 可以改大小写 还可以用管道 直接对于缓冲buffer文件进行操作 还是很方便的 其实还有一个外部命令很重要 根据内容 ...
- ComfyUI进阶:Comfyroll插件 (七)
前言: 学习ComfyUI是一场持久战,而Comfyroll 是一款功能强大的自定义节点集合,专为 ComfyUI 用户打造,旨在提供更加丰富和专业的图像生成与编辑工具.借助这些节点,用户可以在静态图 ...
- vue codemirro 文件对比 sql编辑器
效果图: 安装及引用同上一篇文章,请移步:https://www.cnblogs.com/Lu-Lu/p/16265815.html HTML: <el-dialog class="d ...