在这篇文章中，我将概述使用 DevExpress WinForms HTML/CSS 引擎/模板时重要的 "应做 "和 "不应做 "事项。如果您是 DevExpress 的新用户/考虑在即将到来的项目中使用我们的 WinForms UI 库，并且尚未探索 WinForms HTML/CSS 功能的潜力，请先花点时间查看以下在线内容：
使用 HTML/CSS 时的注意事项
以下 WinForms 使用场景需要基本的 HTML/CSS 知识。
自定义 HTML-CSS 感知控件的用户界面元素（简单）
使用 HTML/CSS 模板为 DevExpress 的 HTML/CSS-aware 控件创建自定义用户界面元素（无需在 CustomDraw~ 事件处理程序中手动绘制）。利用我们的 WinForms HTML/CSS 引擎，您可以自定义 ListBox 和 Combobox 项目、TileView/ItemsView/WinExplorerView 中的卡片、日程安排预约、消息框、工具提示等。您可以从数据感知控件的数据字段中获取值，根据条件实现绑定，并使用 DevExpress 皮肤颜色。
例如，我们的 WinForms Accordion 控件包含多个用于各种用户界面元素（如项目、页脚、组、页眉面板、菜单、按钮、分隔符等）的 HTML 模板：
运行演示： 汉堡菜单（手风琴控件）* * DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
* DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
我们集成了 Visual Studio 的 HTML/CSS 模板编辑器允许您在设计界面上管理外观定制。HTML/CSS模板编辑器使用嵌入式语法编辑器，具有智能提示、自动完成、标签导航和预览功能（简化/方便在任何DevExpress驱动的WinForms项目中使用HTML模板）。
我们的 HTML/CSS 模板编辑器包含一组预先设计/可重复使用的模板。您可以 "按原样 "使用这些模板，也可以根据需要进行扩展。您还可以创建自定义 HTML 和 CSS 模板，将模板保存到图库中，并在需要时在任何 WinForms 项目中使用。
在即将发布的版本（v24.1）中，我们将在 HTML Template Designer for Visual Studio 中提供 40 个预先编写好的 HTML 和 CSS 代码片段。这些经过优化的代码片段可解决常见的 HTML 相关任务。
使用 CustomDraw~ 事件自定义控件 UI 元素（简单）
并非所有可通过 CustomDraw~ 事件自定义绘制的 DevExpress WinForms 控制 UI 元素都支持 HTML/CSS 模板。不过，所有 CustomDraw~ 事件的事件参数都包含一个 DrawHtml() 方法。该方法可在 UI 元素顶部绘制 HTML/CSS 模板。
下面的示例在 "页面 B "顶部绘制了一个徽章：
using DevExpress.XtraTab;
void xtraTabControl_CustomDrawTabHeader(object sender, TabHeaderCustomDrawEventArgs e) {
if (e.TabHeaderInfo.Page == tabPageB) {
e.DefaultDraw();
e.Handled = true;
e.DrawHtml(htmlTemplateBadge);
}
}自定义 Draw~/DrawHTML() 实现细节（视频）
该功能的常见使用场景包括
自定义 WinForms 数据网格控件中的预览行（运行演示）。
自定义 TreeList 节点预览部分（运行演示）。
在空控件中显示自定义内容（运行演示）。
在布局控件中自定义卡片标题。
在网格视图中自定义布局和实施数据编辑（简单）
我们设计了网格的 TileView、ItemsView 和 ExplorerView，以便以有组织、视觉效果优美的方式显示数据。但是，在这些视图中编辑数据传统上需要使用额外的 UI 元素（这些网格视图不支持开箱即用的数据编辑）。
为了解决这一限制，您可以在 HTML/CSS 项目模板中嵌入 DevExpress 数据编辑器。下面的动画演示了使用嵌入式 RatingControl 的 WinForms Grid TileView：
自定义单机版数据编辑器（简单）
使用 HTML 和 CSS 模板自定义独立的 WinForms 数据编辑器。只需在我们的 HtmlContentControl 上放置适当的数据编辑器，隐藏编辑器的边框，然后根据需要自定义 HtmlContentControl 的 HTML 模板即可。
<div class="input-box">
<input class="input" name="emailEdit" value="${Email}"/>
</div>
<div class="input-box">
<input class="input" name="passEdit" value="${Password}"/>
</div>
<div class="check-container">
<input class="check-box" name="checkEdit" value="${RememberMe}"/>
Remember me
</div>运行演示： 登录表单
* DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
显示简单的交互式元素（简单）
除了静态内容，您还可以在 HTML/CSS 模板中包含交互式元素。HTML 感知控件会暴露与鼠标相关的事件（如 ElementMouseClick、ElementMouseOver、ElementMouseDown 等），您可以处理这些事件来响应 HTML UI 元素上的鼠标操作。
htmlContentControl.ElementMouseClick += (s, e) => {
if(e.ElementId == "btnPhone")
XtraMessageBox.Show("Phone!");
if(e.ElementId == "btnVideo")
XtraMessageBox.Show("Video!");
if(e.ElementId == "btnText")
XtraMessageBox.Show("Text Message!");
};<!--HTML Template--> <div class='buttonPanel'> <img id="btnPhone" src="PhoneCall" class="button" /> <img id="btnVideo" src="VideoCall" class="button" /> <img id="btnText" src="Message" class="button" /> </div>
运行演示： 交互* * DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
* DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
高级应用场景
以下使用场景需要 DevExpress WinForms UI 控件和 HTML/CSS 的高级知识。
创建复杂的数据输入表单（高级）
HTML/CSS 模板允许您创建完全自定义的数据表单。只有当我们的 WinForms LayoutControl 无法让您实现所需的结果时，我们才建议您使用 HTML/CSS 模板。使用 HTML/CSS 从头开始创建布局可能会很耗时，尤其是对于包含多个字段的复杂表单。毋庸置疑，我们的 LayoutControl 在构建时考虑到了可访问性。这包括适当的标签、键盘导航支持以及与屏幕阅读器兼容等功能。
运行演示* * DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
* DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
使用自定义绘制显示交互式元素（高级）
并非所有 DevExpress WinForms UI 控件都支持鼠标事件（出于性能原因）。这一限制并不妨碍在 DevExpress 控件中显示交互式用户界面元素。不过，这需要编写更复杂的代码：
DxHtmlPainterContext ctx = new DxHtmlPainterContext();
HtmlTemplate htmlTemplate = new HtmlTemplate(
Loader.Load("ListBoxEmptyForeground.html"),
Loader.Load("ListBoxEmptyForeground.css"));
listControl.CustomDrawEmptyForeground += (s, e) => {
e.DrawHtml(htmlTemplate, ctx);
};
// Handles UI feedback (hover/cursor).
listControl.MouseMove += (s, e) => {
if(listControl.ItemCount == 0) {
ctx.OnMouseMove(e);
listControl.Cursor = ctx.GetCursor(e.Location);
listControl.Invalidate();
}
else listControl.Cursor = Cursors.Default;
};
// Handles Click within the btnAdd element.
var items = Enumerable.Range(1, 10)
.Select(n => string.Format("Item #{0:d2}", n))
.ToArray();
listControl.MouseDown += (s, e) => {
if(listControl.ItemCount == 0 && e.Button == MouseButtons.Left) {
var clickInfo = ctx.CalcHitInfo(e.Location);
if(clickInfo != null && clickInfo.HasId("btnAdd"))
listControl.Items.AddRange(items);
}
};
使用 CustomDraw 显示 UI 元素并将相关状态绑定到数据（高级）
与静态模板不同，数据感知模板渲染需要编写更多代码（尤其是需要从不同来源获取数据时）。下面的示例在网格单元格中绘制了销售徽章。折扣大小从不同的数据源获取。
using DevExpress.XtraEditors;
using DevExpress.XtraGrid.Views.Grid;
using DevExpress.XtraGrid.Views.Base;
using System.Collections.Generic;
namespace DXApplication {
public partial class Form1 : XtraForm {
Dictionary<string, double> discounts = new Dictionary<string, double>() {
{ "A", 0.3 },
{ "B", 0.45 },
{ "C", 0.2 }
};
public Form1() {
InitializeComponent();
gridControl1.DataSource = new List<Product>() {
new Product(){ Category = "A", Name = "AA", Price = 159.99},
new Product(){ Category = "A", Name = "AB", Price = 159.99},
new Product(){ Category = "B", Name = "BA", Price = 49.99},
new Product(){ Category = "B", Name = "BB", Price = 89.99},
new Product(){ Category = "C", Name = "CA", Price = 799.99},
};
gridView1.CustomDrawCell += GridView1_CustomDrawCell;
}
void GridView1_CustomDrawCell(object sender, RowCellCustomDrawEventArgs e) {
e.DefaultDraw();
e.Handled = true;
GridView view = sender as GridView;
string category = view.GetRowCellValue(e.RowHandle, view.Columns["Category"]) as string;
if (e.Column.FieldName == "Price" && discounts.ContainsKey(category)){
e.DrawHtml(htmlTemplateSaleBadge, args => {
args.SetFieldValue("Discount", discounts[category].ToString("p0"));
});
}
}
}
public class Product {
public string Name { get; set; }
public string Category { get; set; }
public double Price { get; set; }
}
}使用 HTML/CSS 创建完全自定义的用户界面控件（高级）
我们的 WinForms HtmlContentControl 是使用 HTML-CSS 标记构建 WinForms UI 的 "表面"。WinForms HtmlContentPopup 是其弹出版本。这些组件可从 HTML/CSS 代码生成 WinForms 界面，并允许您设计定制的 WinForms UI 控件。使用 DevExpress 组件和 HTML/CSS 创建自定义用户界面控件是一种高级技术，需要深入了解用户界面开发的两种技术/要素。
运行演示* * DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
* DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
可视化集合（高级）
数据源可能包括存储项目集合的数据字段：列表、数组、数据集等。<dx-collection> 标签是一个独特的 DevExpress 元素。通过它，您可以为需要可视化的项目指定集合属性（以及必须应用于这些项目的模板）。使用 <dx-collection> 等自定义标记会对 HTML 模板提出特定要求，以实现正确的功能。
运行演示： 磁贴视图（HTML/CSS 模板）* * DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
* DevExpress WinForms 演示应用程序需要安装我们的 WinForms UI 库。
使用我们的 WinForms HTML 和 CSS 引擎时的注意事项
不要创建复杂的嵌套柔性布局。(例如，3 个或更多嵌套的柔性面板）
不要创建 CSS 动画。
处理用户界面控件事件时不要修改 HTML 元素。
不要在 HTML 模板中基于 HTML 元素实现逻辑。最好在模型中创建一个单独的属性，并在模型中计算逻辑。
不要原封不动地使用外部资源中预先编写的 HTML/CSS 代码。这些代码可能无法正常工作，因为我们并不支持所有 HTML 标记/属性。
渝公网安备50010702505508