HTML and CSS Support HTML 和 CSS 支持

GoTo DevExpress Data Grid 数据网格

HTML and CSS Support HTML 和 CSS 支持

HTML和CSS支持允许您创建完全自定义的UI元素，并消除使用基于属性的UI自定义和CustomDraw事件。您可以构建 HTML 格式的 UI，并使用 CSS 样式自定义 UI 元素的外观设置、大小、填充和布局选项。

主要功能包括：

通过阴影、闪亮、圆角、鼠标悬停/单击等效果增强 DevExpress WinForms 控件的视觉外观。
使用 CSS 创建响应式 UI。
在 HTML 标记中指定数据绑定表达式以显示数据源中的值。
处理事件以响应 HTML UI 元素上的鼠标操作。
DirectX 硬件加速以获得更好的性能。
HTML和CSS模板编辑器集成到Visual Studio IDE中。

以下DevExpress WinForms控件内置了HTML和CSS支持：

Accordion
Alert Controls and XtraMessageBox
Data Grid (ItemsView, TileView, WinExplorerView)
DirectX Form
Listbox and ComboBox
Gantt Control
HTML Content and Popup
Scheduler
TreeList

Best Practices 最佳实践

阅读以下主题，了解使用 DevExpress HTML/CSS 模板时的重要建议：HTML/CSS 最佳实践。

HTML-CSS Markup HTML-CSS 标记

HTML 和 CSS 感知控件和组件从模板呈现其 UI。控件模板的 HTML 标记指定控件的内容（UI 元素），而模板的 CSS 代码指定应用于 UI 元素的样式、显示和布局设置。

使用控件的 HtmlTemplate 属性指定模板。在设计时，您可以在 HTML 模板编辑器中创建模板。
在这里插入图片描述
此编辑器支持语法突出显示、IntelliSense（代码完成辅助工具）和预览窗格。预览窗格允许您检查视觉元素 - 当您将鼠标悬停在元素上时找到 HTML 标记。

Reusable HTML & CSS Templates 可重复使用的 HTML 和 CSS 模板

HTML模板编辑器允许您从DevExpress HTML和CSS模板库中加载预先设计的模板。这些模板基于我们的 WinForms 演示应用程序中使用的模板。您可以“按原样”使用这些模板，也可以根据需要进行自定义。

在这里插入图片描述
您可以创建一个HTML和CSS模板，将模板保存到画廊中，并在需要时在任何WinForms项目中使用它。

Example 例

下面的示例演示一个 HtmlContentControl，它从分配的 HTML-CSS 模板呈现 UI。该控件绑定到 Employee 对象的列表。模板的 HTML 代码包含用于显示数据源中的值的数据绑定表达式。

在这里插入图片描述

public class Employee {
    public string DisplayName { get; set; }
    public string FullName { get; set; }
    public SvgImage Photo { get; set; }
}
//...
Employee emp = new Employee();
emp.DisplayName = "Leah Test Coordinator";
emp.FullName = "Leah Simpson";
SvgImageCollection imageCollection = new SvgImageCollection();
imageCollection.Add("photo", "image://svgimages/icon builder/business_businesswoman.svg");
emp.Photo = imageCollection["photo"];
List<Employee> list = new List<Employee>();
list.Add(emp);
htmlContentControl1.DataContext = list;
//...
void OnButtonClick(object sender, DxHtmlElementMouseEventArgs args) {
    if(args.ElementId == "uploadBtn") {
        //...
    }
    if (args.ElementId == "removeBtn") {
        //...
    }
    XtraMessageBox.Show("Button " + args.ElementId + " clicked");
}

Specify HTML-CSS Templates Dynamically 动态指定 HTML-CSS 模板

许多控件使用 HTML-CSS 模板来呈现其项。例如，ItemsView 从 ItemsView.HtmlTemplate 属性指定的默认模板生成其所有项（记录）。

这些控件具有用于将模板分配给项的事件，从而动态覆盖默认模板：

