界面控件DevExpress WPF——在MVVM场景中使用WinUI数据 格（上）

MVVM是众所周知的用于WinUI和

创建视图模型并将数据 格绑定到数据

从一个包含数据 格数据的简单视图模型开始。

创建一个 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 集合：

<Windowx:Class="WinUIMVVMGrid.MainWindow"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 模式生成和配置列，此技术允许您根据数据源类型或视图模型中的其他自定义逻辑动态更改 格列集。

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>

在上面的代码片段中，我们使用了TypedDataTemplateSelector，它允许您选择模板，而无需编写一行 C# 代码，您可以指定一个标准模板选择器。

将ColumnsSource属性绑定到视图模型的 Column 集合，并将模板选择器分配给ColumnTemplateSelector属性：

<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      欢迎一起进群讨论