windowsforms-113955-cross-platform-app-development-winforms-mvvm.md
Designed for WPF development, Model-View-ViewModel (MVVM) is an architectural design pattern that separates your application into three layers:
ModelDefines data and business logic.ViewThe UI that users interact with.ViewModelConnects the Model and View. Handles data and commands.
The following diagram illustrates MVVM layers and their ways of communication:
The following video introduces the DevExpress WinForms MVVM Framework and describes its benefits:
The DevExpress MVVM Framework allows you to utilize the Model-View-ViewModel (MVVM) design pattern in Windows Forms applications. MVVM allows you to separate the UI from business logic, reuse ViewModels across views, and test ViewModels independently of the UI.
The features of the DevExpress MVVM Framework include:
Explore over 100 examples with a live code section. These interactive demos are compiled in real-time, and they illustrate how to implement MVVM concepts in real-world apps.
The Microsoft MVVM Toolkit (CommunityToolkit.Mvvm) is a lightweight, modern MVVM library designed to reduce boilerplate code. It includes ObservableProperty, RelayCommand, and AsyncRelayCommand tools that simplify ViewModel creation. You can use CommunityToolkit.Mvvm in your DevExpress-powered applications independently or in combination with the DevExpress MVVM Framework.
The DevExpress Template Kit allows you to create a pre-configured MVVM-ready application powered by DevExpress UI components and the CommunityToolkit.Mvvm library:
| Feature | CommunityToolkit.Mvvm | DevExpress MVVM Framework |
|---|---|---|
| Property Binding | ObservableProperty | Property Bindings |
| Commands and Command Binding | RelayCommand | MVVM Commands |
| Source Generation | MVVM Toolkit Generator | MVVM Code Generator |
| Data Validation | ObservableValidator | Data Validation |
| Behaviors | DevExpress Behaviors | |
| Services | DevExpress Services |
Using DevExpress MVVM and CommunityToolkit.Mvvm frameworks together allows you to do the following:
[ObservableProperty] and [RelayCommand] in ViewModels.The following examples use the CommunityToolkit to create a ViewModel with automatically generated properties and commands. DevExpress MVVM Fluent API binds DevExpress TextEdit and SimpleButton controls to ViewModel properties and commands.
With CommunityToolkit, you can mark fields with [ObservableProperty] to generate INotifyPropertyChanged properties:
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
public partial class MainViewModel : ObservableObject {
[ObservableProperty]
private string? title = "Welcome to DevExpress!";
[ObservableProperty]
private string? userInput;
}
Use DevExpress Fluent API to bind these properties to DevExpress UI controls:
using DevExpress.XtraEditors;
public partial class Form1 : XtraForm {
public Form1() {
InitializeComponent();
textEdit1.Properties.UseAdvancedMode = DevExpress.Utils.DefaultBoolean.True;
textEdit1.Properties.NullValuePrompt = "Please enter your name";
// Create and assign a ViewModel.
mvvmContext1.ViewModelType = typeof(MainViewModel);
var fluent = mvvmContext1.OfType<MainViewModel>();
// Title and UserInput properties are generated automatically with change notifications.
fluent.SetBinding(textEdit1.Properties.AdvancedModeOptions, o => o.Label, x => x.Title);
fluent.SetBinding(textEdit1, te => te.Text, x => x.UserInput);
}
}
RelayCommand automatically creates commands. AsyncRelayCommand handles asynchronous commands. Use BindCommand to bind commands to DevExpress controls and UI elements.
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Threading.Tasks;
public partial class MainViewModel : ObservableObject {
[ObservableProperty]
private string? userInput;
// Generate the ShowMessageCommand automatically.
[RelayCommand]
public void ShowMessage() {
if (!string.IsNullOrEmpty(UserInput))
DevExpress.XtraEditors.XtraMessageBox.Show($"Hello, {UserInput}!");
else
DevExpress.XtraEditors.XtraMessageBox.Show($"Please enter your name.");
}
[RelayCommand]
public async Task LoadData() {
// Simulate a delay.
await Task.Delay(2000);
DevExpress.XtraEditors.XtraMessageBox.Show($"Data loaded successfully!");
}
}
The following code snippet binds DevExpress SimpleButton controls (btnShowMessage, btnLoadData) to ShowMessage and LoadData commands:
// Bind the 'Click' event of btnShowMessage to the 'ShowMessageCommand' in the ViewModel.
fluent.BindCommand(btnShowMessage, x => x.ShowMessage);
// Bind the 'Click' event of btnLoadData to the 'LoadDataAsyncCommand' in the ViewModel.
fluent.BindCommand(btnLoadData, x => x.LoadData);
Use the DevExpress Template Kit for .NET to speed up the initial setup of your MVVM-ready WinForms application. The MVVM Application template creates an MVVM-ready WinForms application powered by either the DevExpress MVVM Framework or Microsoft MVVM Toolkit (CommunityToolkit.Mvvm).
Download: Template Kit for Visual Studio Download: Template Kit for VS Code
Note
The DevExpress Template Kit includes project templates for .NET 8+ and C# only.
Important
The DevExpress Template Kit is currently available as a Community Technology Preview (CTP). It will eventually replace our Project Template Gallery (part of our Unified Component Installer).
Designed for simplicity and adaptability, our WinForms Dental Clinic demo demonstrates a modern, MVVM-ready user experience with minimal code requirements.
See Also