整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

最新的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风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!

PNotify是一个原生JavaScript通知和确认/提示库。PNotify可以根据Web Notifications规范提供桌面通知,并返回浏览器内通知。PNotify是目前笔者正在项目中使用的一个通知提示组件,功能非常丰富,可以让你的Web项目通知和提示更加的优雅!



Github

https://github.com/sciactive/pnotify

快速开始

npm install --save pnotify
# Material style:
npm install --save material-design-icons
# Animate module:
npm install --save animate.css
# NonBlock module:
npm install --save nonblockjs

PNotify模块目录如下:

  • src Svelte组件和未压缩的Bright Theme CSS;
  • lib/es 未压缩的ECMAScript模块;
  • lib/umd 未压缩的UMD模块;
  • lib/iife 未压缩的 IIFE scripts;
  • dist 压缩过的 Bright Theme CSS;
  • dist/es 压缩过的ECMAScript 模块;
  • dist/umd 压缩过的 UMD 模块;
  • dist/iife 压缩过的 IIFE scripts;

丰富的特性

  • 丰富的UI和效果:
  • Material,Bootstrap 3/4,Font Awesome 4/5,或stand-alone theme, Bright Theme
  • 移动样式和滑动支持。
  • 定时隐藏。
  • 使用Animate.css进行光滑的动画。
  • 注意使用Animate.css的getter。
  • 高度可定制的UI。
  • 粘滞的通知。
  • 可选的关闭和按钮。
  • 非阻塞性通知,以减少侵入性使用。
  • 通知类型:通知,信息,成功和错误。
  • 堆栈允许通知一起或独立定位。
  • 控制堆栈方向并推到顶部或底部。
  • 模态通知。
  • 确认对话框,警报按钮和提示。
  • RTL语言支持。
  • 功能丰富的API。
  • 基于Web Notifications标准的桌面通知。
  • 动态更新现有通知。
  • 将表单和其他HTML放在通知中。
  • 默认情况下,转义文本以防止XSS攻击。
  • 生命周期事件的回调。
  • 请注意重新显示旧通知的历史记录。
  • 普遍兼容。
  • 适用于任何前端库(React,Angular,Svelte,Vue,Ember等)。
  • 适用于打包工具(Webpack,Rollup等)。
  • 大多数功能都没有依赖关系。

效果预览

要想看真实效果的朋友可以直接看官方提供的demo,非常的丰富示例,绝对让你有使用它的冲动,咱们通过截图来看一下:








具体的效果只有使用了之后才会体会到,绝对值得使用!

如何使用?


  • 在React中使用
import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';
PNotify.alert('Notice me, senpai!');

  • Angular
import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';
//...
export class WhateverComponent {
 constructor() {
 PNotifyButtons; // Initiate the module. Important!
 PNotify.alert('Notice me, senpai!');
 }
}

  • 原生ES5
<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotify.js"></script>
<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
<script type="text/javascript">
 PNotify.alert('Notice me, senpai!');
</script>

  • 原生ES6
import PNotify from 'node_modules/pnotify/dist/es/PNotify.js';
import PNotifyButtons from 'node_modules/pnotify/dist/es/PNotifyButtons.js';
PNotify.alert('Notice me, senpai!');

  • 默认主题
<link href="node_modules/pnotify/dist/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" />

  • Material

Material 样式模块:

import PNotifyStyleMaterial from 'pnotify/dist/es/PNotifyStyleMaterial.js';
// or
var PNotifyStyleMaterial = require('pnotify/dist/umd/PNotifyStyleMaterial.js');
// Set default styling.
PNotify.defaults.styling = 'material';
// This icon setting requires the Material Icons font. (See below.)
PNotify.defaults.icons = 'material';

  • Material Icons
# The official Google package:
npm install --save material-design-icons
# OR, An unofficial package that only includes the font:
npm install --save material-design-icon-fonts

  • Bootstrap作为默认样式

要将Bootstrap设置为默认样式,请在导入PNotify后从下面包含相应的设置:

PNotify.defaults.styling = 'bootstrap3'; // Bootstrap version 3
PNotify.defaults.icons = 'bootstrap3'; // glyphicons
// or
PNotify.defaults.styling = 'bootstrap4'; // Bootstrap version 4

  • Font Awesome

要将Font Awesome设置为默认图标,请在导入PNotify后从下面包含相应的设置:

PNotify.defaults.icons = 'fontawesome4'; // Font Awesome 4
// or
PNotify.defaults.icons = 'fontawesome5'; // Font Awesome 5

