首页 - 技术 - 一个简单的WPF MVVM实例【转载】

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

2023-09-16 16:08
-->

引用地址:http://www.gsm-guard.net/yl2isoft/article/details/20838149

1 新建WPF 应用程序WPFMVVMExample

程序结构如下图所示。

2 Model实现

在Model文件夹下新建业务类StudentModel(类文件StudentModel.cs),类的详细代码如下所示。

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

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

3 ViewModel实现

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

  1. using System;
  2. using System.Windows.Input;
  3. using WPFMVVMExample.Model;
  4. namespace WPFMVVMExample.ViewModel
  5. {
  6. public class StudentViewModel
  7. {
  8. public DelegateCommand ShowCommand { get; set; }
  9. public StudentModel Student { get; set; }
  10. public StudentViewModel()
  11. {
  12. Student = new StudentModel();
  13. ShowCommand=new DelegateCommand();
  14. ShowCommand.ExecuteCommand = new Action(ShowStudentData);
  15. }
  16. private void ShowStudentData(object obj)
  17. {
  18. Student.StudentId = 1;
  19. Student.StudentName = "tiana";
  20. Student.StudentAge = 20;
  21. Student.StudentEmail = "support@www.gsm-guard.net";
  22. Student.StudentSex = "大帅哥";
  23. }
  24. }
  25. public class DelegateCommand : ICommand
  26. {
  27. public Action ExecuteCommand = null;
  28. public Func CanExecuteCommand = null;
  29. public event EventHandler CanExecuteChanged;
  30. public bool CanExecute(object parameter)
  31. {
  32. if (CanExecuteCommand != null)
  33. {
  34. return this.CanExecuteCommand(parameter);
  35. }
  36. else
  37. {
  38. return true;
  39. }
  40. }
  41. public void Execute(object parameter)
  42. {
  43. if (this.ExecuteCommand != null)
  44. {
  45. this.ExecuteCommand(parameter);
  46. }
  47. }
  48. public void RaiseCanExecuteChanged()
  49. {
  50. if (CanExecuteChanged != null)
  51. {
  52. CanExecuteChanged(this, EventArgs.Empty);
  53. }
  54. }
  55. }
  56. }
  57. 代码中,除了定义StudentViewModel类外,还定义了DelegateCommand类,该类实现了ICommand接口。

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

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

    4 MainWindow.xaml实现

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

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

    1. xmlns="http://www.gsm-guard.net/winfx/2006/xaml/presentation"
    2. xmlns:x="http://www.gsm-guard.net/winfx/2006/xaml"
    3. Title="MainWindow" Height="350" Width="525">

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

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

    5 运行程序

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

    6 说明

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

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

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

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

    -->