Tile View Kanban Board平铺视图和看板

Goto 数据网格和视图入门

平铺视图（TileView 类）将数据记录显示为平铺。此视图类型可以以任何自定义方式排列多个元素（bound 和 unbound）。用户可以按如下方式编辑瓦片：

使用模态 Edit Form。
利用 HTML-CSS 平铺模板并使用标记来指定输入字段。

平铺视图支持三种平铺布局模式，如下面的图片库所示：

Default - 切片按多列和多行排列。已启用自动切片换行。
看板 - 将切片合并为组（您需要指定组列）。不支持切片换行。
列表 - 切片按列/行排列，并启用切片拉伸功能。

演示

Tile View 的主要功能如下：

Tiles are generated from tile templates.
瓦片是从瓦片模板生成的。
Design-time tile template setup.
设计时磁贴模板设置。
Dynamic tile template substitution at runtime.
运行时的动态磁贴模板替换。
Tile template supports bound and unbound elements. Bound elements display data from underlying data source fields. Unbound elements show static text and images.
瓦片模板支持绑定和未绑定元素。绑定元素显示基础数据源字段中的数据。未绑定的元素显示静态文本和图像。
Multiple tile element alignment options, including alignment relative to other elements, and absolute or relative element size specification.
多个平铺元素对齐选项，包括相对于其他元素的对齐方式，以及绝对或相对元素大小规范。
Tile grouping by column. 按列对磁贴进行分组。
Support for tile checking.
支持切片检查。
Data editing (using a separate Edit Form).
数据编辑（使用单独的 Edit Form）。
Tile selection. 磁贴选择。
Tile drag-and-drop. 磁贴拖放。
Tile auto-height. 平铺自动高度。

Demos 演示

Tile View 平铺视图
Tile View Kanban Board 平铺视图看板
Office Compact View Office 紧凑视图

Online Videos 在线视频

Tile View - Basics 平铺视图 - 基础知识
此视频演示了如何将标准网格数据布局切换到平铺视图，后者将数据记录显示为平铺。您将学习图块模板配置的基础知识，例如如何添加数据绑定和未绑定元素以及将它们放置在模板中。
Tile View - Layout & Appearance 平铺视图 - 布局和外观
了解如何将项目添加到磁贴、自定义排列这些项目以及设置项目外观。
Tile View - Service Columns & Dynamic Tile Customization 平铺视图 - 服务列和动态平铺定制
在本视频中，您将了解如何将数据分组应用于 Tile View，如何根据字段值控制启用状态或检查图块的状态，以及如何使用专门设计的事件来自定义图块项目。

Create Tile View, Bind It to Data, and Populate Column Collection 创建平铺视图，将其绑定到数据，并填充列集合

创建 GridControl 时，它包含一个网格视图，该视图以列和行格式显示数据。要在设计时将此 View 转换为 TileView，请使用 Data Grid 的 Level Designer。
在这里插入图片描述
若要向平铺视图提供数据，请使用 GridControl.DataSource 和 GridControl.DataMember 属性将数据网格绑定到数据源。在设计时，您可以使用网格控件的智能标记。

下面的代码创建一个 TileView，将其设置为网格控件的 MainView，然后将数据源绑定到网格控件。

TileView tileView1 = new TileView();
gridControl1.MainView = tileView1;
gridControl1.DataSource = employeesBindingSource;

将数据网格绑定到数据后，平铺视图（与任何其他视图一样）会自动为所有数据源字段创建列（GridColumn 对象）。

Note 注意：
The column collection (ColumnView.Columns) is not automatically populated if a View already contains columns.
列集合（ColumnView.Columns）不会自动填充。

您可以使用数据网格的主设计器来检查新创建的列集合的内容。单击 Run Designer 按钮，然后切换到 Columns 页面。
在这里插入图片描述
Columns Designer 页面允许您操作列集合。例如，您可以手动创建列并将其绑定到某些数据源字段（请参阅 GridColumn.FieldName）。您还可以创建未绑定列，以显示使用自定义表达式或专用事件计算的数据。

请注意，如果您现在运行应用程序，您可能会看到空磁贴（每个磁贴都是一条数据源记录）。创建的列不可见，因为它们尚未添加到切片模板中。
在这里插入图片描述

Create Tile Template 创建瓦片模板

平铺视图从模板生成平铺。模板指定图块中元素的布局及其外观设置。支持两种模板类型：

