在本文中，我們將描述如何從頭開始創(chuàng)建WinUI MVVM 應用程序，并在此過程中展示DevExpress WinUI MVVM框架的強大功能。

最初，官方技術團隊為WPF平臺創(chuàng)建了MVVM 框架，后來發(fā)現(xiàn)在這個框架中開發(fā)的技術可以很容易地在 WinForms 中使用，所以將框架移植到那里。 在 v22.1 中，官方團隊針對WinUI優(yōu)化了MVVM框架，保持核心功能不變，如果您使用我們的WPF或WinForms控件，在遷移到WinUI時不會遇到任何問題。

DevExpress WPF v22.1正式版下載

讓我們從創(chuàng)建裸視圖模型開始，您可以選擇以下視圖模型類型：

1. 編譯時生成的視圖模型
2. - 后代視圖模型
3. 具有 接口實現(xiàn)的簡單類

本文中使用第一個選項，因為它可以讓您的視圖模型代碼保持干凈、緊湊，并幫助避免拼寫錯誤。

將DevExpress.Mvvm.CodeGenerators和DevExpress.WinUI NuGet包添加到您的項目中，添加包后創(chuàng)建一個視圖模型類并將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 命名空間。

編譯時生成器會自動創(chuàng)建具有 INotifyPropertyChanged 支持的視圖模型對應項：

partial class MainViewModel : INotifyPropertyChanged {
public event PropertyChangedEventHandler? PropertyChanged;

protected void RaisePropertyChanged(PropertyChangedEventArgs e) => PropertyChanged?.Invoke(this, e);

public string? UserName {
get => userName;
set {
if(EqualityComparer.Default.Equals(userName, value)) return;
userName = value;
RaisePropertyChanged(UserNameChangedEventArgs);
}
}
DelegateCommand? registerCommand;
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 方法添加到您的視圖模型以確定何時可以執(zhí)行 Register 命令。 請注意，WinUI 命令不使用 CommandManager，因此您需要使用 RaiseCanExecuteChanged 手動刷新 CanExecute 狀態(tài)：

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

代碼生成器將自動將 OnUserNameChanged 和 CanRegister 合并到 UserName 屬性和 Register 命令中。

視圖模型具有存儲用戶名的UserName屬性和注冊用戶的RegisterCommand方法，創(chuàng)建一個簡單的UI 來使用視圖模型，向主窗口添加一個 TextBox 和一個 Button 并將它們綁定到視圖模型的屬性和命令：

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

您可能已經(jīng)注意到，本文中使用了 替代 Binding，x:Bind 是 UWP 中引入的一個相對較新的標記擴展。它在編譯時使用類型信息來優(yōu)化綁定，因此最好盡可能使用它。 在窗口或用戶控件中使用 x:Bind 時，默認綁定源是窗口本身，因此需要將視圖模型定義為窗口屬性：

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

現(xiàn)在簡單的 MVVM 應用程序可以將信息從視圖發(fā)送到視圖模型并執(zhí)行視圖模型的命令，擴展它以在用戶單擊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 參數(shù)添加到 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");
}
}

現(xiàn)在，用戶單擊按鈕后將看到一個消息框。 請注意，您的視圖模型不會直接訪問任何視覺元素，相反服務機制被用作中間層。

讓我們通過在用戶按下 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 是一種可以立即使用的操作，但是您可以輕松地根據(jù)需要創(chuàng)建自定義行為，以避免在不同的視圖中編寫類似的代碼隱藏。

DevExpress WPF | 下載試用

DevExpress WPF擁有120+個控件和庫，將幫助您交付滿足甚至超出企業(yè)需求的高性能業(yè)務應用程序。通過DevExpress WPF能創(chuàng)建有著強大互動功能的XAML基礎應用程序，這些應用程序專注于當代客戶的需求和構建未來新一代支持觸摸的解決方案。 無論是Office辦公軟件的衍伸產(chǎn)品，還是以數(shù)據(jù)為中心的商業(yè)智能產(chǎn)品，都能通過DevExpress WPF控件來實現(xiàn)。

DevExpress技術交流群6：600715373      歡迎一起進群討論