结合当前的 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();
// 初始化 ViewModel
viewModel = 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)完全分离,代码更加模块化、易于测试和维护