WPF/C#：理解与实现WPF中的MVVM模式

MVVM模式的介绍

MVVM（Model-View-ViewModel）是一种设计模式，特别适用于WPF（Windows Presentation Foundation）等XAML-based的应用程序开发。MVVM模式主要包含三个部分：Model（模型）、View（视图）和ViewModel（视图模型）。

1. Model（模型）：模型代表的是业务逻辑和数据。它包含了应用程序中用于处理的核心数据对象。模型通常包含业务规则、数据访问和存储逻辑。
2. View（视图）：视图是用户看到和与之交互的界面。在WPF中，视图通常由XAML定义，并且包含各种用户界面元素，如按钮、文本框、列表等。
3. ViewModel（视图模型）：视图模型是视图的抽象，它包含视图所需的所有数据和命令。视图模型通过实现INotifyPropertyChanged接口和使用ICommand对象，将视图的状态和行为抽象化，从而实现了视图和模型的解耦。

MVVM模式的主要优点是分离了视图和模型，使得视图和业务逻辑之间的依赖性降低，提高了代码的可维护性和可测试性。此外，通过数据绑定和命令绑定，MVVM模式可以减少大量的样板代码，使得代码更加简洁和易于理解。

不使用MVVM模式的例子

要真正理解为什么要使用MVVM，使用MVVM有什么好处，肯定要与不使用MVVM的情况进行对比。在Winform中我们使用了事件驱动编程，同样在WPF中我们也可以使用事件驱动编程。

Windows Forms（WinForms）是一种基于事件驱动的图形用户界面（GUI）框架。在WinForms中，用户与应用程序的交互主要通过事件来驱动。

事件驱动编程是一种编程范式，其中程序的执行流程由外部事件（如用户操作或系统事件）决定。在WinForms中，事件可以是用户的各种操作，如点击按钮、选择菜单项、输入文本等，也可以是系统的事件，如窗口加载、大小改变等。

当一个事件发生时，会触发与之关联的事件处理器（Event Handler）。事件处理器是一个函数或方法，用于响应特定的事件。例如，当用户点击一个按钮时，可以触发一个事件处理器，执行一些特定的操作。

在WinForms中，你可以为各种控件添加事件处理器，以响应用户的操作。这种事件驱动的方式使得你可以很容易地创建交互式的GUI应用程序，而无需关心程序的执行流程。

事件驱动的简图如下图所示：

1. 事件源（Event Source）：事件源是产生事件的对象。在WinForms中，事件源通常是用户界面元素，如按钮、文本框、菜单项等。当用户与这些元素进行交互（如点击按钮、输入文本等）时，这些元素就会产生相应的事件。
2. 事件（Event）：事件是由事件源产生的一个信号，表示某种特定的事情已经发生。例如，当用户点击一个按钮时，按钮就会产生一个Click事件。事件通常包含一些关于该事件的信息，例如事件发生的时间、事件的源对象等。
3. 事件处理器（Event Handler）：事件处理器是一个函数或方法，用于响应特定的事件。当一个事件发生时，与该事件关联的事件处理器就会被调用。在事件处理器中，你可以编写代码来定义当事件发生时应该执行的操作。例如，你可以在按钮的Click事件处理器中编写代码，定义当用户点击按钮时应该执行的操作。

现在我们通过一个例子在WPF中使用事件驱动编程。

首先看一下我们的示例xaml页面：

使用了两个事件，分别是窗体加载事件：

 Loaded="Window_Loaded"

与button点击事件：

实现该操作与两个类有关：

 public class User
 {
     public string? Name { get; set; }
     public string? Email { get; set; }
 }

 public static class UserManager
 {
     public static ObservableCollection<User> DataBaseUsers = new       ObservableCollection<User>()
     {
         new User() { Name = "小王", Email = "123@qq.com" },
         new User() { Name = "小红", Email = "456@qq.com" },
         new User() { Name = "小五", Email = "789@qq.com" }
     };

     public static ObservableCollection<User> GetUsers()
     {
         return DataBaseUsers;
     }

     public static void AddUser(User user)
     {
         DataBaseUsers.Add(user);
     }
 }

窗体加载事件处理程序：

 private void Window_Loaded(object sender, RoutedEventArgs e)
 {
    dataGrid1.ItemsSource =  UserManager.GetUsers();
 }

