DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序无论是Office风格的界面还是分析处理大批量的业务数据它都能轻松胜任DevExpress新旧版本帮助文档下载可进QQ qun获取169725316在官方发布的下一个主要更新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; } // ... }该类的标记可能如下所示:HTMLdiv classhorz-container div classname${FirstName}/div div classname${LastName}/div div classvacation-labelVacation/div /divCSS.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 classvacation-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 classdefaultItemStyle dx-class{TaskSeverity} !--...-- /div...并创建与枚举值匹配的样式在上面的例子中负责选择正确的CSS样式的属性是“TaskSeverity”枚举它包括以下值:“Minor”“Moderate”“Critical”这意味着你需要创建三种CSS样式(或者更少如果你不需要特定值的额外样式).Minor { ... } .Moderate { ... } .Critical { ... }下图演示了如何在下一个WinForms项目中利用这种特殊技术侧边条纹根据任务严重程度改变颜色。如果您想使用自定义样式名在dx-class属性中显式指定它们div classdefaultItemStyle 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 classdefaultItemStyle 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; } } }HTMLdiv classhorz-container dx-class{ScoreRange} div classname${StudentName}/div div classname$Score: {Score}/div /divCSS.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 }