首页 > 代码库 > 一个简单的WPF MVVM实例【转载】

一个简单的WPF MVVM实例【转载】

2024-10-06 07:03:39   217人阅读

引用地址：http://blog.csdn.net/yl2isoft/article/details/20838149

1 新建WPF 应用程序WPFMVVMExample

程序结构如下图所示。

 技术分享

 

2 Model实现

在Model文件夹下新建业务类StudentModel（类文件StudentModel.cs），类的详细代码如下所示。

 

[csharp] view plain copy
 
  1. using System.ComponentModel;  
  2.    
  3. namespace WPFMVVMExample.Model  
  4. {  
  5.     public class StudentModel : INotifyPropertyChanged  
  6.     {  
  7.         /// <summary>  
  8.         /// 学号  
  9.         /// </summary>  
  10.         private int studentId;  
  11.         public int StudentId  
  12.         {  
  13.             get   
  14.             {   
  15.                 return studentId;   
  16.             }  
  17.             set   
  18.             {   
  19.                 studentId = value;  
  20.                 NotifyPropertyChanged("StudentId");  
  21.             }  
  22.         }  
  23.    
  24.         /// <summary>  
  25.         /// 姓名  
  26.         /// </summary>  
  27.         private string studentName;  
  28.         public string StudentName  
  29.         {  
  30.             get   
  31.             {   
  32.                 return studentName;   
  33.             }  
  34.             set   
  35.             {   
  36.                 studentName = value;  
  37.                 NotifyPropertyChanged("StudentName");  
  38.             }  
  39.         }  
  40.    
  41.         /// <summary>  
  42.         /// 年龄  
  43.         /// </summary>  
  44.         private int studentAge;  
  45.         public int StudentAge  
  46.         {  
  47.             get   
  48.             {   
  49.                 return studentAge;   
  50.             }  
  51.             set   
  52.             {   
  53.                 studentAge = value;  
  54.                 NotifyPropertyChanged("StudentAge");  
  55.             }  
  56.         }  
  57.    
  58.         /// <summary>  
  59.         /// Email  
  60.         /// </summary>  
  61.         private string studentEmail;  
  62.         public string StudentEmail  
  63.         {  
  64.             get   
  65.             {   
  66.                 return studentEmail;   
  67.             }  
  68.             set   
  69.             {   
  70.                 studentEmail = value;  
  71.                 NotifyPropertyChanged("StudentEmail");  
  72.             }  
  73.         }  
  74.    
  75.         /// <summary>  
  76.         /// 性别  
  77.         /// </summary>  
  78.         private string studentSex;  
  79.         public string StudentSex  
  80.         {  
  81.             get   
  82.             {   
  83.                 return studentSex;   
  84.             }  
  85.             set   
  86.             {   
  87.                 studentSex = value;  
  88.                 NotifyPropertyChanged("StudentSex");  
  89.             }  
  90.         }  
  91.    
  92.         public event PropertyChangedEventHandler PropertyChanged;  
  93.         public void NotifyPropertyChanged(string propertyName)  
  94.         {  
  95.             if (PropertyChanged != null)  
  96.             {  
  97.                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));  
  98.             }  
  99.         }  
  100.     }  
  101. }  

 

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

 

3 ViewModel实现

在ViewModel文件夹下新建类文件StudentViewModel.cs,类文件的详细代码如下所示。

 

[csharp] view plain copy
 
  1. using System;  
  2. using System.Windows.Input;  
  3. using WPFMVVMExample.Model;  
  4.    
  5. namespace WPFMVVMExample.ViewModel  
  6. {  
  7.     public class StudentViewModel  
  8.     {  
  9.         public DelegateCommand ShowCommand { get; set; }  
  10.         public StudentModel Student { get; set; }  
  11.         public StudentViewModel()  
  12.         {  
  13.             Student = new StudentModel();  
  14.             ShowCommand=new DelegateCommand();  
  15.             ShowCommand.ExecuteCommand = new Action<object>(ShowStudentData);  
  16.         }  
  17.         private void ShowStudentData(object obj)  
  18.         {  
  19.             Student.StudentId = 1;  
  20.             Student.StudentName = "tiana";  
  21.             Student.StudentAge = 20;  
  22.             Student.StudentEmail = "8644003248@qq.com";  
  23.             Student.StudentSex = "大帅哥";  
  24.         }  
  25.    
  26.     }  
  27.    
  28.     public class DelegateCommand : ICommand  
  29.     {  
  30.         public Action<object> ExecuteCommand = null;  
  31.         public Func<object, bool> CanExecuteCommand = null;  
  32.         public event EventHandler CanExecuteChanged;  
  33.    
  34.         public bool CanExecute(object parameter)  
  35.         {  
  36.             if (CanExecuteCommand != null)  
  37.             {  
  38.                 return this.CanExecuteCommand(parameter);  
  39.             }  
  40.             else  
  41.             {  
  42.                 return true;  
  43.             }  
  44.         }  
  45.    
  46.         public void Execute(object parameter)  
  47.         {  
  48.             if (this.ExecuteCommand != null)  
  49.             {   
  50.                 this.ExecuteCommand(parameter);   
  51.             }  
  52.         }  
  53.    
  54.         public void RaiseCanExecuteChanged()  
  55.         {  
  56.             if (CanExecuteChanged != null)  
  57.             {  
  58.                 CanExecuteChanged(this, EventArgs.Empty);  
  59.             }  
  60.         }  
  61.     }  
  62. }  

 

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

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

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

 