ItemsView.QueryItemTemplate
WinExplorerView.QueryItemTemplate
GanttControl.QueryItemTemplate
TileView.CustomItemTemplate

Example 例

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

您可以在以下演示中找到此示例的完整代码：聊天客户端。

void OnQueryItemTemplate(object sender, QueryItemTemplateEventArgs e) {
    var message = e.Row as DevAV.Chat.Model.Message;
    if(message == null)
        return;
    if(message.IsOwnMessage)
        Styles.MyMessage.Apply(e.Template);
    else
        Styles.Message.Apply(e.Template);
    //...
}

Customize Items Dynamically 动态自定义项目

从模板生成其项的控件还具有用于动态自定义每个项的事件：

ItemsView.CustomizeItem
WinExplorerView.CustomizeItem
GanttControl.CustomizeItem
TileView.ItemCustomize

在控件中的每个项显示在屏幕上之前，这些事件都会触发该事件。它们允许您访问将要呈现的单个 HTML 元素，并自定义其可见性和样式设置。

Example 例

以下示例根据自定义逻辑更改 HTML 元素的可见性。

您可以在以下演示中找到此示例的完整代码：聊天客户端。

//CustomizeItem event handler:
void OnCustomizeItem(object sender, CustomizeItemArgs e) {
    //...
    if(message.IsLiked) {
        var btnLike = e.Element.FindElementById("btnLike");
        var btnMore = e.Element.FindElementById("btnMore");
        if(btnLike != null && btnMore != null) {
            btnLike.Hidden = false;
            btnMore.Hidden = true;
        }
    }
    if(message.IsFirstMessageOfBlock)
        return;
    if(!message.IsOwnMessage) {
        var avatar = e.Element.FindElementById("avatar");
        if(avatar != null)
            //Display an empty region instead of the 'avatar' element.
            avatar.Style.SetVisibility(Utils.Html.Internal.CssVisibility.Hidden);
    }
//...
}

Data Binding 数据绑定

如果控件绑定到数据源，则可以在 HTML 标记中使用以下语法来显示数据源字段的值：

${FieldName}

“$”字符指定后面的文本是控件需要计算的表达式。表达式可以包含静态文本和到多个字段的数据绑定：

$text{FieldName}text
${FieldName1}text{FieldName2}text

例如，以下 HTML 代码显示控件数据源中 “UserName” 字段的值：

<div class='contactName'>${UserName}</div>

以下示例在用户名前添加 ‘Welcome’ 字符串：

<h1>$Welcome {UserName}!</h1>

External Controls and In-place Editors 外部控件和在位编辑器

标记允许您向基于 HTML 的 UI 添加就地编辑器或外部控件。以下控件支持该标签：

HtmlContentControl- 使用标记作为要在布局中显示的外部控件和存储库项目（就地编辑器）的占位符。

数据网格视图（ItemsView、TileView 和 WinExplorerView）

使用标记作为存储库项目（就地编辑器）的占位符。不能使用此标记在 Data Grid 视图中显示外部控件。
在这里插入图片描述

<input name="textEditEmail" class="field-input"/>
<input name="repositoryItemPictureEdit1" value="${ImageData}" class="editor"/>

Buttons 按钮

请按照以下步骤呈现按钮：

定义呈现按钮的 HTML 元素。指定元素的类（例如，将类名设置为 “button”）。
在 CSS 代码中，定义 “button” 类以指定元素的显示属性。
此外，定义 button 类的悬停状态，以便在将元素悬停时突出显示该元素。

以下示例使用

标记来定义按钮：

<div id="uploadBtn" class="centered button">Upload</div>
<div id="removeBtn" class="centered button">Remove</div>

Images 图像

使用 HTML 标签显示图像。将图像源分配给标签的 src 属性。image source 可以是以下值之一：

控件的 HtmlImages 集合中目标图像的名称或索引（例如 HtmlContentControl.HtmlImages）。

