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

獲取DevExpress 最新版下載

許多DevExpress WinForm數(shù)據(jù)感知控件都支持HTML & CSS模板（包括WinForms Data Grid、WinForms Gantt控件），這些控件顯示純數(shù)據(jù)（其中每個(gè)數(shù)據(jù)字段存儲(chǔ)簡單值，如數(shù)字、字符串、布爾值等）時(shí)，數(shù)據(jù)綁定語法允許開發(fā)人員不受限制地構(gòu)造模板。

<div>${ModelName}</div>
<div>${Price}</div>
<div>$Available: {InStock}</div>
<img src="${Photo}"/>

有些數(shù)據(jù)源還可能包含存儲(chǔ)項(xiàng)集合的數(shù)據(jù)字段：List、數(shù)組、數(shù)據(jù)集等，數(shù)據(jù)網(wǎng)格顯示具有簡單屬性(Title、Manager、Due Data)的任務(wù)，以及一個(gè)集合屬性(“Members”屬性返回分配給該卡片的員工列表)。

在以前的版本中，可以通過在CustomItemTemplate事件中操作模板來顯示來自這些屬性的數(shù)據(jù)。這意味著開發(fā)人員需要手動(dòng)檢查這個(gè)特定數(shù)據(jù)記錄的收集容量，為每個(gè)項(xiàng)目創(chuàng)建一個(gè)HTML元素，并用真正的HTML標(biāo)記替換預(yù)先添加的假元素。

void OnCustomItemTemplate(object sender, TileViewCustomItemTemplateEventArgs e) {
var task = tileView1.GetRow(e.RowHandle) as EmployeeTask;
var sb = new StringBuilder();
foreach(var member in task.Members) {
sb.Append("<div class=\"initials\">");
sb.Append(member.Initials);
sb.Append("</div>");
}
e.HtmlTemplate.Template = e.HtmlTemplate.Template.Replace("", sb.ToString());
}

在下一個(gè)重大版本（v22.2）更新中，開發(fā)人員可以避免手動(dòng)定制模板，并利用更原生的方法。標(biāo)記是唯一的DevExpress元素，它允許開發(fā)人員指定一個(gè)集合屬性，其中的項(xiàng)需要可視化，以及必須應(yīng)用于這些項(xiàng)的模板。

• 第1至3行 - 應(yīng)用于每個(gè)集合項(xiàng)的模板，注意這些模板必須在控件的主模板之前聲明。
  • ${Initials}綁定告訴模板它應(yīng)該顯示"Initials"屬性的值。
  • title屬性允許集合項(xiàng)顯示具有“FullName”屬性值的提示。
• 第18行和第19行 - <dx-collection>標(biāo)記。
  • Items屬性指向集合屬性。
  • ItemTemplate屬性指定必須應(yīng)用于集合項(xiàng)的模板ID。

除了這個(gè)核心功能，開發(fā)人員可以利用條件CSS格式，在之前的文章中有介紹：如何使用HTML&CSS模板的條件樣式？

dx-class屬性支持集合的四個(gè)惟一屬性：

• dx-first和dx-last - 應(yīng)用于集合的第一個(gè)和最后一個(gè)項(xiàng)，如果集合只有一個(gè)項(xiàng)，則忽略這兩種樣式。
• dx-odd 和 dx-even — 用于索引為奇數(shù)和偶數(shù)的項(xiàng)，第一個(gè)集合項(xiàng)是偶數(shù)(索引為0)..

<template id="template for items">
<div class="text circle"
dx-class="{dx-odd:ci-odd; dx-even:ci-even; dx-first:ci-first; dx-last:ci-last;}">
${Initials}
</div>
</template>

.ci-odd { background-color: White; }
.ci-even{ background-color: Black; }
.ci-first{ background-color: Gray; }
.ci-last { background-color: Orange; }

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