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

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

獲取DevExpress 最新版下載

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

在上文中（點擊這里回顧>>)，我們為大家介紹了HTML-CSS標記的一些基礎概念，本文將繼續為大家介紹如何動態指定HTML-CSS模板、動態自定義項目等，歡迎持續關注這個系列的文章哦~

HTML-CSS標記

動態指定HTML-CSS模板

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

這些控件具有將模板分配給項的事件，從而動態覆蓋默認模板：

示例

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

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

動態自定義項目

從模板生成項的控件也有事件來動態自定義每個項：

在控件中的每個項顯示在屏幕上之前觸發這些事件，它們允許開發人員訪問將要呈現的單個HTML元素，并自定義它們的可見性和樣式設置。

示例

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

開發人員可以在下面的演示中找到這個示例的完整代碼：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

數據綁定

如果控件綁定到數據源，可以在HTML標記中使用以下語法來顯示數據源字段的值：

${FieldName}

' $ '字符指定后面的文本是控件需要求值的表達式，表達式可以包含靜態文本和綁定到多個字段的數據：

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

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

HTML

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

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

HTML

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

DevExpress技術交流群6：600715373      歡迎一起進群討論