其他分享
首页 > 其他分享> > 界面组件DevExpress WinForms——这些HTML&CSS核心功能即将补强

界面组件DevExpress WinForms——这些HTML&CSS核心功能即将补强

作者:互联网

在本文中,我们将详细介绍HTML & CSS模板引擎即将发生的新变化——官方技术团队期望在v22.2发布周期中实现的新功能。

DevExpress WinForms v22.1正式版下载

CSS样式选择器

使用 v22.2,您将能够为同一元素指定多种样式,并根据给定属性的值选择活动样式。例如,以下标记复制自"HTML Demo | WinExplorer View模块。在此标记中,外部 <div> 元素用作多个数据绑定元素的容器,并使用静态 item_info-outer 样式设置样式。

<div class="item_info_outer">
<div class="name">${TrademarkName} {Name}</div>
<!--Other data-bound elements-->
</div>
.item_info_outer { background-color: @HighlightAlternate/0.2; ... }

在v22.2中,您将能够使用dx-class属性来指定CSS选择条件。 在下面的示例中,外部容器根据Modification字段值选择一个CSS类,因此对于“SUV”、“Truck”、“Car”和其他值,整个项目块将呈现不同的方式。

<div dx-class="{Modification}">
<div class="name">${TrademarkName} {Name}</div>
<!--Other data-bound elements-->
</div>
.SUV { background-color: @Red/0.2; ... }
.Car { background-color: @Blue/0.2; ... }
.Truck { background-color: @Green/0.2; ... }

对于此示例,您将需要名称与"Modification" 枚举的值匹配CSS类,如果选择器属性是不同的类型,则 dx-class 属性语法可能不同。 例如,下面的代码说明了如何根据布尔属性值选择样式。

<div dx-class="{InStock: item-instock, item-outofstock}">${InStock}</div>
.item-instock { color: @ControlText; }
.item-outofstock { color: @DisabledText; }

您将能够同时使用 class 和 dx-class 属性,标准类指定默认项目样式,如果满足 dx-class 条件,则应用上面的条件样式。

可重用的自定义元素

在 v22.2 中,您将能够创建封装特定功能的自定义 HTML 标签,并将这些标签作为子元素包含在模板中。

这种机制还将允许DevExpress发布自定义标签,具体来说,可用于可视化数据集合的标签,例如分配给网格卡的员工集合。

<div class="card">
<div class="title">{Title}</div>
<!--other child elements-->
<avatars-box
Items="${Owners}"
ImageMember="Avatar"
Initials="FullName">
</avatars-box>
</div>

由于没有开箱即用的 HTML 元素来呈现此类子集合,因此您需要处理控件的 CustomizeHtmlTemplate 事件并即时修补模板 - 根据数量添加或删除 <div> 元素 的集合项目。这种方法远非受本地 Web 启发的设计,一旦您拥有 WebComponents 就可以解决。

元素对齐

官方技术团队期望支持position 和 top/bottom/left/right 属性,您可以使用这些属性的组合在其父元素内对齐元素,并设置与所需边框的偏移量。

position: absolute;
bottom: 0;
right: 0;
文本选择

下一个主要更新将附带一个高度要求的与模板相关的功能,从 HTML 模板中选择和复制文本的功能。

DevExpress WinForm | 下载试用

DevExpress WinForm拥有180+组件和UI库,能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!


DevExpress技术交流群6:600715373      欢迎一起进群讨论

更多DevExpress线上公开课、中文教程资讯请上中文网获取

标签:color,DevExpress,元素,WinForms,样式,HTML,CSS
来源: https://www.cnblogs.com/AABBbaby/p/16578753.html