Tile View & Kanban Board平铺视图和看板

missingzlp

已于 2024-09-22 21:23:59 修改

阅读量551

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Data Grid 数据网格文章标签： Tile View Kanban Board

于 2024-09-22 19:16:41 首次发布

本文链接：https://blog.youkuaiyun.com/missingzlp/article/details/142441717

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 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();
}