wpf mvvm 实例

时间:2023-12-10 15:15:56

1.程序结构如图所示:

wpf mvvm 实例

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便与命令进行了绑定。

wpf mvvm 实例

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)。