WPF MVVM从入门到精通3:数据绑定
我们前面已经说过,现在后端和前端可以分头行事了。我们先来看看后端要做的事情。
对应于用户名输入框,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也会变成输入框输入的内容。
至此,前后端的工作都完成了。