"添加"按钮点击事件处理程序：

 private void AddUser(object sender, RoutedEventArgs e)
 {
     User user = new User();
     user.Name = nameTextBox.Text;
     user.Email = emailTextBox.Text;
     UserManager.AddUser(user);
     MessageBox.Show("成功添加用户！");
 }

实现的效果如下所示：

使用MVVM的例子

刚刚我们使用的是事件驱动编程，我们在winform开发中经常这样干。对于一些小项目或者demo程序这样做很方便，但是如果业务逻辑很多，这样做就不好维护，因为UI与业务逻辑严重耦合了。

我们经常在cs文件中使用xaml中的元素，也就是经常在cs中引用xaml中的元素，如下所示：

在C#代码文件中直接引用XAML元素，会导致代码与界面元素之间的耦合度增加，这是一种不良的编程实践。以下是这种做法的一些潜在问题：

1. 耦合度高：代码与界面元素紧密耦合，这使得代码更难以维护和重用。如果你更改了界面元素（例如更改了元素的名称或类型），你可能需要修改引用这个元素的所有代码。
2. 测试困难：由于代码直接依赖于界面元素，这使得单元测试变得困难。你可能需要创建一个界面元素的实例，或者使用复杂的模拟技术，才能测试这些代码。
3. 违反MVVM模式：在WPF中，推荐使用MVVM（Model-View-ViewModel）模式来组织代码。在MVVM模式中，视图（View）和模型（Model）之间的交互是通过视图模型（ViewModel）来进行的，而不是直接在代码中引用界面元素。

开始使用MVVM模式

RelayCommand

首先新建一个Commands文件夹，新建一个RelayComand类：

RelayCommand如下：

public class RelayCommand : ICommand
{
  
    public event EventHandler? CanExecuteChanged;

    private Action<object> _Excute { get; set; }

    private Predicate<object> _CanExcute { get;set; }

    public RelayCommand(Action<object> ExcuteMethod, Predicate<object> CanExcuteMethod)
    {
        _Excute = ExcuteMethod;
        _CanExcute = CanExcuteMethod;
    }

    public bool CanExecute(object? parameter)
    {
       return _CanExcute(parameter);
    }

    public void Execute(object? parameter)
    {
       _Excute(parameter);
    }
}

RelayCommand实现了ICommand接口。

先来介绍一下ICommand接口。

ICommand

在WPF（Windows Presentation Foundation）中，ICommand是一个接口，它定义了一种机制，用于在用户界面(UI)中处理事件，这种机制与用户界面的具体行为进行了解耦。这是实现MVVM（Model-View-ViewModel）设计模式的关键部分。

ICommand接口包含两个方法和一个事件：

• Execute(object parameter)：当调用此命令时，应执行的操作。
• CanExecute(object parameter)：如果可以执行Execute方法，则返回true；否则返回false。这可以用于启用或禁用控件，例如按钮。
• CanExecuteChanged事件：当CanExecute的返回值可能发生更改时，应引发此事件。

ICommand的结构图如下所示：

代码如下所示：

public interface ICommand
 {
  
     event EventHandler? CanExecuteChanged;
  
     bool CanExecute(object? parameter);
    
     void Execute(object? parameter);
 }

现在再来看看RelayCommand。

RelayCommand

RelayCommand是一种常用于WPF和MVVM模式的设计模式，它是一种特殊的命令类型。在MVVM模式中，RelayCommand允许将命令的处理逻辑从视图模型中分离出来，使得视图模型不需要知道命令的具体执行逻辑，从而实现了视图模型和命令处理逻辑的解耦。

RelayCommand通常包含两个主要部分：CanExecute和Execute。CanExecute是一个返回布尔值的函数，用于确定命令是否可以执行。Execute是一个执行命令的函数，当CanExecute返回true时，Execute将被调用。

这种设计模式使得你可以在不改变视图模型的情况下，更改命令的处理逻辑，提高了代码的可维护性和可重用性。

简单理解就是RelayCommand是ICommand接口的一个常见实现，它允许你将Execute和CanExecute的逻辑定义为委托，从而实现对命令的灵活处理。

在RelayCommand中我们定义了两个委托：

private Action<object> _Excute { get; set; }

private Predicate<object> _CanExcute { get;set; }

Action