DevExpress 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屬性本身中為相同的值建立多個樣式的連結，為此使用空格作為分隔符輸入樣式名，下一個逗号字元之前的所有樣式将同時應用。
dx-class="{BooleanProperty: trueA trueB trueC , falseA falseB}
dx-class="{EnumProperty: value1Style1 value1Style2 ,, value3Style1 value3Style2 }