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的由来与属性绑定的过程的更多相关文章

  1. WPF使用MVVM(一)-属性绑定

    WPF使用MVVM(一)-属性绑定 简单介绍MVVM MVVM是Model(数据类型),View(界面),ViewModel(数据与界面之间的桥梁)的缩写,是一种编程模式,优点一劳永逸,初步增加一些逻 ...

  2. wpf mvvm模式下的image绑定

    view文件 <Image Grid.Column="2" Width="48" Height="64" Stretch=" ...

  3. WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定

    原文:WPF MVVM从入门到精通6:RadioButton等一对多控件的绑定   WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM ...

  4. WPF MVVM从入门到精通5:PasswordBox的绑定

    原文:WPF MVVM从入门到精通5:PasswordBox的绑定   WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通 ...

  5. WPF使用MVVM(二)-命令绑定

    WPF使用MVVM(二)-命令绑定 上一节已经介绍了WPF的属性绑定,这使得我们只需要指定界面的DataContext,然后就可以让界面绑定我们的属性数据呢. 但是上一节还遗留了一个问题就是我们的按钮 ...

  6. WPF属性绑定实现双向变化

    WPF依赖项属性可以实现属性的绑定,成功绑定之后只要修改后台绑定的属性,即可UI同步自动更新绑定的值,无需手动刷新界面:同样,前台的值变化后,通过获取绑定的属性值也可获取UI变化后的值,实现双向变化的 ...

  7. 【WPF】如何把一个枚举属性绑定到多个RadioButton

    一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和 ...

  8. WPF MVVM UI分离之《交互与数据分离》 基础才是重中之重~delegate里的Invoke和BeginInvoke 将不确定变为确定系列~目录(“机器最能证明一切”) 爱上MVC3系列~全局异常处理与异常日志 基础才是重中之重~lock和monitor的区别 将不确定变成确定~我想监视我的对象,如果是某个值,就叫另一些方法自动运行 将不确定变成确定~LINQ DBML模型可以对

    WPF MVVM UI分离之<交互与数据分离>   在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架. 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下 ...

  9. WPF MVVM初体验

    首先MVVM设计模式的结构, Views: 由Window/Page/UserControl等构成,通过DataBinding与ViewModels建立关联: ViewModels:由一组命令,可以绑 ...

  10. WPF MVVM实现TreeView

    今天有点时间,做个小例子WPF MVVM 实现TreeView 只是一个思路大家可以自由扩展 文章最后给出了源码下载地址 图1   图2     模版加上了一个checkbox,选中父类的checkb ...

随机推荐

  1. 《最新出炉》系列入门篇-Python+Playwright自动化测试-52- 字符串操作 - 下篇

    1.简介 在日常的自动化测试工作中进行断言的时候,我们可能经常遇到的场景.从一个字符串中找出一组数字或者其中的某些关键字,而不是将这一串字符串作为结果进行断言.这个时候就需要我们对字符串进行操作,宏哥 ...

  2. 在Linux驱动中使用regmap

    背景 在学习SPI的时候,看到了某个rtc驱动中用到了regmap,在学习了对应的原理以后,也记录一下如何使用. 介绍 在Linu 3.1开始,Linux引入了regmap来统一管理内核的I2C, S ...

  3. STM32 学习:IAP 简单的IAP例子

    --- title: mcu-stm32-IAP-1-sample date: 2020-05-27 18:21:53 categories: tags: - iap - stm32 --- 章节概述 ...

  4. 复习 - js基础语法

    今天继续复习了js基础语法  最后一天了 学完了进入dom bom的复习 今天发现了很多经典案例 我都不知道一个随笔放的完不 逻辑性感觉还是蛮强的 主要就是作用域 对象 内置对象等一些的操作嘛 话不多 ...

  5. Java基础:线程的三种创建方式

    一.继承Thread类 定义一个类继承线程类Thread 重写run()方法 创建线程对象 调用线程对象的start()方法创建线程 Thread类的常用API setName(String name ...

  6. HGAME2023 week1-week2

    确实是高质量比赛,学到了很多知识.认识到了很多的不足. 任重而道远啊... hgame_week1 web Classic Childhood Game F12检查源码,打开Events.js 发现 ...

  7. Spring AOP面向切面编程核心概念

    横切关注点 对那些方法进行拦截,拦截后怎么处理,这些就叫横切关注点 比如:权限认证.日志.事务 通知 Advice 在特定的切入点上执行的增强处理,有5种通知 用途:记录日志.控制事务.提前编写好通用 ...

  8. yearrecord——一个类似痕迹墙的React数据展示组件

    介绍一下自己做的一个类似于力扣个人主页提交记录和GitHub主页贡献记录的React组件. 下图分别是力扣个人主页提交记录和GitHub个人主页的贡献记录,像这样类似痕迹墙的形式可以比较直观且高效得展 ...

  9. 第二章 编译FFmpeg并开启H.264编码

    目录 前言 1. 下载x264 2. 编译x264 3. 编译FFmpeg 3.1 可能出现的问题和解决方法 3.1.1 ERROR: x264 not found using pkg-config ...

  10. R语言基于表格文件的数据绘制具有多个系列的柱状图与直方图

      本文介绍基于R语言中的readxl包与ggplot2包,读取Excel表格文件数据,并绘制具有多个系列的柱状图.条形图的方法.   首先,我们配置一下所需用到的R语言readxl包与ggplot2 ...