彩票走势图

界面组件DevExpress WinForms v22.2新版亮点:升级对HTML & CSS的支持

翻译|产品更新|编辑:龚雪|2023-03-07 09:57:44.597|阅读 113 次

概述:DevExpress WinForm 已正式发布了重大版本v22.2,此版本全面升级了对HTML & CSS的支持、增强了仪表板功能等,欢迎下载最新版控件体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

DevExpress WinForm 已正式发布了重大版本v22.2,此版本全面升级了对HTML & CSS的支持、增强了仪表板功能等,欢迎下载最新版控件体验!

DevExpress技术交流群7:674691612      欢迎一起进群讨论

仪表板
支持DirectX

DevExpress WinForms Gauges(仪表板)控件现在在放置DirectX表单中时使用DirectX引擎渲染。

支持HTML & CSS
消息框和对话框的HTML & CSS模板

WinForms消息框和对话框组件现在支持HTML和CSS模板。

DevExpress WinForms v22.2新版图集
用于工具提示的HTML & CSS模板

新版本的WinForms ToolTips现在支持HTML & CSS模板。

DevExpress WinForms v22.2新版图集
Accordion - 支持HTML & CSS模板

WinForms Accordion控件现在支持业界首创的WinForms HTML & CSS模板引擎,HTML & CSS模板允许开发者在最短的时间内创建完全自定义的用户界面,新的API几乎可以为每个Accordion UI元素生成模板。

DevExpress WinForms v22.2新版图集

技术团队创建了一个新的演示,展示如何将WinForms Accordion控件转换为漂亮的Hamburger菜单。

DevExpress WinForms v22.2新版图集
HTML选择

用户现在可以选择HTML模板显示的文本,HTML选择在HTML内容控件和WinForms Data Grid(数据网格)的ItemsView、TileView和WinExplorerView中提供,使用属性来启用这个功能。

新版本添加了一个新的SelectedText属性来存储选定区域的文本内容(包括文本、按钮说明、图像和其他HTML元素)。

SelectedTextChanged事件在选择发生变化时发生,并允许开发者根据需要查看和更改所选文本。

DevExpress WinForms v22.2新版图集
自定义绘制HTML

开发者现在可以在Custom Draw事件处理程序中绘制HTML模板,事件参数包括e.DrawHtml方法,大多数DevExpress WinForm UI控件都引入了这种增强。

HTML

<div class="container">
<div class="cpu-name">${ProcName}</div>
<div>
<div class="label">${ProcBaseFrequency}</div>
<div class="label">${RamMemorySize}</div>
<div class="label">${VidTrademark} {VidMemorySize}</div>
</div>
<div class="price">${ModelPrice}</div>
<div id="btn-add" class="btn-add" dx-class="{Added:added}">${AddButtonCaption}</div>
</div>

CSS

.container {
text-align:center;
padding-top:18px;
}
.cpu-name {
font-size:14px;
font-weight:bold;
}
.label {
display:inline-block;
background-color:@DisabledText/0.3;
padding:4px;
border-radius:4px;
}
.price {
margin-top:6px;
margin-bottom:6px;
font-size:18px;
}
.btn-add {
display:inline-block;
background-color:@HighlightAlternate;
color:@White;
padding:8px;
border-radius:18px;
font-weight:bold;
cursor:pointer;
}
.added{
background-color:@Green;
}

C#

void OnCustomDrawRecordHeader(object sender, Events.CustomDrawRecordHeaderEventArgs e) {
// ...
e.DrawHtml(headerTemplate, htmlCtx, (args) => {
args.InteractivityKey = dataSourceRowIndex;
bool isAddedToCart = orders.Contains(dataSourceRowIndex);
args.SetFieldValue("Added", isAddedToCart);
args.SetFieldValue("AddButtonCaption", isAddedToCart ? "ADDED TO CART" : "ADD TO CART");
});
}
DevExpress WinForms v22.2新版图集
可视化数据收集

新的<dx-collection>标记为集合中的每个元素呈现一个模板。

HTML

<template id="member-template">
<div class="initials">${Initials}</div>
</template>
...
<dx-collection class="members" Items="${Members}" ItemTemplate="member-template"></dx-collection>
DevExpress WinForms v22.2新版图集
Html模板集合

技术团队创建了一个新的 组件——一个外部模板存储,添加到此集合的HTML和CSS模板可以被不同的UI控件使用。

CSS样式选择器

开发者现在可以有条件地直接在HTML标记中应用样式,使用HTML标记比在后面的代码中处理事件更容易、更快。

使用新的dx-class属性来指定CSS选择条件。

新版本支持以下语法选项:

HTML

<!-- Boolean data field -->
<div dx-class="{IsUrgent: urgent, normal}">
<!-- Applies the 'active' class if the IsActive property is set to true. -->
<img dx-class="{IsActive: active}" />

<!-- Hides the element if the IsVisible property is set to true. -->
<img dx-class="{IsVisible: , hidden}" />
</div>

<!--
Enumeration data field.
The 'red' class corresponds to the first element.
The 'green' class corresponds to the second element, and so on.
-->
<div dx-class="{Color: red, green, blue}">
...
</div>

<!--
Enumeration data field.
Class names should exactly match enumeration values.
-->
<div dx-class="{State}">
...
</div>

<!-- A string data field that matches the class name -->
<div dx-class="{ClassName}">
...
</div>

您可以在一个条件中应用多个类,当然也可以同时使用静态类和多条件类。

HTML

<div class="task" dx-class="{IsUrgent: urgent highlight, normal}">
...
</div>
DevExpress WinForms v22.2新版图集
着色SVG - 'Fill' CSS属性支持

<img>标记现在支持填充属性,使用此属性可为SVG图像设置颜色,此设置覆盖了表示属性<path fill="#fff"…/>和内联样式(例如,<path style="fill: #fff;"...= " " / >)。

CSS

img {
fill: Gray;
}
img:hover {
fill: Green;
}
img:active {
fill: LightGreen;
}

HTML

<img src="my-svg-image" />
DevExpress WinForms v22.2新版图集

DevExpress v22.2全新发布

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP