DevExpress WinForms擁有180+組件和UI庫，能爲Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易於使用的應用程序，無論是Office風格的界面，還是分析處理大批量的業務數據，它都能輕鬆勝任！
在這篇文章中，我們將概述使用DevExpress WinForms HTML/CSS引擎/模板時重要的注意事項。如果您是DevExpress的新手或正在考慮使用我們的WinForms UI庫來開發即將到來的項目，並且尚未了解DevExpress WinForms HTML/CSS功能的潛力，請先花點時間查看以下在線內容：HTML & CSS Markup for WinForms UI | DevExpress
如何使用HTML/CSS？
下面的WinForms使用場景需要基本的HTML/CSS知識。
自定義支持HTML-CSS-aware控件的UI元素
使用HTML/CSS模板爲DevExpress HTML/CSS-aware控件（並消除CustomDraw~事件處理程序中的手動繪製）創建自定義UI元素，使用DevExpress的WinForms HTML/CSS引擎，您可以自定義ListBox和Combobox項目、TileView/ItemsView/WinExplorerView中的卡片、日程約會、消息框、工具提示等，您可以從數據字段中檢索數據感知控件的值，基於條件實現綁定，並使用DevExpress皮膚顏色。
例如，DevExpress WinForms Accordion控件包含多個HTML模板，用於各種UI元素(如項目、頁腳、組、頁眉面板、菜單、按鈕、分隔符等)：
Visual Studio集成的HTML/CSS模板編輯器允許您在設計表面上管理外觀自定義，HTML/CSS模板編輯器使用嵌入式語法編輯器，具有智能感知、自動完成、標籤導航和預覽功能（來簡化/方便在任何DevExpress支持的WinForms項目中使用HTML模板）。
HTML/CSS模板編輯器包括一組預先設計/可重用的模板，您可以“按原樣”使用這些模板，也可以根據需要進行擴展。還可以創建自定義HTML和CSS模板，將模板保存到庫中，並在需要時在任何WinForms項目中使用它。
在我們即將發佈的版本(v24.1)中，將在Visual Studio的HTML模板設計器中發佈40個預先編寫的HTML和CSS代碼片段，這些是處理常見HTML相關任務的優化代碼片段。
使用CustomDraw~ 事件自定義控件UI元素
並不是所有的DevExpress WinForms控件UI元素都可以通過CustomDraw~事件來自定義繪製，支持HTML/CSS模板。但是所有CustomDraw~事件的事件參數都包含一個drawtml()方法，這個方法在UI元素的頂部繪製一個HTML/CSS模板。
下面的示例在“Page 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 Data Grid控件中自定義預覽行
- 自定義TreeList節點預覽部分
- 在空控件中顯示自定義內容
- 在佈局控件中自定義卡片標題
在網格視圖中自定義佈局和實現數據編輯
我們設計了網格的TileView、ItemsView和ExplorerView，以一種有組織的、視覺上優雅的方式呈現數據。然而在這些視圖中編輯數據傳統上需要使用額外的UI元素(這些網格視圖不支持開箱即用的數據編輯)。
爲了解決這個限制，您可以在HTML/CSS項模板中嵌入DevExpress數據編輯器，下面的動畫演示了使用嵌入RatingControl的WinForms網格平鋪視圖：
自定義獨立數據編輯器
使用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>
顯示簡單交互元素
除了靜態內容，還可以在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>