Regular template 常规模板
HTML and CSS-based template 基于 HTML 和 CSS 的模板

Regular Tile Template 常规平铺模板

在常规磁贴模板中，设计图面分为逻辑列和逻辑行，内容放置在相应的单元格中。
您可以在设计时使用数据网格的设计器自定义常规磁贴模板。
在这里插入图片描述
下面是一个示例 Tile View，其图块是根据上面的模板生成的。

以下动画演示了如何在数据网格的设计器中设置图块模板：

在这里插入图片描述
支持的磁贴模板自定义操作包括：

将网格列从 Columns （列）列表拖放到表单元格上。
当您将列拖放到单元格上时，将自动创建绑定的平铺元素（TileViewItemElement）。
在单元格之间拖放创建的元素。
将多个元素放置在同一个单元格中，这些元素具有不同的对齐选项以防止重叠。
用鼠标指针选择单元格，然后单击合并按钮合并单元格。
使用 Unmerge 按钮取消合并之前合并的单元格。
使用鼠标指针调整单元格大小。
使用鼠标指针拖动图块模板的边缘以调整其大小。
使用 Designer-TileTemplatePage-AddRowsButtons 按钮和上下文菜单添加/删除列和行。
单击单元格以将其选中，然后在 Property Grid 中自定义单元格的大小、大小类型（绝对或相对）和填充。
单击放置的元素可访问该元素，并在 Property Grid 中自定义其设置。
在 Elements （元素）列表中添加、删除和重新排序元素。创建元素时，它会自动添加到模板中。
使用 Save As 按钮以不同的名称保存当前模板并创建多个模板。如果使用 TileView.CustomItemTemplate 事件将不同的模板动态分配给磁贴，则多个模板非常有用。

示例
以下代码设置由两行和两列组成的默认磁贴模板。第一列的单元格被合并。三个图块元素位于单元格中，以形成以下布局：
在这里插入图片描述

using DevExpress.XtraEditors;
using DevExpress.XtraEditors.TableLayout;
using DevExpress.XtraGrid.Views.Tile;

// ...
public Form1() {
    InitializeComponent();
    gridControl1.DataSource = Data.GetData();
    InitTileTemplate();
}
private void InitTileTemplate() {
    // Set the tile size.
    tileView1.OptionsTiles.ItemSize = new System.Drawing.Size(300, 160);

    // Create a table layout (columns and rows) for the Tile Template.
    TableColumnDefinition tableColumn1 = new TableColumnDefinition();
    TableColumnDefinition tableColumn2 = new TableColumnDefinition();
    TableRowDefinition tableRow1 = new TableRowDefinition();
    TableRowDefinition talbeRow2 = new TableRowDefinition();
    tableColumn1.Length.Value = 120;
    tableColumn2.Length.Value = 180;
    tileView1.TileColumns.Add(tableColumn1);
    tileView1.TileColumns.Add(tableColumn2);
    tileView1.TileRows.Add(tableRow1);
    tileView1.TileRows.Add(talbeRow2);
    // Create a TableSpan object to merge cells.
    TableSpan tableSpan1 = new TableSpan();
    tableSpan1.RowIndex = 0;
    tableSpan1.ColumnIndex = 0;
    tableSpan1.RowSpan = 2;
    tileView1.TileSpans.Add(tableSpan1);

    // Create the Tile Template's elements.
    TileViewItemElement tileElementFirstName = new TileViewItemElement();
    TileViewItemElement tileElementCity = new TileViewItemElement();
    TileViewItemElement tileElementPhoto = new TileViewItemElement();

    tileElementFirstName.Column = tileView1.Columns["FirstName"];
    tileElementFirstName.ColumnIndex = 1;
    tileElementFirstName.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter;
    tileElementFirstName.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze;
    tileElementFirstName.TextAlignment = DevExpress.XtraEditors.TileItemContentAlignment.MiddleCenter;
    tileElementCity.Column = tileView1.Columns["City"];
    tileElementCity.ColumnIndex = 1;
    tileElementCity.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter;
    tileElementCity.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze;
    tileElementCity.RowIndex = 1;
    tileElementCity.TextAlignment = DevExpress.XtraEditors.TileItemContentAlignment.MiddleCenter;
    tileElementPhoto.Column = tileView1.Columns["Photo"];
    tileElementPhoto.ImageOptions.ImageAlignment = TileItemContentAlignment.MiddleCenter;
    tileElementPhoto.ImageOptions.ImageScaleMode = TileItemImageScaleMode.Squeeze;
    tileElementPhoto.TextAlignment = TileItemContentAlignment.MiddleCenter;
    tileView1.TileTemplate.Add(tileElementFirstName);
    tileView1.TileTemplate.Add(tileElementCity);
    tileView1.TileTemplate.Add(tileElementPhoto);
}

