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

注意：目前基于HTML & CSS的控件正在積極研發(fā)中，可以作為技術(shù)預(yù)覽提供，如果需要使用請(qǐng)下載最新版組件體驗(yàn)哦~

獲取DevExpress 最新版下載

一組控件和組件允許開發(fā)人員構(gòu)建HTML格式的UI，并使用CSS樣式自定義UI元素的外觀設(shè)置、大小、填充和布局選項(xiàng)，不再需要處理自定義繪制事件或更改大量屬性來修改控件以匹配UI規(guī)范，可以使用HTML和CSS標(biāo)記的知識(shí)為桌面應(yīng)用程序構(gòu)建布局。

在上文中（點(diǎn)擊這里回顧>>)，我們?yōu)榇蠹医榻B了HTML-CSS標(biāo)記的一些基礎(chǔ)概念，本文將繼續(xù)為大家介紹如何動(dòng)態(tài)指定HTML-CSS模板、動(dòng)態(tài)自定義項(xiàng)目等，歡迎持續(xù)關(guān)注這個(gè)系列的文章哦~

HTML-CSS標(biāo)記

動(dòng)態(tài)指定HTML-CSS模板

許多控件使用HTML-CSS模板來呈現(xiàn)它們的項(xiàng)，例如從 屬性指定的默認(rèn)模板中生成它的所有項(xiàng)(記錄)。

這些控件具有將模板分配給項(xiàng)的事件，從而動(dòng)態(tài)覆蓋默認(rèn)模板：

示例

下面的ItemsView.QueryItemTemplate事件處理程序根據(jù)項(xiàng)的類型(IsOwnMessage設(shè)置)為不同的項(xiàng)分配不同的模板。

C#

void OnQueryItemTemplate(object sender, QueryItemTemplateEventArgs e) {
var message = e.Row as DevAV.Chat.Model.Message;
if(message == null)
return;
if(message.IsOwnMessage)
Styles.MyMessage.Apply(e.Template);
else
Styles.Message.Apply(e.Template);
//...
}

VB.NET

Private Sub OnQueryItemTemplate(ByVal sender As Object, ByVal e As QueryItemTemplateEventArgs)
Dim message = TryCast(e.Row, DevAV.Chat.Model.Message)
If message Is Nothing Then Return
If message.IsOwnMessage Then
Styles.MyMessage.Apply(e.Template)
Else
Styles.Message.Apply(e.Template)
End If
'...
End Sub

動(dòng)態(tài)自定義項(xiàng)目

從模板生成項(xiàng)的控件也有事件來動(dòng)態(tài)自定義每個(gè)項(xiàng)：

在控件中的每個(gè)項(xiàng)顯示在屏幕上之前觸發(fā)這些事件，它們?cè)?許開發(fā)人員訪問將要呈現(xiàn)的單個(gè)HTML元素，并自定義它們的可見性和樣式設(shè)置。

示例

下面的示例根據(jù)自定義邏輯更改HTML元素的可見性。

開發(fā)人員可以在下面的演示中找到這個(gè)示例的完整代碼：Chat Client。

C#

//CustomizeItem event handler:
void OnCustomizeItem(object sender, CustomizeItemArgs e) {
//...
if(message.IsLiked) {
var btnLike = e.Element.FindElementById("btnLike");
var btnMore = e.Element.FindElementById("btnMore");
if(btnLike != null && btnMore != null) {
btnLike.Hidden = false;
btnMore.Hidden = true;
}
}
if(message.IsFirstMessageOfBlock)
return;
if(!message.IsOwnMessage) {
var avatar = e.Element.FindElementById("avatar");
if(avatar != null)
//Display an empty region instead of the 'avatar' element.
avatar.Style.SetVisibility(Utils.Html.Internal.CssVisibility.Hidden);
}
//...
}

VB.NET

Private Sub OnCustomizeItem(ByVal sender As Object, ByVal e As CustomizeItemArgs)
Dim message = TryCast(e.Row, DevAV.Chat.Model.Message)
If message Is Nothing Then Return
If message.IsLiked Then
Dim btnLike = e.Element.FindElementById("btnLike")
Dim btnMore = e.Element.FindElementById("btnMore")
If btnLike IsNot Nothing AndAlso btnMore IsNot Nothing Then
btnLike.Hidden = False
btnMore.Hidden = True
End If
End If

If message.IsFirstMessageOfBlock Then Return
If Not message.IsOwnMessage Then
Dim avatar = e.Element.FindElementById("avatar")
'Display an empty region instead of the 'avatar' element.
If avatar IsNot Nothing Then avatar.Style.SetVisibility(Utils.Html.Internal.CssVisibility.Hidden)
End If
'...
End Sub

數(shù)據(jù)綁定

如果控件綁定到數(shù)據(jù)源，可以在HTML標(biāo)記中使用以下語法來顯示數(shù)據(jù)源字段的值：

${FieldName}

' $ '字符指定后面的文本是控件需要求值的表達(dá)式，表達(dá)式可以包含靜態(tài)文本和綁定到多個(gè)字段的數(shù)據(jù)：

• $text{FieldName}text
• ${FieldName1}text{FieldName2}text

例如，下面的HTML代碼顯示了來自控件數(shù)據(jù)源的“UserName”字段的值：

HTML

<div class='contactName'>${UserName}</div>

下面的示例在用戶名之前添加' Welcome '字符串：

HTML

<h1>$Welcome {UserName}!</h1>

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