Items View 项目视图

Goto 数据网格和视图入门

ItemsView 没有默认的数据表示形式。它使用 HTML-CSS 模板呈现项目（记录），您可以使用属性指定该模板，也可以使用事件动态指定该模板。

Specify Default Template 指定默认模板

使用 ItemsView.HtmlTemplate 属性将默认模板分配给项。为此，HtmlTemplate 对象公开了两个嵌套属性：

• HtmlTemplate.Template — 指定定义 UI 元素布局的 HTML 代码。
• HtmlTemplate.Styles — 指定应用于 UI 元素的 CSS 样式。

在设计时，您可以使用 Html 模板编辑器指定 HTML 和 CSS 代码。

HTML 和 CSS 模板的主要特点

Data binding 数据绑定

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

Images 图像

HTML 标记允许您添加图像。

Buttons 按钮

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

Inplace Editors 就地编辑器

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

确保启用 ColumnViewOptionsBehavior.Editable 选项，以便在鼠标单击时激活就地编辑器。

在设计时，您可以使用 Data Grid 设计器中的“In-place Editor Repository”页面来创建和自定义就地编辑器：

Mouse actions 鼠标操作

• 项目视图包含用于响应 HTML 元素上的鼠标操作的事件：ItemsView.ElementMouseClick、ItemsView.ElementMouseDown 和 ItemsView.ElementMouseUp。

• 还可以订阅 HTML 标记中元素的鼠标事件，以及在使用 Fluent API 时订阅的鼠标事件。

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

为不同的项目指定不同的模板

• 处理 ItemsView.QueryItemTemplate 事件以将自定义模板分配给各个项。此事件针对每个项重复触发。

• 以下 ItemsView.QueryItemTemplate 事件处理程序根据项的类型（IsOwnMessage 设置）将不同的模板分配给不同的项。

动态自定义项目

当特定项即将在屏幕上显示时，项视图将引发 ItemsView.CustomizeItem 事件。您可以处理此事件以动态自定义项目的 HTML 元素的样式和可见性。

使用事件的 Element 属性可访问当前已处理项的 HTML 元素。以下方法允许您按标记、类和 ID 检索 HTML 元素：

• Element.FindElementsByTag — 返回具有指定标签的 HTML 元素的列表。
• Element.FindElementsByClass — 返回属于指定类的 HTML 元素的列表。
• Element.FindElementById — 返回具有指定 ID 的 HTML 元素。

这些方法返回的元素公开属性以更改元素显示设置。主要特性包括：

• element.Hidden — Allows you to hide (collapse) the element.
  元素。隐藏 — 允许您隐藏（折叠）元素。
• element.Disabled — Allows you to disable the element.
  元素。Disabled （已禁用） - 允许您禁用元素。
• element.Style — Allows you to modify CSS style properties applied to the element. This object exposes the SetBackgroundColor, SetForeColor, SetVisibility (displays an empty region instead of the element), and SetProperty methods for this purpose.
  元素。Style — 允许您修改应用于元素的 CSS 样式属性。此对象为此目的公开了 SetBackgroundColor、SetForeColor、SetVisibility（显示空区域而不是元素）和 SetProperty 方法。