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

DevExpress WPF v21.2正式版下載

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

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

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

本示例使用編譯時(shí)生成的視圖模型來(lái)保持其代碼緊湊和干凈，安裝DevExpress.Mvvm.CodeGenerators NuGet 包來(lái)獲取對(duì)視圖模型生成器的訪問(wèn)權(quán)限。

創(chuàng)建一個(gè)具有 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)建一個(gè) ViewModel 屬性，該屬性返回創(chuàng)建的視圖模型。 此屬性允許您使用 x:Bind 技術(shù)將數(shù)據(jù)網(wǎng)格綁定到查看模型屬性，x:Bind 是一個(gè)相對(duì)較新的標(biāo)記擴(kuò)展，它在編譯時(shí)使用類型信息來(lái)優(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 來(lái)根據(jù) MVVM 模式生成和配置列，此技術(shù)允許您根據(jù)數(shù)據(jù)源類型或視圖模型中的其他自定義邏輯動(dòng)態(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ù)模板生成其列，為每種列類型指定一個(gè)模板，并創(chuàng)建一個(gè)模板選擇器，該選擇器根據(jù)列類型返回一個(gè)列模板：

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>

在上面的代碼片段中，我們使用了，它允許您選擇模板，而無(wú)需編寫一行 C# 代碼，您可以指定一個(gè)標(biāo)準(zhǔn)模板選擇器。

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

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

DevExpress WPF | 下載試用

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

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