在之前官方正式宣布Alert Control中支持HTML & CSS模板，正如上篇文章中所述，HTML 和 CSS 模板允許您輕松創(chuàng)建自定義/現(xiàn)代通知。在本文中，將分享更多與模板相關(guān)的更新，您可以期待DevExpress的v22.1版本了！

獲取工具下載 - DevExpress v21.2

ListBox控件

在以前的版本中，技術(shù)團(tuán)隊(duì)為WinForms ListBox控件引入了標(biāo)準(zhǔn)模板——一種類(lèi)似于平鋪視圖中可用的設(shè)計(jì)器，使您可以輕松地在 ListBox 項(xiàng)目表面上排列元素。v22.1 中可用的 HTML 和 CSS 模板將這種自定義靈活性提升到一個(gè)全新的水平。

上圖取自技術(shù)團(tuán)隊(duì)更新的HTML Demo Center模塊，使用以下HTML標(biāo)記來(lái)創(chuàng)建此示例UI。

<div class="contact">
<div class="contact-avatar">
<img class="photo" src="${Photo}" />
<div class="status" id="status"></div>
</div>
<div>
<div class="contact-body">
<div class="contact-info">
<div class="name-info">
<div class="name">${FirstName} {LastName}</div>
<img class='info' src='Contact' id="info" />
</div>
<div class="phone">${HomePhone}</div>
</div>
</div>
<div class='selection'></div>
</div>
</div>

ComboBox編輯

ComboBox編輯與 ListBox Edit 模板類(lèi)似，您可以利用 ${FieldName} 語(yǔ)法來(lái)添加數(shù)據(jù)占位符。 在運(yùn)行時(shí)，這些占位符將替換為來(lái)自數(shù)據(jù)源的實(shí)際值。 正如您在下面看到的，這使HTML 和 CSS 模板成為構(gòu)建數(shù)據(jù)感知控件布局的完美工具。

此示例 ComboBox Edit UI 的模板如下：

<div class="contact">
<div class="contact-avatar">
<img class="photo" src="${Photo}" />
</div>
<div>
<div class="contact-body">
<div>
<div class="name">${FirstName} {LastName}</div>
<div class="label">${Department}</div>
</div>
</div>
<div class='selection'></div>
</div>
</div>

TileView模板的項(xiàng)目自動(dòng)高度

在 v21.2 發(fā)布周期中引入了對(duì) TileView 的 HTML 和 CSS 模板支持，在官方即將發(fā)布的版本中，您將能夠根據(jù)內(nèi)容大小調(diào)整圖塊。

要啟用此功能，只需將 OptionsHtmlTemplate.ItemAutoHeight 屬性設(shè)置為 true。

上面的圖像是使用以下 HTML 代碼創(chuàng)建的：

<div class="container">
<div class="card">
<div class="stripe" id="stripe"></div>
<div class="content">
<div class="top-block">
<div class="caption"><b>${Name}</b></div>
</div>
<div class="description">${Description}</div>
<div class="bottom-block">
<div class="bottom-block-near">
<div><span style="color:@DisabledText">Due Date: </span>${DueDate}</div>
<div><span style="color:@DisabledText">Employee: </span>${Employee}</div>
</div>
<div class="status">${Status}%</div>
</div>
</div>
</div>
</div>

DevExpress WinForm | 下載試用

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

更多產(chǎn)品正版授權(quán)詳情及優(yōu)惠，歡迎咨詢(xún)

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