概述：本文主要展示如何在一些基本的MVVM場景中使用WinUI數(shù)據(jù)網(wǎng)格，歡迎下載相關(guān)工具體驗(yàn)哦~

MVVM是眾所周知的用于WinUI和WPF等平臺的靈活且結(jié)構(gòu)良好的應(yīng)用程序基礎(chǔ)，這就是為什么我們在開發(fā)控件時特別注意MVVM使用場景的原因。在本文中，我們將向您展示如何在一些基礎(chǔ)的MVVM場景中使用WinUI數(shù)據(jù)網(wǎng)格。

DevExpress WPF v22.1正式版下載

獲取View Model中的選定項(xiàng)

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

將所選項(xiàng)目的集合添加到視圖模型并在視圖模型的構(gòu)造函數(shù)中對其進(jìn)行初始化，還可以修改此集合，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的選定項(xiàng)與視圖模型屬性同步所需要做的一切。

使用UI Services從視圖模型中調(diào)用Message Box

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

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

<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>

將參數(shù)添加到 GenerateViewModel 屬性并創(chuàng)建一個使用 來顯示所選項(xiàng)目的命令

[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 狀態(tài)：

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

添加一個執(zhí)行 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將數(shù)據(jù)網(wǎng)格事件分配給視圖模型命令

Data Grid允許您使用 behavior將數(shù)據(jù)網(wǎng)格事件與視圖模型命令相關(guān)聯(lián)，您可以使用此操作來初始化視圖模型中的新行。

指定屬性來顯示新項(xiàng)目行，此行允許用戶向數(shù)據(jù)網(wǎng)格添加新行。

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

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

創(chuàng)建一個命令，當(dāng)用戶開始編輯新項(xiàng)目行時，將具有預(yù)定義值的新對象添加到數(shù)據(jù)源：

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

DevExpress WPF | 下載試用

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

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論