【C#】在 WinForms 中使用 MVVM（Model-View-ViewModel）设计模式

在这里插入图片描述

结合当前的 DevExpress 项目，在 WinForms 中使用 MVVM（Model-View-ViewModel） 设计模式。这个例子将通过数据绑定、命令绑定来展示 MVVM 模式的运用。

1. 项目结构

假设我们要实现一个简单的应用程序，它有一个文本框和一个按钮，用户输入内容后点击按钮，内容会显示在列表框中。这种交互将通过 MVVM 设计模式来完成，且我们会使用 DevExpress 的控件。

项目结构如下：

DXApplication1
├── Model
│   └── DataModel.cs        // 模型，表示数据
├── View
│   ├── MainView.cs         // 视图，WinForms 窗体
│   ├── MainView.Designer.cs // 设计器自动生成的代码
│   └── MainView.resx       // 窗体资源文件
└── ViewModel└── MainViewModel.cs    // 视图模型，处理逻辑和数据绑定

2. Model (数据模型)

首先，我们创建一个数据模型来存储用户输入的数据。

// Model/DataModel.cs
namespace DXApplication1.Model
{public class DataModel{public string UserInput { get; set; }public DataModel(string userInput){UserInput = userInput;}}
}

这个 DataModel 类是一个简单的数据结构，用来存储用户输入的字符串。

3. View (视图)

在 MainView.cs 中，我们设计一个界面，有一个文本框、一个按钮和一个列表框。我们使用 DevExpress 提供的控件来展示这些元素。

// View/MainView.cs
using System;
using System.Windows.Forms;
using DevExpress.XtraEditors;
using DXApplication1.ViewModel;namespace DXApplication1.View
{public partial class MainView : DevExpress.XtraEditors.XtraForm{private MainViewModel viewModel;public MainView(){InitializeComponent();// 初始化 ViewModelviewModel = new MainViewModel();this.DataBindings.Add(new Binding("Text", viewModel, "WindowTitle")); // 绑定窗体标题this.textEditUserInput.DataBindings.Add(new Binding("Text", viewModel, "UserInput", true, DataSourceUpdateMode.OnPropertyChanged));this.simpleButtonSubmit.DataBindings.Add(new Binding("Enabled", viewModel, "IsSubmitEnabled"));this.listBoxControlOutput.DataSource = viewModel.Items;// 将按钮点击事件绑定到 ViewModel 的命令this.simpleButtonSubmit.Click += (s, e) => viewModel.SubmitCommand.Execute(null);}}
}

关键点：

数据绑定：文本框绑定到 UserInput 属性，列表框绑定到 Items 集合。
按钮点击事件：按钮点击事件绑定到 ViewModel 的 SubmitCommand 命令。

我们假设 InitializeComponent() 方法自动生成了如下控件：

textEditUserInput：文本框，用于输入用户内容。
simpleButtonSubmit：按钮，用于提交输入。
listBoxControlOutput：列表框，用于显示提交后的内容。

4. ViewModel (视图模型)

在 ViewModel 中，我们管理用户的输入和提交逻辑。这个 ViewModel 负责处理所有与视图的交互，并使用 INotifyPropertyChanged 来实现数据绑定。

// ViewModel/MainViewModel.cs
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Windows.Input;
using DevExpress.Mvvm;
using DXApplication1.Model;namespace DXApplication1.ViewModel
{public class MainViewModel : ViewModelBase{private string userInput;private bool isSubmitEnabled;public MainViewModel(){Items = new ObservableCollection<DataModel>();SubmitCommand = new DelegateCommand(OnSubmit, CanSubmit);}// 绑定到输入框的属性public string UserInput{get => userInput;set{if (SetProperty(ref userInput, value, nameof(UserInput))){// 每次修改输入时，检查是否可以提交isSubmitEnabled = !string.IsNullOrWhiteSpace(userInput);RaisePropertyChanged(nameof(IsSubmitEnabled));}}}// 提交按钮是否可用public bool IsSubmitEnabled => isSubmitEnabled;// 提交命令public ICommand SubmitCommand { get; }// 存储用户提交的列表public ObservableCollection<DataModel> Items { get; }// 提交按钮的逻辑private void OnSubmit(){// 将输入添加到列表中Items.Add(new DataModel(UserInput));UserInput = string.Empty;  // 清空输入框}// 提交按钮是否可用的逻辑private bool CanSubmit(){return !string.IsNullOrWhiteSpace(UserInput);}}
}

关键点：

UserInput：与视图中的输入框绑定，用户在输入框中的内容通过 UserInput 属性与视图模型中的数据同步。
Items：与列表框绑定，存储用户提交的所有输入内容。
SubmitCommand：与按钮绑定，处理提交逻辑。我们使用了 DevExpress 提供的 DelegateCommand 来处理按钮的点击事件。
INotifyPropertyChanged：通过继承 ViewModelBase，视图模型自动支持属性变更通知，使得视图可以根据属性变化更新。

5. 运行效果

当运行项目时：

用户在文本框中输入文字。
只有在文本框不为空时，提交按钮才会被启用（通过 IsSubmitEnabled 控制）。
用户点击提交按钮后，输入的文字会被添加到列表框中，显示在界面上，输入框会被清空，等待新的输入。

6. 总结

Model：DataModel 代表数据（用户输入内容），用于存储信息。
View：MainView 是用户界面，负责展示控件。通过数据绑定与 ViewModel 交互。
ViewModel：MainViewModel 负责处理用户输入和数据逻辑，它通过 UserInput 属性和 SubmitCommand 命令与视图交互。INotifyPropertyChanged 使得视图在 ViewModel 属性变化时自动更新。

这是一个基础的 MVVM 实例，它展示了如何在 WinForms 项目中使用 DevExpress 组件和 MVVM 模式来实现清晰的逻辑分离。通过 MVVM，界面（View）和逻辑（ViewModel）完全分离，代码更加模块化、易于测试和维护