Get Started With Data Grid and Views 数据网格和视图入门

Goto DevExpress Data Grid

WinForms数据网格（GridControl类）是一个数据感知控件，可以以各种格式（视图）显示数据。本主题包含以下部分，这些部分将指导您如何使用网格控件及其视图和列（字段）。

• Grid Control’s Views -网格控件的视图
• Select a View -选择视图
• Supply Data for Views and Populate Column Collection -为视图提供数据并填充列集合
• Access and Customize Views and Columns at Design Time -在设计时访问和自定义视图和列
• Access and Customize Views and Columns in Code -访问和自定义代码中的视图和列
• Layout of Columns and Bands (in Grid Views and Banded Grid Views) -柱和标注栏的布局（在轴网视图和标注栏轴网视图中）
• Learn More

Grid Control’s Views -网格控件的视图

The WinForms Data Grid control supports multiple data presentation formats.

Tabular	表格
Banded tabular	带状表格
Cards	卡
Windows UI-inspired Tiles	Windows UI启发的互动程序
Windows Explorer-inspired UI	Windows资源管理器启发的用户界面

上面的显示格式由Views封装，Views是可以嵌入到数据网格中的可视化组件。
为“网格”控件指定适当的“视图”，以便以特定方式显示数据。使用视图的属性、事件和方法可以自定义视图的外观。

Grid View (GridView class)

网格视图 Grid View

Banded Grid View (BandedGridView class)

带状网格视图 Banded Grid View

Advanced Banded Grid View (AdvBandedGridView class)

高级带状网格视图 Advanced Banded Grid View

Layout View (LayoutView class)

布局视图 Layout View

Card View (CardView class)

卡片视图 Card View
Card View （卡片视图） 将数据记录显示为卡片，先向下排列，然后再横向排列。卡片字段始终排列在单个列中。Card View 由 CardView 类表示。

WinExplorer View (WinExplorerView class)

WinExplorer视图 WinExplorer View

Tile View (TileView class)

平铺视图 Tile View
平铺视图使用以下布局模式之一将记录显示为平铺：默认（标准表格布局）、列表（平铺之间没有空格）或看板。平铺视图包括 Tile Template 功能，该功能允许您相对于其他字段排列字段、指定绝对或相对字段显示边界等。使用基于 HTML 的模板时，支持就地编辑器。

Items View

项目视图
项目视图使用 HTML-CSS 模板呈现项目（记录），您可以使用属性指定该模板，也可以使用事件动态指定该模板。它由 ItemsView 类表示。

Select a View 选择视图

在设计时（或在代码中创建此控件）将 GridControl 拖放到窗体上时，将使用嵌入的 GridView 创建该控件，该视图将基础数据显示为二维表。
在设计时：

在运行时（将网格绑定到数据并将列添加到 GridView 之后）：

在设计时，数据网格在右下角显示 Level Designer。Level Designer 允许您访问和操作（创建、删除和转换）数据视图，并运行 Grid Designer。

Level Designer 中的 gridView1box.png 框标识当前 View。单击 Change view 以更改数据视图。

选择以下选项之一：

• Convert to （转换为） - 允许您将 View 转换为其他类型。转化会将列（如果存在）和相应的设置从此数据视图传输到新的数据视图。“旧”View 被删除 （销毁）。
• Create new view （创建新视图） - 允许您创建新视图 （“旧” View 不会被删除）。您可以在关卡设计器、网格控件的设计器以及代码中的 GridControl.ViewCollection 属性中访问新视图和旧视图。

例如，如果将 GridView 转换为 CardView，则关卡设计器将显示 cardView1

在运行时，您将看到以下卡片 UI：

为视图提供数据并填充列集合

View 的数据由网格控件的绑定数据源提供，该数据源由 GridControl.DataSource 和 GridControl.DataMember 属性指定。

在设计时，您可以使用 Grid 的智能标记菜单将 grid 控件绑定到数据。

您可以执行下列操作之一：

• 打开 Choose Data Source 旁边的下拉菜单以运行 Visual Studio 数据源配置向导 。
• 选择 Data Source Wizard 以运行 DevExpress 数据源配置向导，从而简化与各种数据源类型（ADO.NET、SQL 数据、实体框架等）的绑定。

有关如何绑定到各种数据源类型的更多信息，请参阅以下主题：数据绑定。

将网格控件绑定到数据后，视图会自动为绑定数据源中的所有字段创建列（如果网格的列集合在绑定之前为空）。下图显示了 GridView，其中填充了具有五个数据字段的示例数据表中的数据。

您可以使用 View 的 OptionsBehavior.AutoPopulateColumns 设置来禁用自动列填充。

与其他视图不同，WinExplorerView 和 TileView 不会自动显示添加的列。对于这些视图，需要额外的自定义才能在项目/卡中设置布局。有关详细信息，请阅读以下主题：

在设计时访问和自定义视图和列

视图及其列具有多个选项和事件，用于自定义基础数据在屏幕上的显示方式。您可以通过多种方式访问和自定义其设置。

表单上选择和属性窗口

由于 View 和 column 对象是可视组件，因此可以从 Visual Studio 的 Properties （属性） 窗口访问它们。

