界面控件DevExpress WPF – 如何在WinUI中创建第一个MVVM应用程序

让我们从创建裸视图模型开始，您可以选择以下视图模型类型：

1. 编译时生成的视图模型
2. ViewModelBase – 后代视图模型
3. 具有INotifyPropertyChanged 接口实现的简单类

将DevExpress.Mvvm.CodeGenerators和DevExpress.WinUI NuGet包添加到您的项目中，添加包后创建一个视图模型类并将GenerateViewModel属性分配给它：

using DevExpress.Mvvm.CodeGenerators;[GenerateViewModel]public partial class MainViewModel {[GenerateProperty]string userName;[GenerateCommand]void Register() {Debug.WriteLine($"{UserName} was successfully registered!");}}

请注意，您需要将类设为部分并添加 DevExpress.Mvvm.CodeGenerators 命名空间。

编译时生成器会自动创建具有 INotifyPropertyChanged 支持的视图模型对应项：

partial class MainViewModel : INotifyPropertyChanged {public event PropertyChangedEventHandlerPropertyChanged;protected void RaisePropertyChanged(PropertyChangedEventArgs e) => PropertyChangedInvoke(this, e);public stringUserName {get => userName;set {if(EqualityComparer.Default.Equals(userName, value)) return;userName = value;RaisePropertyChanged(UserNameChangedEventArgs);}}DelegateCommandregisterCommand;public DelegateCommand RegisterCommand => registerCommand = new DelegateCommand(Register, null);static PropertyChangedEventArgs UserNameChangedEventArgs = new PropertyChangedEventArgs(nameof(UserName));}

您可以在项目中查看生成的类：Dependencies -> Analyzers -> DevExpress.Mvvm.CodeGenerators -> DevExpress.Mvvm.CodeGenerators.ViewModelGenerator -> MainViewModel.g.cs

将 CanRegister 方法添加到您的视图模型以确定何时可以执行 Register 命令。 请注意，WinUI 命令不使用 CommandManager，因此您需要使用 RaiseCanExecuteChanged 手动刷新 CanExecute 状态：

public partial class MainViewModel {//...void OnUserNameChanged() {RegisterCommand.RaiseCanExecuteChanged();}bool CanRegister() => !string.IsNullOrEmpty(UserName);}

代码生成器将自动将 OnUserNameChanged 和 CanRegister 合并到 UserName 属性和 Register 命令中。

视图模型具有存储用户名的UserName属性和注册用户的RegisterCommand方法，创建一个简单的UI 来使用视图模型，向主窗口添加一个 TextBox 和一个 Button 并将它们绑定到视图模型的属性和命令：

<StackPanel><TextBox Text="{x:Bind ViewModel.UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/><Button Content="Register" Command="{x:Bind ViewModel.RegisterCommand}"/></StackPanel>

public sealed partial class MainWindow : Window {public MainViewModel ViewModel { get; } = new MainViewModel();public MainWindow() {this.InitializeComponent();}}

现在简单的 MVVM 应用程序可以将信息从视图发送到视图模型并执行视图模型的命令，扩展它以在用户单击Register按钮时显示一个消息框。使用 UI 服务，可以不直接从视图模型访问视觉元素，这将帮助我们保持干净的 MVVM 模式。将 MessageBoxService 添加到视图并将其 ServiceClient 属性绑定到您的视图模型：

<Window ...xmlns:dxc="using:DevExpress.WinUI.Core"><StackPanel><dxc:Interaction.Behaviors><dxc:MessageBoxService ServiceClient="{x:Bind ViewModel}"/></dxc:Interaction.Behaviors><TextBox Text="{x:Bind ViewModel.UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/><Button Content="Register" Command="{x:Bind ViewModel.RegisterCommand}"/></StackPanel></Window>

然后，将 ImplementISupportUIServices 参数添加到 GenerateViewModel 属性并在 Register 方法中使用 MessageBoxService：

using DevExpress.Mvvm;using DevExpress.Mvvm.CodeGenerators;[GenerateViewModel(ImplementISupportUIServices = true)]public partial class MainViewModel {[GenerateProperty]string userName;IMessageBoxService MessageBoxService { get => ServiceContainer.GetService<IMessageBoxService>(); }[GenerateCommand]void Register() {MessageBoxService.ShowAsync($"{UserName} was successfully registered!", "Registration");}}

现在，用户单击按钮后将看到一个消息框。 请注意，您的视图模型不会直接访问任何视觉元素，相反服务机制被用作中间层。

让我们通过在用户按下 Enter 键时调用 Register 命令来增强用户体验，WinUI 按钮没有 IsDefault 属性，因此需要处理按键事件以捕捉按下 Enter 的时刻。但MVVM 套件具有 KeyToCommand 行为，可以在使用指定键时调用命令。 将 KeyToCommand 行为添加到 Interaction.Behaviors 集合并设置其 KeyGesture 和 Command 属性：

<StackPanel><dxc:Interaction.Behaviors><dxc:KeyToCommand KeyGesture="Enter" Command="{x:Bind ViewModel.RegisterCommand}"/><!--...--></dxc:Interaction.Behaviors><!--...--></StackPanel>

KeyToCommand 是一种可以立即使用的操作，但是您可以轻松地根据需要创建自定义行为，以避免在不同的视图中编写类似的代码隐藏。

DevExpress WPF | 下载试用

DevExpress WPF拥有120+个控件和库，将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序，这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件的衍伸产品，还是以数据为中心的商业智能产品，都能通过DevExpress WPF控件来实现。

DevExpress技术交流群6：600715373      欢迎一起进群讨论