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. 处于最小化状态的元素等。