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

獲取DevExpress 最新版下載

在官方發布的下一個主要更新（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 }

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