原文: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发出一个通知。因为所有的属性都要做这么一个事情,我们把通知这件事放到一个基类里面。

using System.ComponentModel;

namespace LoginDemo.ViewModel.Common
{
public abstract class NotificationObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged; /// <summary>
/// 发起通知
/// </summary>
/// <param name="propertyName">属性名</param>
public void RaisePropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

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

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

using LoginDemo.ViewModel.Common;

namespace LoginDemo.ViewModel.Login
{
public class LoginViewModel : NotificationObject
{
public LoginViewModel()
{
obj.UserName = "test";
} /// <summary>
/// Model对象
/// </summary>
private LoginModel obj = new LoginModel(); /// <summary>
/// 用户名
/// </summary>
public string UserName
{
get
{
return obj.UserName;
}
set
{
obj.UserName = value;
this.RaisePropertyChanged("UserName");
}
}
}
}

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

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

using LoginDemo.ViewModel.Common;

namespace LoginDemo.ViewModel.Login
{
public class LoginViewModel : NotificationObject
{
private string userName;
/// <summary>
/// 用户名
/// </summary>
public string UserName
{
get
{
return userName;
}
set
{
userName = value;
this.RaisePropertyChanged("UserName");
}
}
}
}

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

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

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

<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. java继承-final关键词用法

    final关键字特点: 1.可以用来修饰变量.方法.类. 2.修饰的变量是一个常量.一旦被赋值就不能被修改(常量一般都和static关键字配合使用) 3.修饰类代表此类不能被继承4.修饰方法代表次方法 ...

  2. python不用正则过渡括号

  3. javascrict中innerhtml和innerText的关系

    1.time.innerHTML 就是id为time的标签中所有包含的代码内容 比如 <div id='time'><a href='#'>time</a>< ...

  4. vue-scroll 底部无数据时,底部出现大片的空白

    vue-scroll放在vue的项目中,实现下拉刷新的效果,但是发现,不能上拉的bug,上拉了之后,底部出现了一大段的空白,参照GitHub的问题,算是暂时解决了. 不能上拉的原因是:滑动标签里边的内 ...

  5. 如何在ubuntu中安装CP-ABE

    cpabe依赖pbc,pbc依赖gmp,gmp依赖M4.bison.flex,所以先安装后面的 安装m4 $   sudo apt-get install m4 安装 flex 安装 bison 1 ...

  6. EF中的Guid主键

    除了自增长ID(int),我们还能把主键设置为GUID类型的. 创建我们的数据表 CREATE TABLE dbo.JoinA( AGUID UNIQUEIDENTIFIER PRIMARY KEY ...

  7. 查看apache当前并发访问数和进程数

    1.查看apache当前并发访问数: netstat -an | grep ESTABLISHED | wc -l 对比httpd.conf中MaxClients的数字差距多少. 2.查看有多少个进程 ...

  8. Java解析Excel之应用Reflection等技术实现动态读取

    目录树 背景 技术选型 问题分析 技术要点及难点分析 源码分析 测试用例 背景 Tip:因为产品提的需求我都开发完了,进行了项目提测:前天老大走过来说:你用spring-boot开发一个解析Excel ...

  9. Objective-C 方法交换实践(三) - Aspects 源码解析

    一.类与变量 AspectOptions typedef NS_OPTIONS(NSUInteger, AspectOptions) { AspectPositionAfter = 0, /// 原方 ...

  10. CentOS6安装各种大数据软件 第十章:Spark集群安装和部署

    相关文章链接 CentOS6安装各种大数据软件 第一章:各个软件版本介绍 CentOS6安装各种大数据软件 第二章:Linux各个软件启动命令 CentOS6安装各种大数据软件 第三章:Linux基础 ...