public class Data {
    public static DataTable GetData() {
        DataTable dt = new DataTable();
        dt.Columns.Add("FirstName", typeof(string));
        dt.Columns.Add("City", typeof(string));
        dt.Columns.Add("Photo", typeof(Image));
        dt.Rows.Add("John", "NY", Image.FromFile(@"d://media/john-photo.jpg"));
        return dt;
    }
}

HTML and CSS-based Tile Template 基于 HTML 和 CSS 的磁贴模板

平铺视图允许您使用 HTML 和 CSS 标记来设置平铺模板。
单击“属性”网格中 TileView.TileHtmlTemplate 属性的省略号按钮以打开 Html 模板编辑器。指定 HTML 代码和 CSS 样式，然后保存更改。
在这里插入图片描述

HTML Tags HTML 标签

CSS Styles CSS 样式

平铺视图支持的 HTML-CSS 模板的主要功能包括：

Data binding 数据绑定

HTML 标记中的 ${FieldName} 语法插入控件数据源中的字段值。请参见数据绑定。

Images 图像

HTML 标记允许您添加图像。

Buttons 按钮

HTML-CSS 标记允许您添加元素以模拟按钮。

Inplace Editors 就地编辑器

%3Cinput> 标记允许您将就地编辑器（存储库项目）嵌入到拼贴中，以显示和编辑数据源字段。

如果用户单击就地编辑器，则会在运行时激活这些编辑器，前提是 TileViewOptionsBehavior.EditingMode 选项设置为 HtmlTemplate（默认值）。如果将此属性设置为任何其他值，则分配的就地编辑器仅用于显示数据源字段，而不用于编辑数据源字段。
在设计时，您可以使用 Data Grid 设计器中的“In-place Editor Repository”页面来创建和自定义就地编辑器：

在这里插入图片描述

Mouse actions 鼠标操作

平铺视图包含用于响应 HTML 元素上的鼠标操作的事件：TileView.HtmlElementMouseClick、TileView.HtmlElementMouseDown、TileView.HtmlElementMouseOut、TileView.HtmlElementMouseOver 和 TileView.HtmlElementMouseUp。
还可以订阅 HTML 标记中元素的鼠标事件，以及在使用 Fluent API 时订阅的鼠标事件。

有关详细信息，请参阅以下主题：基于 HTML-CSS 的桌面 UI

Tile Element Contents and Alignment 平铺元素内容和对齐方式

在常规平铺模板中，绑定的平铺元素从链接的列获取显示值。列的数据类型是自动确定的，因此 tile 元素会自动选择要显示的信息：text 或 image。
在这里插入图片描述

如果需要在平铺元素旁边显示其他标签或图像，请添加新的未绑定平铺元素。
在这里插入图片描述
使用 TileItemElement.Text 和 TileItemElement.ImageOptions 属性为未绑定的磁贴元素指定数据。

以下代码创建一个显示 “ID” 字符串的未绑定元素：

TileViewItemElement tileElementID = new TileViewItemElement();
tileElementID.ColumnIndex = 1;
tileElementID.RowIndex = 0;
tileElementID.Text = "ID";
tileElementID.TextAlignment = TileItemContentAlignment.MiddleCenter;
tileView1.TileTemplate.Add(tileElementID);

若要指定元素的文本数据相对于图像的对齐方式，请参阅 TileItemElement.ImageOptions.ImageToTextAlignment。

平铺元素最初在单元格内垂直和水平居中。有两个选项可用于对齐元素：

使用 TileItemElement.TextAlignment（用于文本数据）和 TileItemElement.ImageAlignment（用于图形）属性将单元格中的元素对齐。
使用 TileItemElement.AnchorElement 和 TileItemElement.AnchorAlignment 属性将一个元素相对于另一个元素对齐。

Tile Size and Layout 磁贴大小和布局

平铺排列取决于当前选定的布局模式和方向。

Layout Mode 布局模式

