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

本教程演示如何調整列布局、指定單元格編輯器和設置顯示值的格式，本教程以上一篇內容為基礎（）。

獲取DevExpress v24.1正式版下載

DevExpress技術交流群10：532598169      歡迎一起進群討論

創(chuàng)建列

如果屬性設置為AddNew，GridControl將為綁定數(shù)據(jù)源中的所有字段生成列。向GridControl顯式地添加列，來僅顯示所需的列和每個列的訪問設置：

1. 將屬性設置為None(默認值)。

 2. 將 對象添加到 集合，因為這個集合是GridControl內容屬性，所以可以直接將GridColumn對象添加到GridControl標記中。

3. 指定屬性將其綁定到數(shù)據(jù)源字段。

MainView.xaml

<dxg:GridControl EnableSmartColumnsGeneration="True"
ItemsSource="{Binding Orders}">
<dxg:GridControl.View>
<dxg:TableView/>
</dxg:GridControl.View>
<dxg:GridColumn FieldName="OrderId"/>
<dxg:GridColumn FieldName="CustomerId"/>
<dxg:GridColumn FieldName="OrderDate"/>
<dxg:GridColumn FieldName="ShipVia"/>
<dxg:GridColumn FieldName="Freight"/>
<dxg:GridColumn FieldName="ShipName"/>
<dxg:GridColumn FieldName="ShipCity"/>
<dxg:GridColumn FieldName="ShipCountry"/>
</dxg:GridControl>

更改列布局

自適應列GridControl，并設置所有列的最佳寬度，來完全顯示其內容：

1. 將屬性設置為true來使列自適應GridControl。

2. 指定屬性根據(jù)單元格和標題內容計算所有列的最佳寬度。

MainView.xaml

<dxg:GridControl.View>
<dxg:TableView AutoWidth="True"
BestFitModeOnSourceChange="VisibleRows"/>
</dxg:GridControl.View>

指定一個In-Place編輯器

GridControl使用in-place編輯器編輯單元格值，編輯器類型取決于列內容。CheckEdit用于布爾值，DateEdit用于日期，TextEdit用于字符串和數(shù)字，您可以定義一個自定義編輯器如下（例如，ComboBoxEdit）：

1. 向視圖模型添加一個Shippers集合：

MainViewModels.cs

using DevExpress.Mvvm;
using Microsoft.EntityFrameworkCore;
using System.Collections.Generic;
using WPFBlankDotNETCoreAppWithNorthwindDatabase.Models;

namespace WPFBlankDotNETCoreAppWithNorthwindDatabase {
public class ViewModel : ViewModelBase {
NorthwindEntities northwindDBContext;

public ICollection<Order> Orders {
get => GetValue<ICollection<Order>>();
private set => SetValue(value);
}
public ICollection<Shipper> Shippers {
get => GetValue<ICollection<Shipper>>();
private set => SetValue(value);
}

public ViewModel() {
northwindDBContext = new NorthwindEntities();

northwindDBContext.Orders.Load();
Orders = northwindDBContext.Orders.Local;

northwindDBContext.Shippers.Load();
Shippers = northwindDBContext.Shippers.Local;
}
}
}

MainViewModels.vb

Imports 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 Namespace

2. 將xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"命名空間添加到。

3. 創(chuàng)建一個對象，并將其分配給ShipVia列的屬性。

4. 指定屬性將綁定到數(shù)據(jù)。

5. 將屬性設置為CompanyName，將屬性設置為ShipperId。

MainView.xaml

<dx:ThemedWindow
...
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
<!-- ... -->
<dxg:GridColumn FieldName="ShipVia">
<dxg:GridColumn.EditSettings>
<dxe:ComboBoxEditSettings ItemsSource="{Binding Shippers}"
DisplayMember="CompanyName"
ValueMember="ShipperId"/>
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>

格式值

您可以配置GridControl顯示數(shù)據(jù)的方式，下面的示例將運費列數(shù)據(jù)格式化為貨幣：

1. 創(chuàng)建一個 對象，并將其分配給Freight列的 屬性。

2. 指定和屬性來設置編輯器掩碼為貨幣。

3. 將屬性設置為true。

MainView.xaml

<dxg:GridColumn FieldName="Freight">
<dxg:GridColumn.EditSettings>
<dxe:TextEditSettings Mask="c" MaskType="Numeric"
MaskUseAsDisplayFormat="True"/>
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>