DevExpress WPF中文教程:如何完成GridControl的列和编辑器配置?

📅 2026/7/10 14:13:39
DevExpress WPF中文教程:如何完成GridControl的列和编辑器配置?
DevExpress WPF拥有120个控件和库将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件的衍伸产品还是以数据为中心的商业智能产品都能通过DevExpress WPF控件来实现。本教程演示如何调整列布局、指定单元格编辑器和设置显示值的格式本教程以上一篇内容为基础。创建列如果AutoGenerateColumns属性设置为AddNewGridControl将为绑定数据源中的所有字段生成列。向GridControl显式地添加列来仅显示所需的列和每个列的访问设置1. 将DataControlBase.AutoGenerateColumns属性设置为None(默认值)。2. 将GridColumn 对象添加到GridControl.Columns 集合因为这个集合是GridControl内容属性所以可以直接将GridColumn对象添加到GridControl标记中。3. 指定ColumnBase.FieldName属性将其绑定到数据源字段。MainView.xamldxg:GridControl EnableSmartColumnsGenerationTrue ItemsSource{Binding Orders} dxg:GridControl.View dxg:TableView/ /dxg:GridControl.View dxg:GridColumn FieldNameOrderId/ dxg:GridColumn FieldNameCustomerId/ dxg:GridColumn FieldNameOrderDate/ dxg:GridColumn FieldNameShipVia/ dxg:GridColumn FieldNameFreight/ dxg:GridColumn FieldNameShipName/ dxg:GridColumn FieldNameShipCity/ dxg:GridColumn FieldNameShipCountry/ /dxg:GridControl更改列布局自适应列GridControl并设置所有列的最佳宽度来完全显示其内容1. 将TableView.AutoWidth属性设置为true来使列自适应GridControl。2. 指定TableView.BestFitModeOnSourceChange属性根据单元格和标题内容计算所有列的最佳宽度。MainView.xamldxg:GridControl.View dxg:TableView AutoWidthTrue BestFitModeOnSourceChangeVisibleRows/ /dxg:GridControl.View指定一个In-Place编辑器GridControl使用in-place编辑器编辑单元格值编辑器类型取决于列内容。CheckEdit用于布尔值DateEdit用于日期TextEdit用于字符串和数字您可以定义一个自定义编辑器如下例如ComboBoxEdit1. 向视图模型添加一个Shippers集合MainViewModels.csusing DevExpress.Mvvm; using Microsoft.EntityFrameworkCore; using System.Collections.Generic; using WPFBlankDotNETCoreAppWithNorthwindDatabase.Models; namespace WPFBlankDotNETCoreAppWithNorthwindDatabase { public class ViewModel : ViewModelBase { NorthwindEntities northwindDBContext; public ICollectionOrder Orders { get GetValueICollectionOrder(); private set SetValue(value); } public ICollectionShipper Shippers { get GetValueICollectionShipper(); private set SetValue(value); } public ViewModel() { northwindDBContext new NorthwindEntities(); northwindDBContext.Orders.Load(); Orders northwindDBContext.Orders.Local; northwindDBContext.Shippers.Load(); Shippers northwindDBContext.Shippers.Local; } } }MainViewModels.vbImports DevExpress.Mvvm Imports Microsoft.EntityFrameworkCore Imports System.Collections.Generic Imports WPFBlankDotNETCoreAppWithNorthwindDatabase.Models Namespace WPFBlankDotNETCoreAppWithNorthwindDatabase Public Class ViewModel Inherits ViewModelBase Private northwindDBContext As NorthwindEntities Public Property Orders As ICollection(Of Order) Get Return GetValue(Of ICollection(Of Order))() End Get Private Set(ByVal value As ICollection(Of Order)) Return SetValue(value) End Set End Property Public Property Shippers As ICollection(Of Shipper) Get Return GetValue(Of ICollection(Of Shipper))() End Get Private Set(ByVal value As ICollection(Of Shipper)) Return SetValue(value) End Set End Property Public Sub New() northwindDBContext New NorthwindEntities() northwindDBContext.Orders.Load() Orders northwindDBContext.Orders.Local northwindDBContext.Shippers.Load() Shippers northwindDBContext.Shippers.Local End Sub End Class End Namespace2. 将xmlns:dxehttp://schemas.devexpress.com/winfx/2008/xaml/editors命名空间添加到ThemedWindow。3. 创建一个ComboBoxEditSettings对象并将其分配给ShipVia列的ColumnBase.EditSettings属性。4. 指定ItemsSource属性将ComboBoxEditSettings绑定到数据。5. 将DisplayMember属性设置为CompanyName将ValueMember属性设置为ShipperId。MainView.xamldx:ThemedWindow ... xmlns:dxehttp://schemas.devexpress.com/winfx/2008/xaml/editors !-- ... -- dxg:GridColumn FieldNameShipVia dxg:GridColumn.EditSettings dxe:ComboBoxEditSettings ItemsSource{Binding Shippers} DisplayMemberCompanyName ValueMemberShipperId/ /dxg:GridColumn.EditSettings /dxg:GridColumn格式值您可以配置GridControl显示数据的方式下面的示例将运费列数据格式化为货币1. 创建一个TextEditSettings 对象并将其分配给Freight列的ColumnBase.EditSettings 属性。2. 指定TextEditSettings.MaskType和TextEditSettings.Mask属性来设置编辑器掩码为货币。3. 将TextEditSettings.MaskUseAsDisplayFormat属性设置为true。MainView.xamldxg:GridColumn FieldNameFreight dxg:GridColumn.EditSettings dxe:TextEditSettings Maskc MaskTypeNumeric MaskUseAsDisplayFormatTrue/ /dxg:GridColumn.EditSettings /dxg:GridColumn