创建通知提示

// 手动设置类型
PNotify.alert({
 text: "I'm an alert.",
 type: 'notice'
});
// 自动设置类型。
PNotify.notice({
 text: "I'm a notice."
});
PNotify.info({
 text: "I'm an info message."
});
PNotify.success({
 text: "I'm a success message."
});
PNotify.error({
 text: "I'm an error message."
});

总结

以上只是简单的介绍,如果你想让你的浏览器推送通知不是很简陋,笔者认为是时候使用这样一个插件来助你解决这个问题了:



PNotify是笔者用过的最优雅的提示通知组件,推荐给需要的人!

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

DevExpress WinForm 控件已正式发布v23.1版本,此版本全新升级HTML & CSS的可重用模板、增强Ribbon组件功能、新增Office 365样式等,欢迎下载最新版体验!

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

支持HTML & CSS

可重用的HTML & CSS模板

DevExpress WinForms HTML & CSS模板库包括一组预先设计的模板,这些模板基于官方WinForms演示应用程序中使用的模板。您可以“按原样”使用这些模板,也可以根据需要进行定制。当然您也可以创建一个HTML & CSS模板,将模板保存到库中,并在需要时在任何项目中使用它。

将图像标签绑定到具有图像名称的数据字段

现在可以将图像标签绑定到具有图像名称的数据源字段中,HTML模板检查数据字段是否包含SVG或位图。如果没有,则模板在SvgImageCollection(分配给控件的htmlages属性)中查找具有指定名称的图像。

HTML

<img class="icon" src="${IconName}"/>

Ribbon

全新的Office 365样式

DevExpress WinForms Ribbon控件附带了一个全新的Office 365渲染样式。

当我们使用新的Office 365样式时,WinForm Ribbon控件在功能区表单的顶部显示一个搜索框,并在 Ribbon UI的右下方显示显示功能区选项。

使用以下API在其他 Ribbon样式中启用新的UI增强功能:

  • RibbonControl.OptionsExpandCollapseMenu - 获取"Show Ribbon"弹出菜单的可用性和操作设置。
  • RibbonControl.ExpandCollapseMenuShowing - 允许您自定义"Show Ribbon"菜单或阻止它们被显示(基于特定条件)。
  • RibbonControl.SearchItemPosition - 指定“搜索”框的位置。

后台视图 - 对齐项目的顶部和底部

Backstage View(后台视图)项目现在包括一个新的对齐选项,此选项允许您将项目对齐到后台视图的顶部和底部,以及标题栏和快速访问工具栏的左侧和右侧(当它显示在Ribbon控件下方时)。

C#

backstageViewItem.Alignment = BackstageViewItemAlignment.Bottom;

在Ribbon消息栏中显示提醒

新版本中实现了新的API来显示受Office启发的弹出式通知和警报。

新的API包括:

  • RibbonControl.ShowMessage - 在消息栏中显示消息。
  • RibbonControl.CloseMessage - 关闭指定的消息。
  • RibbonControl.MessageClosed - 在消息关闭后发生,并允许您处理按钮单击。
  • RibbonControl.Messages - 获取消息栏中显示的消息集合。

C#

using DevExpress.XtraBars.Ribbon;

void ShowMessage() {
RibbonMessageArgs args = new RibbonMessageArgs();
args.Caption = "What's New";
args.Text = "Explore new WinForms-related features we expect to introduce in our first major update this year (v23.1).";
args.Icon = MessageBoxIcon.Information;
args.Buttons = new DialogResult[] { DialogResult.OK };
args.Showing += Args_Showing;
Ribbon.ShowMessage(args);
Ribbon.MessageClosed += Ribbon_MessageClosed;
}
void Ribbon_MessageClosed(object sender, RibbonMessageClosedArgs e) {
if(e.Result == DialogResult.OK)
Data.Utils.SafeProcess.Start("https://community.devexpress.com/blogs/winforms/archive/2023/02/16/devexpress-winforms-roadmap-23-1.aspx");
}
void Args_Showing(object sender, RibbonMessageShowingArgs e) {
e.Buttons[DialogResult.OK].Caption = "Explore Roadmap";
}

Page header项目 - 在矢量皮肤中着色

Page header项(BarButtonItem和BarCheckitem)可以根据矢量皮肤中的背景颜色调整文本和SVG图标的颜色,背景色必须设置为皮肤颜色(在设计时,切换到“DX Skins”选项卡来选择皮肤颜色)。


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