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

DevExpress Universal Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網

ListBox控件

在以前的版本中，技術團隊為WinForms ListBox控件引入了標準模板——一種類似于平鋪視圖中可用的設計器，使您可以輕松地在 ListBox 項目表面上排列元素。v22.1 中可用的 HTML 和 CSS 模板將這種自定義靈活性提升到一個全新的水平。

上圖取自技術團隊更新的HTML Demo Center模塊，使用以下HTML標記來創建此示例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 模板類似，您可以利用 ${FieldName} 語法來添加數據占位符。 在運行時，這些占位符將替換為來自數據源的實際值。 正如您在下面看到的，這使HTML 和 CSS 模板成為構建數據感知控件布局的完美工具。

此示例 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模板的項目自動高度

在 v21.2 發布周期中引入了對 TileView 的 HTML 和 CSS 模板支持，在官方即將發布的版本中，您將能夠根據內容大小調整圖塊。

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

上面的圖像是使用以下 HTML 代碼創建的：

<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庫，能為Windows Forms平臺創建具有影響力的業務解決方案。DevExpress WinForms能完美構建流暢、美觀且易于使用的應用程序，無論是Office風格的界面，還是分析處理大批量的業務數據，它都能輕松勝任！

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

復制下面鏈接獲取DevExpress：https://www.evget.com/product/740/download

在官方發布的下一個主要更新（v22.2）中，技術團隊計劃添加dx-class標簽屬性到HTML & CSS模板中，根據所選屬性的值，該標記將對同一元素應用不同的CSS樣式。

這個標簽的常用語法是<div dx-class="{PropertyName: N}">...</div>，其中PropertyName是應用所需CSS樣式的屬性的名稱，N表示可供選擇的樣式列表。

為了幫助解釋這個新特性的強大功能，讓我們看看如何基于屬性類型應用語法。

布爾屬性的樣式選擇

如果您的模板可視化具有Boolean屬性的項，可能期望對這些項設置不同的樣式(基于特定的業務需求/可視化需求)。為了將“true”或“false”狀態以不同的方式可視化，dx-class屬性語法應該如下所示:

<div dx-class="{InStock: styleForTrue, styleForFalse}">...</div>

假設您為顯示來自“Employee”類的記錄的WinForms Data Grid設計了一個模板。

public class Employee {
public string FirstName { get; set; }
public string LastName { get; set; }
public bool OnLeave { get; set; }
// ...
}

該類的標記可能如下所示:

HTML

<div class="horz-container">
<div class="name">${FirstName}</div>
<div class="name">${LastName}</div>
<div class="vacation-label">Vacation</div>
</div>

CSS

.vacation-label {
background-color: purple;
color: White;
width: 70px;
height: 20px;
border-radius: 10px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: bold;
}

對于這個特殊的例子，希望在當前正在“Vacation”（休假）的員工旁邊顯示一個徽章:

為了解決這個特殊的需求，需要創建一個額外的CSS樣式，設置“visibility=hidden”參數…

.hidden-element {
visibility: hidden;
}

...并使用dx-class將這種樣式應用于與OnLeave屬性相關的“false”值。

<div class="vacation-label" dx-class="{OnLeave: , hidden-element}">Vacation</div>

這個特殊的例子揭示了關于dx-class屬性的兩個重要事實：

• 您可以(也應該)同時使用類和dx-class屬性，standard屬性允許您設置對所有數據記錄無條件應用的樣式，而附加的CSS樣式則對符合給定條件的記錄應用附加的自定義。
• 如果不需要額外的自定義，可以省略"true"或"false"值的樣式。為此，不要在逗號分隔符之前或之后指定樣式名：dx-class="{OnLeave: true-only}或dx-class="{OnLeave:， false-only}。

枚舉屬性的樣式選擇

要根據枚舉類型屬性切換CSS樣式，請在dx-class…中指定適當屬性的名稱。

<div class="defaultItemStyle" dx-class="{TaskSeverity}">
<!--...-->
</div>

...并創建與枚舉值匹配的樣式，在上面的例子中，負責選擇正確的CSS樣式的屬性是“TaskSeverity”枚舉，它包括以下值:“Minor”，“Moderate”，“Critical”，這意味著你需要創建三種CSS樣式(或者更少，如果你不需要特定值的額外樣式)：

.Minor { ... }
.Moderate { ... }
.Critical { ... }

下圖演示了如何在下一個WinForms項目中利用這種特殊技術：側邊條紋根據任務嚴重程度改變顏色。

如果您想使用自定義樣式名，在dx-class屬性中顯式指定它們：

<div class="defaultItemStyle" dx-class="{TaskSeverity: style-A, style-B, style-C}">
<!--...-->
</div>

注意，此語法依賴于枚舉值聲明的順序。因此如果我們的示例“TaskSeverity”枚舉如下…

public enum VehicleType {
Moderate,
Minor,
Critical
}

...模板將以相同的順序應用樣式：“style-A”匹配“Moderate”值，“style-B”匹配“Minor”值，“style-C”匹配“Critical”值。

字符串屬性的樣式選擇

字符串屬性的dx-class語法類似于枚舉值：指定目標屬性的名稱，并創建與該屬性的可用值匹配的樣式。

<div class="defaultItemStyle" dx-class="{FirstName}">
<!--...-->
</div>

.Christel { ... }
.Lorenza { ... }
.Erin { ... }

基于字符串的選擇器涵蓋了所有不能使用基于布爾或基于枚舉的選擇器解決的情況。例如，下圖演示了一個基于模板的學生考試結果列表。

public class TestResults {
public string StudentName { get; set; }
public int Score { get; set; }
}

要應用不同的背景顏色，您可以在數據記錄類中聲明一個新的String屬性，并使用該屬性作為CSS樣式選擇器。

Code behind (C#)

public class TestResults {
public string StudentName { get; set; }
public int Score { get; set; }
public string ScoreRange { get {
if (Score < 40) return "Rank-Low";
if (Score >=40 && Score < 60) return "Rank-Medium";
return "Rank-High"; }
}
}

HTML

<div class="horz-container" dx-class="{ScoreRange}">
<div class="name">${StudentName}</div>
<div class="name">$Score: {Score}</div>
</div>

CSS

.Rank-Low { background-color: @Critical/0.5 }
.Rank-Medium { background-color: @WarningFill/0.5 }
.Rank-High { background-color: @Success/0.5; }

鏈接樣式

class和dx-class屬性是相互補充的：第一個屬性設置全局樣式，第二個屬性允許指定樣式選擇邏輯。注意，條件CSS樣式不會取消全局樣式——兩者同時是激活的，全局樣式應用默認設置，而條件樣式作為第二層應用到這個“預樣式”元素。

您還可以在dx-class屬性本身中為相同的值建立多個樣式的鏈接，為此使用空格作為分隔符輸入樣式名，下一個逗號字符之前的所有樣式將同時應用。

藍色科技風總結PPT模板分享】

1、藍色扁平風上半年度工作總結匯報：https://www.yomoer.cn/template/detail/7615.html

2、藍色科技風項目計劃總結匯報：https://www.yomoer.cn/template/detail/7650.html

3、藍色黨政公安警察PPT模板：https://www.yomoer.cn/template/detail/6948.html