概述：本文主要展示如何在一些基本的MVVM場景中使用WinUI數據網格，歡迎下載相關工具體驗哦~

MVVM是眾所周知的用于WinUI和WPF等平臺的靈活且結構良好的應用程序基礎，這就是為什么我們在開發控件時特別注意MVVM使用場景的原因。在本文中，我們將向您展示如何在一些基礎的MVVM場景中使用WinUI數據網格。

DevExpress WPF v22.1正式版下載

獲取View Model中的選定項

Data Grid允許您將其選定項目的集合綁定到視圖模型中的屬性。

將所選項目的集合添加到視圖模型并在視圖模型的構造函數中對其進行初始化，還可以修改此集合，Data Grid將反映此類更改：

[GenerateViewModel]
public partial class MainViewModel {
public MainViewModel() {
Source = ProductsDataModel.GetProducts();
// ...
Selection = new ObservableCollection<Product>() {Source.ElementAt(0)};
}
// ...
[GenerateProperty]
ObservableCollection<Product> selection;
}

啟用模式來將Data Grid的屬性綁定到選擇集合：

<dxg:GridControl ...
SelectionMode="RowExtended"
SelectedItems="{x:Bind ViewModel.Selection, Mode=TwoWay}"/>

這就是將Data Grid的選定項與視圖模型屬性同步所需要做的一切。

使用UI Services從視圖模型中調用Message Box

接來下我們將繼續介紹如何根據MVVM技術顯示帶有選定行的消息框，在這種情況下，我們將使用來避免訪問視圖模型中的可視元素。

將添加到視圖并將其屬性綁定到視圖模型：

<dxg:GridControl ...
SelectionMode="RowExtended"
SelectedItems="{x:Bind ViewModel.Selection, Mode=TwoWay}">
<dx:Interaction.Behaviors>
<dx:MessageBoxService ServiceClient="{x:Bind ViewModel}"/>
</dx:Interaction.Behaviors>
</dxg:GridControl>

將參數添加到 GenerateViewModel 屬性并創建一個使用 來顯示所選項目的命令

[GenerateViewModel(ImplementISupportUIServices=true)]
public partial class MainViewModel {
// ...
IMessageBoxService MessageBoxService => GetUIService<IMessageBoxService>();

[GenerateCommand]
async void ShowSelectedRows() {
string Text = "";
foreach (Product product in Selection) {
Text += product.ProductName + "\r\n";
}
await MessageBoxService.ShowAsync(Text, "Selected Products");
}
bool CanShowSelectedRows() => Selection.Any();
}

訂閱 Selection 集合的事件來在用戶每次選擇或取消選擇行時刷新 ShowSelectedRows 命令的 CanExecute 狀態：

[GenerateViewModel(ImplementISupportUIServices=true)]
public partial class MainViewModel {
public MainViewModel() {
// ...
Selection.CollectionChanged += (s, e) => ShowSelectedRowsCommand.RaiseCanExecuteChanged();
}
// ...
}

添加一個執行 ShowSelectedRows 命令的按鈕：

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<!-- ... -->
<Button Grid.Row="1"
HorizontalAlignment="Stretch"
Content="Show Selected Products"
Command="{x:Bind ViewModel.ShowSelectedRowsCommand}"/>
</Grid>

使用EventToCommand Behavior將數據網格事件分配給視圖模型命令

Data Grid允許您使用 behavior將數據網格事件與視圖模型命令相關聯，您可以使用此操作來初始化視圖模型中的新行。

指定屬性來顯示新項目行，此行允許用戶向數據網格添加新行。

添加一個 操作來執行視圖模型命令替代事件：

<dxg:GridControl ...
NewItemRowPosition="Top">
<dx:Interaction.Behaviors>
<dx:EventToCommand EventName="AddingNewRow"
PassEventArgsToCommand="True"
Command="{x:Bind ViewModel.AddingNewRowCommand}"/>
</dx:Interaction.Behaviors>
</dxg:GridControl>

創建一個命令，當用戶開始編輯新項目行時，將具有預定義值的新對象添加到數據源：

[GenerateCommand]
void AddingNewRow(AddingNewEventArgs e) =>
e.NewObject = new Product {ProductName = "", Country = "Austria", UnitPrice = 0, OrderDate = System.DateTime.Today};

DevExpress WPF | 下載試用

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

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