DevExpress WinForms擁有180+組件和UI庫，能為Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易于使用的應用程序，無論是Office風格的界面，還是分析處理大批量的業務數據，它都能輕松勝任！

在這篇文章中，我們將概述使用DevExpress WinForms HTML/CSS引擎/模板時重要的注意事項。如果您是DevExpress的新手或正在考慮使用我們的WinForms UI庫來開發即將到來的項目，并且尚未了解DevExpress WinForms HTML/CSS功能的潛力，請先花點時間查看以下在線內容：

獲取DevExpress WinForms最新正式版下載

DevExpress技術交流群10：532598169      歡迎一起進群討論

如何使用HTML/CSS？

下面的WinForms使用場景需要基本的HTML/CSS知識。

自定義支持HTML-CSS-aware控件的UI元素

使用HTML/CSS模板為（并消除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>