数据网格支持在设计时对 View 和 columns 进行表单选择。要在 Properties 窗口中选择一个 View 并列出其设置，请单击 Level Designer 中的 View。

要选择列，请直接在表单上单击其标题：

Column Smart Tags 列智能标记

列智能标记在 GridView、Banded GridView 和 Advanced Banded GridView 中显示主列设置：

Grid Designer 网格设计师

网格设计器允许您管理视图、列、就地编辑器、组摘要、外观设置和布局选项。它包含“功能浏览器”页面，用于快速查找与特定功能相关的设置。要调用网格设计器，请单击关卡设计器中的 Run Designer 按钮：

网格设计器的左侧有一个导航栏，允许您选择各种页面。例如，Views 页面等同于 Level Designer。此页面允许您访问当前的顶级 View 和嵌套视图（如果有）。

Columns （列） 页面显示可用的数据源字段和绑定到这些字段的列 （可见和隐藏）。您可以自定义单个列、清除列集合、手动添加新列，或者只需单击一个按钮即可使用绑定数据源中的列填充视图。

Feature Browser （功能浏览器） 页面根据特定功能对选项和事件进行分类：

有关详细信息，请阅读以下主题：网格设计器

Access and Customize Views and Columns in Code

在代码中访问和自定义视图和列

View 和 column 对象是组件。在设计时创建时，您可以在代码中按其名称访问它们：

gridView1.OptionsBehavior.AutoPopulateColumns = false; 
gridColumn1.VisibleIndex = -1;

使用 GridControl.MainView 属性访问网格控件的顶级 View（应将此属性值强制转换为相应的 View 类型）：

GridView view = gridControl1.MainView as GridView;
if (view != null)
    view.OptionsView.RowAutoHeight = true;

以下示例显示如何更改 main View：

LayoutView lv = new LayoutView(gridControl1);
gridControl1.MainView = lv;

您可以通过索引或字段名称从 View 的 ColumnView.Columns 集合中获取网格列：

gridView1.Columns["ID"].Caption = "№";

在主从模式下，数据网格显示多个视图。使用以下属性和方法获取显示的详图 View：

• GridControl.FocusedView
• GridView.ExpandMasterRow
• GridView.GetDetailView. GridView.GetDetailView 的 GridView.GetDetailView 中。

Example: How to Change the View

示例：如何更改视图

以下示例将现有的顶级 View 替换为 BandedGridView，并向 View 添加带区和列：

using DevExpress.XtraGrid.Views.BandedGrid;

// Dispose of the old view
gridControl1.MainView.Dispose();
// Create a Banded Grid View
BandedGridView bandedView = new BandedGridView(gridControl1);
gridControl1.MainView = bandedView;
// Add one band and one column to the view
GridBand band = bandedView.Bands.AddBand("General");
BandedGridColumn column = (BandedGridColumn)bandedView.Columns.AddField("CustomerID");
column.OwnerBand = band;
column.Visible = true;

Layout of Columns and Bands (in Grid Views and Banded Grid Views)

列和波段的布局（在网格视图和带状网格视图中）

GridView、BandedGridView 和 AdvBandedGridView 支持通过拖放进行表单设计时布局自定义。您可以对列和波段进行重新排序、调整大小和隐藏列和波段：

单击列标题时调用的上下文菜单允许您根据列对数据进行排序和分组，计算最佳列宽并显示列选择器（带状视图中的列/带选择器） - 一个浮动面板，提供对隐藏列（和带状视图中的带区）的访问。隐藏的列（和波段）可以通过拖放从 Column/Band Chooser 恢复到 View 中：

您还可以在 Visual Studio 的“属性”窗口中自定义列和带区设置（GridColumn.VisibleIndex、GridBand.VisibleIndex、GridColumn.Width、GridColumn.SortOrder、GridColumn.SortIndex 等）。

对于带状视图（BandedGridView 和 AdvBandedGridView），请使用 Grid Designer 的 Bands 页添加新的带状图元区域，并重新排列带状和列。您还可以在表单上重新排列带状和列：

Examples 例子

Create GridView 创建网格视图

下面的示例在运行时创建一个 GridControl，并演示如何执行基本的自定义任务：

• Bind the grid to a data source
  将网格绑定到数据源
• Access the View that displays the underlying data
  访问显示基础数据的视图
• Access columns 访问列
• Assign an in-place editor (a combo box editor) to a column
  将就地编辑器（组合框编辑器）分配给列
• Sort and group data 对数据进行排序和分组
• Calculate total and group summaries
  计算总计和组汇总
• Create a filter 创建筛选条件
• Hide columns and calculate column “best” widths
  隐藏列并计算列 “最佳” 宽度
• Expand group rows 展开组行
• Focus a specific cell 聚焦特定单元格
• Specify DataAnnotation attributes (column display names and data formats) at the data source level
  在数据源级别指定 DataAnnotation 属性（列显示名称和数据格式）

using System;
using DevExpress.ClipboardSource.SpreadsheetML;
using DevExpress.Data;
using DevExpress.XtraEditors;
using DevExpress.XtraEditors.Repository;
using DevExpress.XtraGrid;
using DevExpress.XtraGrid.Columns