原文:WPF MVVM从入门到精通3:数据绑定

 

WPF MVVM从入门到精通1:MVVM模式简介

WPF MVVM从入门到精通2:实现一个登录窗口

WPF MVVM从入门到精通3:数据绑定

WPF MVVM从入门到精通4:命令和事件

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

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

WPF MVVM从入门到精通7:关闭窗口和打开新窗口

WPF MVVM从入门到精通8:数据验证

完整示例代码下载LoginDemo

 

我们前面已经说过,现在后端和前端可以分头行事了。我们先来看看后端要做的事情。

对应于用户名输入框,ViewModel里面应该有一个相应的对象。当这个对象状态发生改变时,需要向View发出一个通知。因为所有的属性都要做这么一个事情,我们把通知这件事放到一个基类里面。

  1. using System.ComponentModel;
  2. namespace LoginDemo.ViewModel.Common
  3. {
  4. public abstract class NotificationObject : INotifyPropertyChanged
  5. {
  6. public event PropertyChangedEventHandler PropertyChanged;
  7. /// <summary>
  8. /// 发起通知
  9. /// </summary>
  10. /// <param name="propertyName">属性名</param>
  11. public void RaisePropertyChanged(string propertyName)
  12. {
  13. PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  14. }
  15. }
  16. }

这个基类所做的事情,就是当我们调用RaisePropertyChanged的时候,就会通知View,propertyName这个属性改变了,你要做出相应的处理了。

那我们现在的ViewModel,应该是怎样的呢,代码如下:

  1. using LoginDemo.ViewModel.Common;
  2. namespace LoginDemo.ViewModel.Login
  3. {
  4. public class LoginViewModel : NotificationObject
  5. {
  6. public LoginViewModel()
  7. {
  8. obj.UserName = "test";
  9. }
  10. /// <summary>
  11. /// Model对象
  12. /// </summary>
  13. private LoginModel obj = new LoginModel();
  14. /// <summary>
  15. /// 用户名
  16. /// </summary>
  17. public string UserName
  18. {
  19. get
  20. {
  21. return obj.UserName;
  22. }
  23. set
  24. {
  25. obj.UserName = value;
  26. this.RaisePropertyChanged("UserName");
  27. }
  28. }
  29. }
  30. }

我们声明了一个LoginModel的私有对象,用于存储真正的数据内容。而属性UserName,当设置它的值时,它就会发出名为"UserName"这个属性改变的通知。

可能有的人会觉得,Model和ViewModel有太多重复的内容。或许有人会删掉Model类,然后把ViewModel改成这样:

  1. using LoginDemo.ViewModel.Common;
  2. namespace LoginDemo.ViewModel.Login
  3. {
  4. public class LoginViewModel : NotificationObject
  5. {
  6. private string userName;
  7. /// <summary>
  8. /// 用户名
  9. /// </summary>
  10. public string UserName
  11. {
  12. get
  13. {
  14. return userName;
  15. }
  16. set
  17. {
  18. userName = value;
  19. this.RaisePropertyChanged("UserName");
  20. }
  21. }
  22. }
  23. }

这样的设计在最终效果上是一样的,但我并不建议。我们可能会遇到这样的场合:把所有数据保存到一个文件,然后在下次打开软件的时候还原。如果有Model类,我们使用序列化就可以很方便地实现这一功能。当然,Model类存在的理由并不止这一个。所以虽然麻烦一点,我还是建议做一个Model类。

那么后端还要做些什么呢?其实对于UserName的处理,已经完成了。我们现在来看看前端要做的事情。

我们说过,前端存在着大量的绑定。我们使用绑定的方法,把用户名输入框绑定到名为UserName的属性上。

  1. <TextBox Grid.Row="0" Grid.Column="1" Margin="5" Text="{Binding UserName}"/>

代码是相当简单的。我们现在就可以运行软件,然后看到用户名输入框里显示test。当我们修改其内容,在输入框失去焦点时,ViewModel里面的UserName也会变成输入框输入的内容。

至此,前后端的工作都完成了。

