在本文中我們將演示如何從頭開始創建WinUI MVVM應用程序，并在此過程中展示DevExpressWinUI MVVM框架的強大功能。

DevExpress WPF v21.2正式版下載

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

從創建裸視圖模型開始，您可以選擇以下視圖模型類型：

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

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

 將 和 DevExpress.WinUI NuGet 包添加到您的項目中（請注意，您需要獲取免費的報價源或安裝我們的組件才能訪問 DevExpress.WinUI 包）。 添加包后，創建一個視圖模型類并將 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 命名空間。

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

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 方法添加到您的視圖模型以確定何時可以執行 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>

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

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

 現在簡單的 MVVM 應用程序可以將信息從視圖發送到視圖模型并執行視圖模型的命令，擴展它來在用戶單擊Register按鈕時顯示一個消息框。使用 UI 服務，防止不直接從視圖模型訪問視覺元素，這將幫助我們保持干凈的 MVVM 模式，將 添加到視圖并將其 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 行為添加到 Interaction.Behaviors 集合并設置其 和 屬性：

<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      歡迎一起進群討論