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. 详解Web应用安全系列(4)失效的访问控制

    在Web安全中,失效的访问控制(也称为权限控制失效或越权访问)是指用户在不具备相应权限的情况下访问了受限制的资源或执行了不允许的操作.这通常是由于Web应用系统未能建立合理的权限控制机制,或者权限控制 ...

  2. 实现ASP.Net Core3.1运行在DockeDesktop下并用Nginx实现负载均衡

    一.首先去https://docs.docker.com/get-docker/下载Windows版本的Docker Desktop并安装(需要win10专业版以上操作系统,并启用CPU虚拟化和安装H ...

  3. Jingle Bio:产品出海的最重要一课是「重营销轻技术」?

    名字: Jingle Bio 开发者 / 团队: Luo Baishun 平台: Web 请简要介绍下这款产品 Jingle Bio 是一款不需要任何编程基础就可以轻松驾驭的个人网站制作工具,你可以使 ...

  4. Laravel 组件

    创建组件命令 php artisan make:component Alert make:component 命令还将为组件创建视图模板.视图将放在 resources/views/component ...

  5. webpack4.15.1 学习笔记(一) — 基本概念

    目录 入口(entry) 出口(output) 加载器 Loaders 插件 Plugins 模式 webpack.config.js 配置 终终终终于下定决心,对你下手了,系统的学习一下. webp ...

  6. [oeasy]python0027_整合程序_延迟输出时间_整合两个py程序

    ​ 整合程序 回忆上次内容 通过搜索发现 time中有函数可以延迟 time.sleep(1) 还可以让程序无限循环 while True: 现在需要两个程序的整合 循环延迟输出 时间输出 ​ 编辑 ...

  7. MySQL 跨服务器关联查询

    如果您需要在 MySQL 中关联查询位于不同服务器的表(跨服务器关联查询),您可以考虑使用 MySQL 的联机查询(Federated MySQL).联机查询允许您在一个服务器上访问和查询另一个服务器 ...

  8. 一款.NET开源、跨平台的DASH/HLS/MSS下载工具

    前言 今天大姚给大家分享一款.NET开源(MIT License).免费.跨平台的DASH/HLS/MSS下载工具,并且支持点播和直播(DASH/HLS)的内容下载:N_m3u8DL-RE. 网络流媒 ...

  9. 在 Hub 上使用 Presidio 进行自动 PII 检测实验

    我们在 Hugging Face Hub 上托管的机器学习 (ML) 数据集中发现了一个引人关注的现象: 包含个人未经记录的私密信息.这一现象为机器学习从业者带来了一些特殊挑战. 在本篇博客中,我们将 ...

  10. 【Maxwell】01 安装及入门

    官网地址: https://maxwells-daemon.io/ 下载地址(版本发行): https://github.com/zendesk/maxwell/releases 参考教程自尚硅谷视频 ...