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

DevExpress WPF v21.2正式版下載

創(chuàng)建視圖模型并將數(shù)據(jù)網(wǎng)格綁定到數(shù)據(jù)

從一個包含數(shù)據(jù)網(wǎng)格數(shù)據(jù)的簡單視圖模型開始。

創(chuàng)建一個 WinUI 應用程序并安裝DevExpress WinUI 控件套件。

本示例使用編譯時生成的視圖模型來保持其代碼緊湊和干凈，安裝DevExpress.Mvvm.CodeGenerators NuGet 包來獲取對視圖模型生成器的訪問權限。

創(chuàng)建一個具有 Source 屬性的視圖模型，該屬性從數(shù)據(jù)模型中檢索數(shù)據(jù)并可用作 GridControl 的綁定源：

using DevExpress.Mvvm.CodeGenerators;
// ...
[GenerateViewModel]
public partial class MainViewModel {
public MainViewModel() {
Source = ProductsDataModel.GetProducts();
}

[GenerateProperty]
ObservableCollection<Product> source;
}

在 Window 類中，創(chuàng)建一個 ViewModel 屬性，該屬性返回創(chuàng)建的視圖模型。 此屬性允許您使用 x:Bind 技術將數(shù)據(jù)網(wǎng)格綁定到查看模型屬性，x:Bind 是一個相對較新的標記擴展，它在編譯時使用類型信息來優(yōu)化綁定。

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

將 Data Grid 的 ItemsSource 屬性綁定到視圖模型的 Source 集合：

<Window
x:Class="WinUIMVVMGrid.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WinUIMVVMGrid"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:dxg="using:DevExpress.WinUI.Grid"
mc:Ignorable="d">
<Grid>
<dxg:GridControl ItemsSource="{x:Bind ViewModel.Source}"/>
</Grid>
</Window>

從您的視圖模型生成數(shù)據(jù)網(wǎng)格列

數(shù)據(jù)網(wǎng)格提供靈活的 API 來根據(jù) MVVM 模式生成和配置列，此技術允許您根據(jù)數(shù)據(jù)源類型或視圖模型中的其他自定義邏輯動態(tài)更改網(wǎng)格列集。

創(chuàng)建描述網(wǎng)格列的類，在此示例中我們使用顯示文本值的列、帶有ComboBox 編輯器的列以及顯示 DateTime 值的列：

using DevExpress.Mvvm;
// ...
public class TextColumn : BindableBase {
public TextColumn(string fieldname) {
FieldName = fieldname;
}
public string FieldName { get; }
}
public class ComboBoxColumn : TextColumn {
public ComboBoxColumn(string fieldname, IList items) : base(fieldname) {
Items = items;
}
public IList Items { get; }
}
public class DateColumn : TextColumn {
public DateColumn(string fieldname) : base(fieldname) { }
}

將 Columns 集合添加到視圖模型并使用要顯示的網(wǎng)格列填充它：

[GenerateViewModel]
public partial class MainViewModel {
public MainViewModel() {
Source = ProductsDataModel.GetProducts();

IList Countries = Source.Select(x => x.Country).Distinct().ToList();
Columns = new ObservableCollection<TextColumn>() {
new TextColumn(nameof(Product.ProductName)),
new ComboBoxColumn(nameof(Product.Country), Countries),
new TextColumn(nameof(Product.UnitPrice)),
new DateColumn(nameof(Product.OrderDate))
};
}

[GenerateProperty]
ObservableCollection<Product> source;

[GenerateProperty]
ObservableCollection<TextColumn> columns;
}

數(shù)據(jù)網(wǎng)格根據(jù)模板生成其列，為每種列類型指定一個模板，并創(chuàng)建一個模板選擇器，該選擇器根據(jù)列類型返回一個列模板：

xmlns:dx="using:DevExpress.WinUI.Core"

<Grid.Resources>
<dx:TypedDataTemplateSelector x:Name="ColumnTemplateSelector">
<DataTemplate x:DataType="local:TextColumn" x:Name="TextColumn">
<dxg:GridTextColumn FieldName="{x:Bind FieldName}"/>
</DataTemplate>

<DataTemplate x:DataType="local:ComboBoxColumn" x:Name="ComboBoxColumn">
<dxg:GridComboBoxColumn FieldName="{x:Bind FieldName}" ItemsSource="{x:Bind Items}"/>
</DataTemplate>

<DataTemplate x:DataType="local:DateColumn" x:Name="DateColumn">
<dxg:GridDateColumn FieldName="{x:Bind FieldName}"/>
</DataTemplate>
</dx:TypedDataTemplateSelector>
</Grid.Resources>

在上面的代碼片段中，我們使用了，它允許您選擇模板，而無需編寫一行 C# 代碼，您可以指定一個標準模板選擇器。

將屬性綁定到視圖模型的 Column 集合，并將模板選擇器分配給屬性：

<dxg:GridControl ItemsSource="{x:Bind ViewModel.Source}"
NavigationStyle="Cell"
ColumnsSource="{x:Bind ViewModel.Columns}"
ColumnTemplateSelector="{StaticResource ColumnTemplateSelector}"/>

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