当前位置:首页 > 技术分析 > 正文内容

界面控件DevExpress WinForms HTML & CSS模板——轻松创建警报通知

ruisui884周前 (05-21)技术分析9

在最新的DevExpress WinForm版本中,开发者可以使用WinForm产品线(通过DevExpress AlertControl和ToastNotificationManager)创建两种类型的通知/警报,最近技术团队还推荐使用DevExpress ToastNotificationManager来显示原生 Windows 10+ 通知。

DevExpress Universal Subscription官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网

尽管自定义选项有些有限(toast 仅提供九个布局模板),但ToastNotificationManager 代表了比传统的基于面板的AlertControl更好、更现代的替代方案。

在最新版中为AlertControl发布的HTML & CSS 模板,允许开发人员创建时尚的警告通知,同时可利用AlertControl 本身的简单性。下图说明了技术团队提供的一些示例模板(查找您喜欢的模板并将其复制到项目中):

大多数通知只是一个带有几个文本块、图像和按钮的矩形,设计这样简单的对象对每个人来说都应该相对容易——无论您有 HTML 和 CSS 经验,还是开始在WinForms 应用程序中利用其潜力。 例如以下模板创建一个带有图标、标题、描述和“确定”按钮的通知。

<div class="container">
<div class="popup">
<img src="${SvgImage}" class="image" />
<div class="caption">Notification Title</div>
<div class="text">This notification uses a web-inspired template.</div>
<div id="okButton" class="ok-button">OK</div>
</div>
</div>

请注意,在此示例标记中,通知标题和说明是静态字符串。 如果您要为用户显示一条消息,此解决方案就可以正常工作。

当然我们的数据绑定功能提供了更大的灵活性——您可以创建一个模板并将不同的数据对象传递给它。 因此,您可以为多个通知消息重用一个模板。

如果您更喜欢此选项,请使用 ${Data_property_name} 占位符,如下所示:

<div class="text">${Caption}</div>
<div class="text">${Text}</div>

“Caption”和“Text”是标准占位符,可以通过 AlertControl.Show 重载直接替换:

alertControl1.Show(this, "Sample caption", "Sample notification text");

您可以添加模板设计所需的任意数量的占位符,但请记住处理
AlertControl.BeforeFormShow 事件并将数据对象传递给 e.HtmlPopup.DataContext 属性。 例如,下面的代码使用 div 元素来显示由五个占位符组合而成的字符串:两个用于字符串值(FullName、Ticker),两个用于数字(Percentage、Price),一个用于自定义 Direction 枚举值。

<div class="message-text">
${FullName} ({Ticker}) {Direction} {Percentage}%. The current price is ${Price}.
</div>

通知图像也在运行时检索,img 标签使用占位符替代静态 src 属性值。

<img src="${StockImage}" class="message-image" />

此示例应用程序使用 StockInfo 类对象作为数据项。

public class StockInfo {
public StockInfo(string ticker, string fullName, Direction direction,
double percentage, double price, SvgImage img) {
Ticker = ticker;
FullName = fullName;
Direction = direction;
Percentage = percentage;
Price = price;
StockImage = img;
}

public string Ticker { get; set; }
public string FullName { get; set; }
public Direction Direction { get; set; }
public double Percentage { get; set; }
public double Price { get; set; }
public SvgImage StockImage { get; set; }
}

public enum Direction {
[Description("rises")]
Up,
[Description("falls")]
Down
}

当数据项的 "Price" 值在短时间内发生显着变化时会触发通知,相应的项目分配给
AlertControl.BeforeFormShow 事件处理程序中的 e.HtmlPopup.DataContext 属性。

void AlertControl1_BeforeFormShow(object sender, AlertFormEventArgs e) {
// TODO: Retrieve a data item
e.HtmlPopup.DataContext = myStockInfoInstance;
}

因此,通知会从指定为 DataContext 的数据项中检索其 ${Field_Name} 占位符的数据。 请注意,边条的颜色会根据 "Direction" 枚举值而变化。

DevExpress WinForm

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/4202.html

标签: html ::before
分享给朋友:

“界面控件DevExpress WinForms HTML &amp; CSS模板——轻松创建警报通知” 的相关文章

Ubuntu 24.10发行版登场:Linux 6.11内核、GNOME 47桌面环境

IT之家 10 月 11 日消息,Canonical 昨日发布新闻稿,正式推出代号为 Oracular Oriole 的 Ubuntu 24.10 发行版。新版在内核方面升级到最新 6.11 版本,并采用 GNOME 47 桌面环境。Ubuntu 24.10 发行版调整了内核策略,开始选择最新的上游...

Linux世界的多样性:yum和apt的对比,让你感受不同发行版的特色

yum和apt是两种常用的Linux软件包管理器,它们都可以用来安装、更新和删除软件包。但是,它们之间也有一些重要的区别,本文将对它们进行分析对比。yum是Yellowdog Updater Modified的缩写,它是基于RPM(Red Hat Package Manager)的软件包管理器,主要...

vue3中父子组件之间传值的详解

首先我们回顾一下vue2中父子组件是怎么传值的,然后对比vue3进行详解。一、vue2中父子组件传值<!-- 父组件 --> <template> <div> // name:父组件把值传给子组件test-child // childFn:...

Python 幕后:Python导入import的工作原理

更多互联网精彩资讯、工作效率提升关注【飞鱼在浪屿】(日更新)Python 最容易被误解的方面其中之一是import。Python 导入系统不仅看起来很复杂。因此,即使文档非常好,它也不能让您全面了解正在发生的事情。唯一方法是研究 Python 执行 import 语句时幕后发生的事情。注意:在这篇文...

JS数组过滤元素的方法

引言JavaScript 作为前端开发的核心技术之一,在现代 Web 开发中扮演着举足轻重的角色。随着 Web 应用越来越复杂,高效处理数据集合的需求日益凸显。本文旨在介绍 JavaScript 中数组过滤的基础知识及其在实际项目中的应用技巧。技术概述定义数组过滤是 JavaScript 提供的一种...

JavaScript数组操作:掌握常用方法,提升开发效率

JavaScript数组操作:从增删改查到高级应用本文深入解析JavaScript中常用的数组方法,包括push、unshift、pop、shift、map、filter、reverse、at 和 slice。通过详细的例子和应用场景,帮助开发者快速掌握这些方法,提升代码效率和可读性。开篇点题作为J...