wpf mvvm 实例

1.程序结构如图所示：

2.Model实现

在Model文件夹下新建业务类StudentModel，代码如下：

public class StudentModel : INotifyPropertyChanged
{
private int studentId;

public int StudentId
{
get { return studentId; }
set
{
studentId = value;
NotifyPropertyChanged("StudentId");
}
}

private string studentName;

public string StudentName
{
get { return studentName; }
set { studentName = value; }
}

private int studentAge;

public int StudentAge
{
get { return studentAge; }
set { studentAge = value; }
}
private string studentEmail;

public string StudentEmail
{
get { return studentEmail; }
set { studentEmail = value; }
}
private string studentSex;

public string StudentSex
{
get { return studentSex; }
set { studentSex = value; }
}

public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(string propertyName)
{
if (propertyName != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}

StudentModel类实现了接口INotifyPropertyChanged。当类实现该接口后，便可以执行绑定的客户端发出某一属性值已改变的通知。

3ViewModel实现

代码如下：

public class StudentViewModel
{
public DelegateCommand ShowCommand { get; set; }
public StudentModel Student { get; set; }
public StudentViewModel()
{
Student = new StudentModel();
ShowCommand = new DelegateCommand();
ShowCommand.ExecuteCommand = new Action<object>(ShowStudentData);
}
private void ShowStudentData(object obj)
{
Student.StudentId = 1;
Student.StudentName = "tiana";
Student.StudentAge = 20;
Student.StudentEmail = "456456646@qq.com";
Student.StudentSex = "男";
}
}
public class DelegateCommand : ICommand
{
public Action<object> ExecuteCommand = null;
public Func<object, bool> CanExecuteCommand = null;
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
if (CanExecuteCommand != null)
{
return this.CanExecuteCommand(parameter);
}
else
{
return true;
}

}

public void Execute(object parameter)
{
if (this.ExecuteCommand != null)
{
this.ExecuteCommand(parameter);
}

}
public void RaiseCanExecuteChange()
{
if (CanExecuteChanged != null)
{
CanExecuteChanged(this, EventArgs.Empty);
}
}
}

代码中，除了定义StudentViewModel类外，还定义了DelegateCommand类，该类实现了ICommand接口。

ICommand接口中的Execute()方法用于命令的执行，CanExecute（）方法用于只是当前命令在目标元素上是否可用，当这种可用性发生改变时便会触发接口中的CanExecuteChanged事件。

我们可以将实现了ICommand接口命令DelegateCommand赋值给Button（命令源）的Command属性（只有实现了ICommandSource接口的元素才拥有该属性），这样Button便与命令进行了绑定。

MainWindow界面的xaml代码如下：

<Window x:Class="WPFMVVMExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WPFMVVMExample"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Label Content="学号" Height="28" HorizontalAlignment="Left" Margin="54,23,0,0" Name="labelStudentId" VerticalAlignment="Top"></Label>
<TextBox Text="{Binding Student.StudentId}" IsReadOnly="True" Height="23" HorizontalAlignment="Right" Margin="0,27,289,0" Name="textBoxStudentId" VerticalAlignment="Top" Width="120"></TextBox>
<Button Command="{Binding ShowCommand}" Content="显示" Height="23" HorizontalAlignment="Left" Margin="345,27,0,0" Name="buttonShow" VerticalAlignment="Top" Width="75"></Button>
</Grid>
</Window>

MainWindow后端代码如下：

public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new StudentViewModel();
}
}
}

5运行程序

运行程序，点击“”显示“按钮”，即将数据绑定至界面显示

6.说明

wpf中使用mvvm可以降低UI显示与后端逻辑代码的耦合度，即便换界面时，只需要修改很少的逻辑代码就可以实现，甚至不用修改。

在wpf中使用数据绑定机制，当数据变化后，数据会通知界面变更的发生，而不需要通过访问界面元素来修改值，这样后端逻辑代码中也就不必操作或者很少操作界面的元素了。

使用MVVM，可以很好的配合WPF的数据绑定机制来实现ui与逻辑代码的分离，mvvm中的view表示界面，负责页面显示，viewmodel负责逻辑处理，包括准备绑定的数据和命令，viewmodel通过view的datacontext属性绑定至view，model为业务模型，共viewmodel使用。

7.架构

如果你读到这里，你会发现，如果你以后要使用这种方式，以上的代码大多都是在重复：实现INPC(INotifyPropertyChanged)或创建Command这其实就是大部分MVVM 的样板，所以我们可以将实现INPC放到一个基类中，我们把它叫做“ObservableObject”。对于RelayCommand类，我们可以将其移动到我们的.net类库中。这就是所有的mvvm框架开始所做的（如Prism，Caliburn）。