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

DevExpress WPF v21.2正式版下載

創建視圖模型并將數據網格綁定到數據

從一個包含數據網格數據的簡單視圖模型開始。

創建一個 WinUI 應用程序并安裝DevExpress WinUI 控件套件。

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

創建一個具有 Source 屬性的視圖模型，該屬性從數據模型中檢索數據并可用作 GridControl 的綁定源：

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

[GenerateProperty]
ObservableCollection<Product> source;
}

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

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>

從您的視圖模型生成數據網格列

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

創建描述網格列的類，在此示例中我們使用顯示文本值的列、帶有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 集合添加到視圖模型并使用要顯示的網格列填充它：

[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;
}

數據網格根據模板生成其列，為每種列類型指定一個模板，并創建一個模板選擇器，該選擇器根據列類型返回一個列模板：

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

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