TileView.OptionsTiles.LayoutMode 属性指定图块在 View 中的排列方式，以及最终用户如何滚动浏览图块。

可以使用以下布局模式：

Default - 切片按多列和多行排列。已启用自动切片换行。
看板 - 此模式专为按列对磁贴进行分组而设计，并独立于其他组访问每个组的内容（使用独立的组滚动）。磁贴换行已禁用。有关详细信息，请参阅 Kanban Board。
列表 - 切片按列/行排列，并启用切片拉伸功能。

在设计时，您可以从 Data Grid Designer 的 Layout 页中选择布局模式并自定义主布局设置。
在这里插入图片描述
以下代码将 Tile View 切换到 Kanban 模式，并按 Country 列对磁贴进行分组：

tileView1.OptionsTiles.LayoutMode = TileViewLayoutMode.Kanban;
tileView1.ColumnSet.GroupColumn = tileView1.Columns["Country"];

Layout, Orientation, and Size Settings 布局、方向和大小设置

您可以从 TileView.OptionsTiles 对象访问这些设置。主要设置包括：

TileView.OptionsTiles.Orientation - 获取或设置磁贴的水平或垂直排列方式。
TileView.OptionsTiles.RowCount - 指定列表布局模式下水平方向的行数。在 Default layout mode （默认布局模式）中，此属性指定最大行数。
TileView.OptionsTiles.ColumnCount - 指定列表布局模式下垂直方向的列数。在 Default layout mode 中，此属性指定最大列数。
TileView.OptionsTiles.ItemSize - 获取或设置此 TileView 中图块的大小。
TileView.OptionsTiles.StretchItems — 获取或设置是否拉伸图块以适应 View 的宽度/高度（取决于 Orientation 设置）。在 List 布局模式下，将忽略该属性。
TileView.OptionsTiles.Padding - 获取或设置当前 TileView 填充。
TileView.OptionsTiles.IndentBetweenGroups - 获取或设置相邻切片组之间的距离。
TileView.OptionsTiles.IndentBetweenItems - 获取或设置此 TileView 中相邻图块之间的距离。
TileView.OptionsTiles.GroupTextOffset - 获取或设置组标题的水平偏移量（以像素为单位）。
TileView.OptionsTiles.GroupTextToItemsIndent - 获取或设置组标题和组项目之间的缩进（以像素为单位）。
TileView.OptionsTiles.ItemPadding - 获取或设置 TileView 中所有图块的填充。

Tile Auto-Height 平铺自动高度

在创建平铺模板时，您可以为特定模板行启用自动高度模式。这允许图块根据其内容具有不同的高度。

在这里插入图片描述

Data Grouping 数据分组

Tile View 可以按任何一列对其磁贴进行分组（磁贴不能按多个列分组）。具有相同组列值的所有磁贴将合并到同一个磁贴组（一个 TileViewGroup 对象）中。下图显示了一个示例 Tile View，其数据按 Country 列分组：
在这里插入图片描述
将按列分组分配给 TileView.ColumnSet.GroupColumn 属性以启用数据分组。

tileView1.ColumnSet.GroupColumn = tileView1.Columns["Country"];

Related API 相关 API

TileView.Appearance.Group
TileViewItemOptions.GroupTextPadding
TileViewItemOptions.IndentBetweenGroups
TileViewItemOptions.ShowGroupText

Tile Check State 平铺检查状态

任何 Boolean 列都可以控制图块的选中状态。选中的图块在其右上角显示一个复选标记，如下图所示。
在这里插入图片描述
设置 TileView.ColumnSet.CheckedColumn 属性以指定确定磁贴检查状态的列。

tileView1.ColumnSet.CheckedColumn = tileView1.Columns["IsSelected"];

如果指定了 check 列，用户可以右键单击磁贴以切换磁贴检查状态。此操作将触发 TileView.ItemRightClick 和 TileView.ItemCheckedChanged 事件。

Tile Enabled State Tile Enabled 状态

与 checked 列类似，您可以指定一个 Boolean 列来控制每个磁贴的启用状态。将此列分配给 TileView.ColumnSet.EnabledColumn 属性。

tileView1.ColumnSet.EnabledColumn = tileView1.Columns["IsEnabled"];

下图说明了已启用和已禁用磁贴之间的视觉差异。用户无法与已禁用的磁贴交互（例如，他们无法右键单击磁贴以更改其检查状态）。