WPF MVVM从入门到精通3:数据绑定的更多相关文章

  1. WPF MVVM从入门到精通8:数据验证

    原文:WPF MVVM从入门到精通8:数据验证 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 WPF M ...

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

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

  3. WPF MVVM从入门到精通7:关闭窗口和打开新窗口

    原文:WPF MVVM从入门到精通7:关闭窗口和打开新窗口 WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 ...

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

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

  5. WPF MVVM从入门到精通4:命令和事件

    原文:WPF MVVM从入门到精通4:命令和事件   WPF MVVM从入门到精通1:MVVM模式简介 WPF MVVM从入门到精通2:实现一个登录窗口 WPF MVVM从入门到精通3:数据绑定 WP ...

  6. WPF MVVM从入门到精通2:实现一个登录窗口

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

  7. WPF MVVM从入门到精通1:MVVM模式简介

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

  8. WPF/MVVM Quick Start Tutorial - WPF/MVVM 快速入门教程 -原文,翻译及一点自己的补充

    转载自 https://www.codeproject.com/articles/165368/wpf-mvvm-quick-start-tutorial WPF/MVVM Quick Start T ...

  9. WPF自学入门(十一)WPF MVVM模式Command命令 WPF自学入门(十)WPF MVVM简单介绍

    WPF自学入门(十一)WPF MVVM模式Command命令   在WPF自学入门(十)WPF MVVM简单介绍中的示例似乎运行起来没有什么问题,也可以进行更新.但是这并不是我们使用MVVM的正确方式 ...

随机推荐

  1. cheerio数据抓取

    很多语言都能写个爬虫抓取数据,js自然也可以,使用cheerio可以支持css检索,较快捷的获取需要的数据.首先,先把node.js给安装了.可到官网下载.安装好node.js后,使用npm安装che ...

  2. 本机未装Oracle数据库时Navicat for Oracle 报错:Cannot create oci environment 原因分析及解决方案

    因为要更新数据库加个表,远程桌面又无法连接...所以就远程到另外一台电脑,然后用navicat通过内网修改目标数据库. 一直用着navicat操作数据库,所以很速度的弄好然后新建连接进入数据库. 然而 ...

  3. POJ-2452 Sticks Problem 二分+RMQ

    题目链接: https://cn.vjudge.net/problem/POJ-2452 题目大意: 给出一个数组a,求最大的j-i满足 i<j && a[i] ... a[j] ...

  4. the longest distance of a binary tree

    版权声明:欢迎查看本博客.希望对你有有所帮助 https://blog.csdn.net/cqs_2012/article/details/24880735 the longest distance ...

  5. 9、Dubbo-配置(4)

    本地存根 远程服务后,客户端通常只剩下接口,而实现全在服务器端,但提供方有些时候想在客户端 也执行部分逻辑,比如:做 ThreadLocal 缓存,提前验证参数,调用失败后伪造容错数据等 等,此时就需 ...

  6. Appium基础篇(一)——启动emulator

    1. Appium API文档:链接参考 http://appium.io/slate/cn/v/?ruby#appium-介绍. 2. Appium 安装篇:http://www.cnblogs.c ...

  7. 理解java的三大特性之多态

    所谓多态就是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用在编程时并不确定,而是在程序运行期间才确定,即一个引用变量倒底会指向哪个类的实例对象,该引用变量发出的方法调用到底是哪个 ...

  8. 基于Azure Blob冷存储的数据压缩算法测试对比分析

    背景说明: 近期公司的数据增量迅速增长,存储的成本太高,需要采用生命周期进行管理,热存储中的数据或者被删除,或者备份至冷存储.但是冷备时是否要压缩,需要进行验证.Azure本身没有提供压缩的接口,只能 ...

  9. .NET获取IIS7.0及以上版本托管服务信息

    近期写了个扫描IIS托管站点然后定期注册到Consul的小工具,随意网上拷贝了个帮助类,搞完本机测试没问题,扔到服务器发现硕大的一个异常.. System.Runtime.InteropService ...

  10. Xcode 5.1安装插件:规范凝视生成器VVDocumenter

    类似java的多行凝视! 安装过程: 1.前往GitHub下载project文件:VVDocumenter-Xcode 2.用Xcode打开project,Command + B Build成功后,能 ...