DevExpress WPF 擁有120+個控制元件和庫，將幫助您交付滿足甚至超出企業需求的高效能業務應用程式。透過DevExpress WPF能建立有著強大互動功能的XAML基礎應用程式，這些應用程式專注於當代客戶的需求和構建未來新一代支援觸控的解決方案。

使用模型檢視ViewModel（MVVM）架構模式設計WPF應用程式時，可能需要描述模型或ViewModel中的列。 網格可以繫結到包含列設定的物件集合，該物件設定在Model或ViewModel中進行了描述，從而最大限度地減少了“隱藏程式碼”的需求。

實現檢視模型

假設一個僱員檢視模型，它包括以下類：

Employee - 包含員工資訊（例如名字和姓氏，職務等）的資料物件。ViewModel - 員工檢視模型。EmployeeData - 提供要在網格控制元件中顯示的員工資訊。Column - 描述網格列，此類提供的屬性對應於所有型別的網格列的通用設定。ComboBoxColumn - 對應於ComboBoxEdit in-place編輯器的網格列，此類提供Source屬性，其中包含組合框專案的列表（在此示例中，這些城市）。SettingsType - 列舉用於編輯單元格值的in-place編輯器的可能型別。

C#

using System;using System.Collections;using System.Collections.Generic;using System.Collections.ObjectModel;namespace Model {public class ViewModel {public List<string> Cities { get; private set; }// Returns a list of employees so that they can be bound to the grid control.public List<Employee> Source { get; private set; }// The collection of grid columns.public ObservableCollection<Column> Columns { get; private set; }public ViewModel() {Source = EmployeeData.DataSource;List<string> _cities = new List<string>();foreach (Employee employee in Source) {if (!_cities.Contains(employee.City))_cities.Add(employee.City);}Cities = _cities;Columns = new ObservableCollection<Column>() {new Column() { FieldName = "FirstName", Settings = SettingsType.Default },new Column() { FieldName = "LastName", Settings = SettingsType.Default },new Column() { FieldName = "JobTitle", Settings = SettingsType.Default },new Column() { FieldName = "BirthDate", Settings = SettingsType.Default },new ComboColumn() { FieldName = "City", Settings = SettingsType.Combo, Source = Cities }};}}// The data item.public class Employee {public string FirstName { get; set; }public string LastName { get; set; }public string JobTitle { get; set; }public string City { get; set; }public DateTime BirthDate { get; set; }}public class EmployeeData : List<Employee> {public static List<Employee> DataSource {get {List<Employee> list = new List<Employee>();list.Add(new Employee() {FirstName = "Nathan",LastName = "White",City = "NY",JobTitle = "Sales Manager",BirthDate = new DateTime(1970, 1, 10) });return list;}}}public class Column {// Specifies the name of a data source field to which the column is bound.public string FieldName { get; set; }// Specifies the type of an in-place editor used to edit column values.public SettingsType Settings { get; set; }}// Corresponds to a column with the combo box in-place editor.public class ComboColumn : Column {// The source of combo box items.public IList Source { get; set; }}public enum SettingsType { Default, Combo }}

注意：如果將Columns集合分配給網格控制元件後可能會更改，則它應實現INotifyCollectionChanged，以便網格中可自動反映View Model內所做的更改。

列模板和選擇器

網格控制元件基於列模板生成列，建立多個模板，每種列型別一個模板。使用單個模板，您可以在無限數量的網格控制元件中建立無限數量的列。 在此示例中，有兩個列模板：DefaultColumnTemplate和ComboColumnTemplate。

為避免繫結到列屬性時的效能問題，請使用dxci：DependencyObjectExtensions.DataContext附加屬性，請參見下面的示例。

XAML

XAML

<Window x:Class="WpfApplication10.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="350" Width="525"xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"xmlns:dxci="http://schemas.devexpress.com/winfx/2008/xaml/core/internal"xmlns:model="clr-namespace:Model"xmlns:view="clr-namespace:View"><Window.DataContext><model:ViewModel/></Window.DataContext><Window.Resources><view:ColumnTemplateSelector x:Key="ColumnTemplateSelector"/><DataTemplate x:Key="DefaultColumnTemplate"><ContentControl><dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"/></ContentControl></DataTemplate><DataTemplate x:Key="ComboColumnTemplate"><ContentControl><dxg:GridColumn FieldName="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"><dxg:GridColumn.EditSettings><dxe:ComboBoxEditSettings ItemsSource="{Binding Source}"/></dxg:GridColumn.EditSettings></dxg:GridColumn></ContentControl></DataTemplate></Window.Resources><Grid></Grid></Window>

C#

using System.Windows;using System.Windows.Controls;using Model;namespace View {public class ColumnTemplateSelector : DataTemplateSelector {public override DataTemplate SelectTemplate(object item, DependencyObject container) {Column column = (Column)item;return (DataTemplate)((Control)container).FindResource(column.Settings + "ColumnTemplate");}}}

注意：如果可以使用單個模板描述所有網格列，則無需建立列模板選擇器，而是將此模板分配給網格的DataControlBase.ColumnGeneratorTemplate屬性。

注意：您可以建立一種樣式來指定使用不同模板生成的所有列共有的設定，您可以在樣式內指定對ViewModel屬性的繫結（請參見下面的FieldName）：

XAML

<Window.Resources><Style x:Key="ColumnStyle" TargetType="dxg:GridColumn"><Setter Property="FilterPopupMode" Value="CheckedList"/><Setter Property="FieldName" Value="{Binding Path=(dxci:DependencyObjectExtensions.DataContext).FieldName, RelativeSource={RelativeSource Self}}"/></Style></Window.Resources>

該樣式應分配給DataControlBase.ColumnGeneratorStyle屬性。

自定義WPF DXGrid

最後，指定網格的DataControlBase.ItemsSource，DataControlBase.ColumnsSource和DataControlBase.ColumnGeneratorTemplateSelector。DataControlBase.ItemsSource屬性指定網格的資料來源，DataControlBase.ColumnsSource屬性指定網格從中生成列的源，DataControlBase.ColumnGeneratorTemplateSelector屬性指定列模板選擇器，該選擇器根據其型別為每個列返回一個模板。

XAML

<Grid><dxg:GridControl Name="grid"ItemsSource="{Binding Source}"ColumnsSource="{Binding Columns}"ColumnGeneratorTemplateSelector="{StaticResource ColumnTemplateSelector}"><dxg:GridControl.View><dxg:TableView Name="tableView1"AutoWidth="True"NavigationStyle="Cell" /></dxg:GridControl.View></dxg:GridControl></Grid>

下圖顯示了結果。