在这里插入图片描述

Tile Background Image 平铺背景图像

您可以将特定网格列中的图像显示为平铺背景图像。为此，请将此列分配给 TileView.ColumnSet.BackgroundImageColumn 属性。

tileView1.ColumnSet.BackgroundImageColumn = tileView1.Columns["BackImage"];

要自定义对齐背景图像并修改其缩放模式，请分别使用 TileViewItemOptions.ItemBackgroundImageAlignment 和 TileViewItemOptions.ItemBackgroundImageScaleMode 属性。

Customize Individual Tiles 自定义单个磁贴

所有磁贴最初都是从 TileView.TileTemplate 属性指定的默认模板生成的。您可以处理 TileView.CustomItemTemplate 事件，以根据自定义逻辑将单个或所有磁贴的默认模板动态替换为另一个模板。

以下代码将 CustomTemplate 模板应用于 ‘Country’ 字段中包含“UK”的磁贴：

private void tileView1_CustomItemTemplate(object sender, TileViewCustomItemTemplateEventArgs e) {
    TileView tileView = sender as TileView;
    string country = tileView1.GetRowCellDisplayText(e.RowHandle, "Country");
    if (country == "UK")
        e.Template = e.Templates["CustomTemplate"];
}

另一个可帮助您自定义磁贴中各个元素的内容和外观设置的事件是 TileView.ItemCustomize。

下面的代码处理此事件以更改图块元素的内容和背景色。

private void tileView1_ItemCustomize(object sender, DevExpress.XtraGrid.Views.Tile.TileViewItemCustomizeEventArgs e) {
    e.Item.Elements[6].Text = String.Format("${0}M", ((Decimal)(Int32)tileView1.GetRowCellValue(e.RowHandle, colPrice) / 1000000).ToString("0.0"));
    if ((bool)tileView1.GetRowCellValue(e.RowHandle, colSold) == true) {
        e.Item.Elements[1].Image = global::TileViewHomes.Properties.Resources.gray_element;
        e.Item.Elements[6].Text = "SOLD";
    }
}

下图说明了结果：
在这里插入图片描述

Tile Selection 磁贴选择

使用 TileView.OptionsSelection.MultiSelect 属性启用多个磁贴选择。您还可以启用 TileView.OptionsSelection.AllowMarqueeSelection 属性，以允许用户通过在按下鼠标左键的情况下将鼠标指针拖动到图块上来选择图块。

在这里插入图片描述

tileView1.OptionsSelection.MultiSelect = true;
tileView1.OptionsSelection.AllowMarqueeSelection = true;

Related API 相关 API

TileView.Appearance.ItemSelected - 指定用于绘制所选图块的外观设置。
ColumnView.GetSelectedRows（） - 返回当前所选图块的控点。
ColumnView.SelectedRowsCount - 返回所选图块的数量。
ColumnView.SelectRow（Int32） — 允许您选择特定磁贴。
ColumnView.SelectAll（） - 选择所有图块。
ColumnView.SelectRange（Int32， Int32） - 选择连续的图块范围。

Context Buttons 上下文按钮

Tile View 可以显示其磁贴的上下文按钮。
在这里插入图片描述
TileView.ContextButtons 属性允许您将一组上下文按钮应用于每个磁贴。如果需要，您可以处理专用事件，以动态修改某些磁贴的上下文按钮的可用性。请参阅以下帮助主题以了解更多信息：TileView.ContextButtons。

Appearance and Conditional Formats 外观和条件格式

磁贴及其元素的外观设置可以在三个级别进行调整：

平铺视图外观设置（TileView.Appearance） - 所有平铺和平铺元素的默认外观设置。
切片外观设置（TileItem.Appearance） - 这些设置将覆盖默认外观设置。处理 TileView.ItemCustomize 事件以自定义图块外观设置。
平铺元素外观设置（TileItemElement.Appearance） - 这些设置将覆盖平铺视图和平铺的外观设置。处理 TileView.ItemCustomize 事件以自定义代码中的图块元素外观设置。在设计时，您可以在 Data Grid Designer 的 Tile Template 页面中自定义这些设置（请参见下图）。

在这里插入图片描述
下图演示了一个平铺，其中所有平铺元素（除一个外）都涂有蓝色，该颜色设置为默认值。MPG Highway 元素将覆盖此设置以显示红色前景色。