svgImageCollection1.Add("employee", "image://svgimages/icon builder/business_businesswoman.svg");
htmlContentControl1.HtmlImages = svgImageCollection1;

一个绑定表达式（${FieldName}），用于定义控件数据源中存储图像数据的字段。请注意，目标字段必须存储字符串（图像名称）或图像（Bitmap 或 SvgImage 对象）。不支持 ImageURL 和字节数组。

HTML 模板检查数据字段是否包含 SVG 图形或位图。如果不是，模板将在分配给控件的 HtmlImages 属性的 SvgImageCollection 中查找具有指定名称的图像。

<img src="${LargePhoto}" width="100" height="100">

HTML-CSS-aware Controls 可识别 HTML-CSS 的控件

Html内容控件

HtmlContentControl 是一个图面，您可以在其中从 HTML-CSS 标记构建 UI。

在这里插入图片描述

Html内容弹出窗口

HtmlContentPopup 是 HtmlContentControl 的弹出版本。此组件从 HTML-CSS 代码生成 UI，并将其显示为浮出控件或模式窗口。
在这里插入图片描述

网格控件的项视图

新的 ItemsView 没有默认的数据表示形式。它仅从您使用属性指定的 HTML-CSS 模板或使用事件动态呈现其项目（数据记录）。

在这里插入图片描述

网格控件的平铺视图

TileView 从模板生成其项（磁贴）。您可以在常规模板和基于 HTML-CSS 的模板之间进行选择。

在这里插入图片描述

GridControl 的 WinExplorer视图

WinExplorerView 支持 HTML-CSS 模板来构建卡片布局。您可以手动为每个显示样式指定 HTML-CSS 模板（ExtraLarge、Large、Medium、List、Tiles 等），也可以使用事件动态指定。

在这里插入图片描述

GanttControl 甘特图控制

GanttControl 允许您使用 HTML-CSS 标记来呈现许多元素：

任务、摘要和里程碑
常规任务进度和摘要任务进度
常规任务基线、摘要任务基线和里程碑任务基线
Text Labels 文本标签
Interaction Tooltips 交互工具提示
Split Tasks 拆分任务

在这里插入图片描述

有关详细信息，请参阅以下主题：甘特图控件中的 HTML 模板。

Scheduler Control 调度程序控制

您可以在 SchedulerControl 中使用基于 HTML-CSS 的模板来呈现约会。
在这里插入图片描述

TreeList 树列表

WinForms TreeList 控件支持 HTML/CSS 模板，并允许您为节点及其空白区域生成唯一的自定义布局。使用以下 API 创建和应用 HTML 模板：

NodeHtmlTemplate - 指定节点的默认 HTML-CSS 模板。
EmptyTreeHtmlTemplate - 为空 TreeList 控件指定默认 HTML-CSS 模板。
HtmlTemplates - 可基于条件应用于 TreeList UI 元素的 HTML 模板集合。
QueryNodeTemplate - 允许您根据条件应用 HtmlTemplates 集合中的模板。
CustomizeNodeTemplate - 允许您自定义模板化节点。

在这里插入图片描述

DirectX Form DirectX 表格

标准 Visual Studio 表单的替代项，为其子控件启用 DirectX 硬件加速，并支持基于 HTML-CSS 的模板。

在这里插入图片描述

Alert Controls 警报控件

AlertControl 的模板允许您呈现现代应用程序通知。

在这里插入图片描述
请参阅使用 HTML 模板的警报窗口。

Listbox Controls and ComboBox Editor 列表框控件和组合框编辑器

您可以使用基于 HTML-CSS 的模板来呈现以下控件中的项：

在这里插入图片描述

Accordion Control 折叠控制

AccordionControl 允许您使用 HTML-CSS 模板来呈现其 UI 元素：

Items and groups 项和组
Footer elements 页脚元素
Elements in the minimized state, etc. 处于最小化状态的元素等。

在这里插入图片描述