DevExpress WinForms擁有180+組件和UI庫(kù)，能為Windows Forms平臺(tái)創(chuàng)建具有影響力的業(yè)務(wù)解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應(yīng)用程序，無論是Office風(fēng)格的界面，還是分析處理大批量的業(yè)務(wù)數(shù)據(jù)，它都能輕松勝任！

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

獲取DevExpress WinForms最新正式版下載

DevExpress技術(shù)交流群10：532598169      歡迎一起進(jìn)群討論

如何使用HTML/CSS？

下面的WinForms使用場(chǎng)景需要基本的HTML/CSS知識(shí)。

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

使用HTML/CSS模板為（并消除CustomDraw~事件處理程序中的手動(dòng)繪制）創(chuàng)建自定義UI元素，使用DevExpress的WinForms HTML/CSS引擎，您可以自定義ListBox和Combobox項(xiàng)目、TileView/ItemsView/WinExplorerView中的卡片、日程約會(huì)、消息框、工具提示等，您可以從數(shù)據(jù)字段中檢索數(shù)據(jù)感知控件的值，基于條件實(shí)現(xiàn)綁定，并使用DevExpress皮膚顏色。

例如，DevExpress WinForms Accordion控件包含多個(gè)HTML模板，用于各種UI元素(如項(xiàng)目、頁(yè)腳、組、頁(yè)眉面板、菜單、按鈕、分隔符等)：

Visual Studio集成的HTML/CSS模板編輯器允許您在設(shè)計(jì)表面上管理外觀自定義，HTML/CSS模板編輯器使用嵌入式語法編輯器，具有智能感知、自動(dòng)完成、標(biāo)簽導(dǎo)航和預(yù)覽功能（來簡(jiǎn)化/方便在任何DevExpress支持的WinForms項(xiàng)目中使用HTML模板）。

HTML/CSS模板編輯器包括一組預(yù)先設(shè)計(jì)/可重用的模板，您可以“按原樣”使用這些模板，也可以根據(jù)需要進(jìn)行擴(kuò)展。還可以創(chuàng)建自定義HTML和CSS模板，將模板保存到庫(kù)中，并在需要時(shí)在任何WinForms項(xiàng)目中使用它。

在我們即將發(fā)布的版本(v24.1)中，將在Visual Studio的HTML模板設(shè)計(jì)器中發(fā)布40個(gè)預(yù)先編寫的HTML和CSS代碼片段，這些是處理常見HTML相關(guān)任務(wù)的優(yōu)化代碼片段。

使用CustomDraw~ 事件自定義控件UI元素

并不是所有的DevExpress WinForms控件UI元素都可以通過CustomDraw~事件來自定義繪制，支持HTML/CSS模板。但是所有CustomDraw~事件的事件參數(shù)都包含一個(gè)drawtml()方法，這個(gè)方法在UI元素的頂部繪制一個(gè)HTML/CSS模板。

下面的示例在“Page B”頂部繪制一個(gè)徽章：

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()實(shí)現(xiàn)細(xì)節(jié)

此功能的常見使用場(chǎng)景包括：

• 在WinForms Data Grid控件中自定義預(yù)覽行
• 自定義TreeList節(jié)點(diǎn)預(yù)覽部分
• 在空控件中顯示自定義內(nèi)容
• 在布局控件中自定義卡片標(biāo)題

在網(wǎng)格視圖中自定義布局和實(shí)現(xiàn)數(shù)據(jù)編輯

我們?cè)O(shè)計(jì)了網(wǎng)格的TileView、ItemsView和ExplorerView，以一種有組織的、視覺上優(yōu)雅的方式呈現(xiàn)數(shù)據(jù)。然而在這些視圖中編輯數(shù)據(jù)傳統(tǒng)上需要使用額外的UI元素(這些網(wǎng)格視圖不支持開箱即用的數(shù)據(jù)編輯)。

為了解決這個(gè)限制，您可以在HTML/CSS項(xiàng)模板中嵌入DevExpress數(shù)據(jù)編輯器，下面的動(dòng)畫演示了使用嵌入RatingControl的WinForms網(wǎng)格平鋪視圖：

自定義獨(dú)立數(shù)據(jù)編輯器

使用HTML和CSS模板來定制獨(dú)立的WinForms數(shù)據(jù)編輯器，只需將適當(dāng)的數(shù)據(jù)編輯器放到HtmlContentControl上，隱藏編輯器的邊框，并根據(jù)需要自定義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>

顯示簡(jiǎn)單交互元素

除了靜態(tài)內(nèi)容，還可以在HTML/CSS模板中包含交互元素。HTML感知控件公開鼠標(biāo)相關(guān)事件(如ElementMouseClick、ElementMouseOver、ElementMouseDown等)，您可以處理這些事件來響應(yīng)HTML UI元素上的鼠標(biāo)動(dòng)作。

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>