4 MainWindow.xaml实现

MainWindow.xaml的界面如下图所示。

技术分享

MainWindow.xaml界面的xaml代码如下所示。

 

[html] view plain copy
 
  1. <Window x:Class="WPFMVVMExample.MainWindow"  
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  4.         Title="MainWindow" Height="350" Width="525">  
  5.     <Grid>  
  6.         <Label Content="学号" Height="28" HorizontalAlignment="Left" Margin="54,23,0,0" Name="labelStudentId" VerticalAlignment="Top" />  
  7.         <TextBox Text="{Binding Student.StudentId}" IsReadOnly="True" Height="23" HorizontalAlignment="Right" Margin="0,27,289,0" Name="textBoxStudentId" VerticalAlignment="Top" Width="120" />  
  8.         <Label Content="姓名" Height="28" HorizontalAlignment="Left" Margin="54,61,0,0" Name="labelStudentName" VerticalAlignment="Top" />  
  9.         <TextBox Text="{Binding Student.StudentName}" IsReadOnly="True" Height="23" HorizontalAlignment="Left" Margin="94,65,0,0" Name="textBoxStudentName" VerticalAlignment="Top" Width="120" />  
  10.         <Label Content="年龄" Height="28" HorizontalAlignment="Left" Margin="54,94,0,0" Name="labelStudentAge" VerticalAlignment="Top" />  
  11.         <TextBox Text="{Binding Student.StudentAge}" IsReadOnly="True" Height="23" HorizontalAlignment="Left" Margin="94,99,0,0" Name="textBoxStudentAge" VerticalAlignment="Top" Width="120" />  
  12.         <Label Content="Email" Height="28" HorizontalAlignment="Left" Margin="50,138,0,0" Name="labelStudentEmail" VerticalAlignment="Top" />  
  13.         <TextBox Text="{Binding Student.StudentEmail}" IsReadOnly="True" Height="23" HorizontalAlignment="Left" Margin="94,141,0,0" Name="textBoxStudentEmail" VerticalAlignment="Top" Width="120" />  
  14.         <Label Content="性别" Height="28" HorizontalAlignment="Left" Margin="57,176,0,0" Name="labelStudentSex" VerticalAlignment="Top" />  
  15.         <TextBox Text="{Binding Student.StudentSex}" IsReadOnly="True" Height="23" HorizontalAlignment="Left" Margin="94,180,0,0" Name="textBoxStudentSex" VerticalAlignment="Top" Width="120" />  
  16.         <Button Command="{Binding ShowCommand}" Content="显示" Height="23" HorizontalAlignment="Left" Margin="345,27,0,0" Name="buttonShow" VerticalAlignment="Top" Width="75" />  
  17.     </Grid>  
  18. </Window>  

 

MainWindow.xaml的后端代码如下所示。

 

[csharp] view plain copy
 
  1. using System.Windows;  
  2. using WPFMVVMExample.ViewModel;  
  3.    
  4. namespace WPFMVVMExample  
  5. {  
  6.     /// <summary>  
  7.     /// MainWindow.xaml 的交互逻辑  
  8.     /// </summary>  
  9.     public partial class MainWindow : Window  
  10.     {  
  11.         public MainWindow()  
  12.         {  
  13.             InitializeComponent();  
  14.             this.DataContext = new StudentViewModel();  
  15.         }  
  16.     }  
  17. }  

 

 

5 运行程序

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

技术分享 

 

6 说明

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

在WinForm开发中，我们一般会直接操作界面的元素（如：TextBox1.Text=“aaa”），这样一来，界面变化后，后端逻辑代码也需要做相应的变更。

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

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

一个简单的WPF MVVM实例【转载】


联系
我们