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)容：

在上文中（）我們主要為大家介紹了如何使用HTML/CSS，本文將繼續(xù)介紹使用HTML/CSS的一些場(chǎng)景，請(qǐng)繼續(xù)關(guān)注我們哦~

獲取DevExpress WinForms最新正式版下載

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

高級(jí)場(chǎng)景

以下使用場(chǎng)景需要具備DevExpress WinForms UI控件和HTML/CSS的高級(jí)知識(shí)。

創(chuàng)建復(fù)雜的數(shù)據(jù)輸入表單(高級(jí))

HTML/CSS模板允許您創(chuàng)建完全自定義的數(shù)據(jù)表單，如果DevExpress WinForms LayoutControl不能達(dá)到您的預(yù)期效果，那么我們建議使用HTML/CSS模板。使用HTML/CSS從頭開始構(gòu)建布局可能很耗時(shí)，特別是對(duì)于具有多個(gè)字段的復(fù)雜表單。DevExpress的LayoutControl在構(gòu)建時(shí)考慮了可訪問性，這包括適當(dāng)?shù)臉?biāo)簽、鍵盤導(dǎo)航支持以及與屏幕閱讀器的兼容性等特性。

使用CustomDraw顯示交互式元素~(高級(jí))

并非所有的DevExpress WinForms UI控件都支持鼠標(biāo)事件(出于性能原因)，這個(gè)限制并不妨礙交互UI元素在DevExpress控件中顯示。盡管如此，它確實(shí)需要編寫更復(fù)雜的代碼：

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元素并綁定關(guān)聯(lián)狀態(tài)到數(shù)據(jù)~(高級(jí))

與靜態(tài)模板不同，數(shù)據(jù)感知模板呈現(xiàn)需要編寫更多代碼(特別是需要從不同的源檢索數(shù)據(jù)時(shí))。下面的示例在Grid單元格中繪制銷售徽章，折扣大小是從不同的數(shù)據(jù)源獲得的。

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創(chuàng)建完全自定義UI控件(高級(jí))

DevExpress WinForms HtmlContentControl是使用HTML-CSS標(biāo)記構(gòu)建WinForms UI的“表面”，WinForms HtmlContentPopup是它的彈出菜單版本。這些組件從HTML/CSS代碼生成一個(gè)WinForms界面，并允許您設(shè)計(jì)定制的WinForms UI控件。使用DevExpress組件和HTML/CSS創(chuàng)建自定義UI控件是一項(xiàng)高級(jí)技術(shù)，需要深入了解UI開發(fā)的兩種技術(shù)/細(xì)微差別。

可視化集合(高級(jí))

數(shù)據(jù)源可能包括存儲(chǔ)項(xiàng)目集合的數(shù)據(jù)字段：列表、數(shù)組、數(shù)據(jù)集等。<dx-collection>標(biāo)簽是一個(gè)唯一的DevExpress元素，它允許您為需要可視化的項(xiàng)指定集合屬性(以及必須應(yīng)用于這些項(xiàng)的模板)。使用自定義標(biāo)記(如<dx-collection>)會(huì)對(duì)HTML模板施加特定的要求，以實(shí)現(xiàn)適當(dāng)?shù)墓δ堋?

使用DevExpress WinForms HTML & CSS引擎時(shí)不要做的事

• 不要?jiǎng)?chuàng)建復(fù)雜的嵌套flex布局
  (例如，3個(gè)或更多嵌套的flex面板)
• 不要?jiǎng)?chuàng)建CSS動(dòng)畫
• 在處理UI控件事件時(shí)不要修改HTML元素
• 不要在基于HTML元素的HTML模板中實(shí)現(xiàn)邏輯
  最好在模型中創(chuàng)建一個(gè)單獨(dú)的屬性，并在模型中計(jì)算邏輯。
• 不要按原樣使用外部資源中預(yù)先編寫的HTML/CSS代碼
  這樣的代碼可能無法工作，因?yàn)椴恢С炙械腍TML標(biāo)簽/屬性。