界面控件DevExpress WinForms HTML &amp; 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风格的界面，还是分析处理大批量的业务数据，它都能轻松胜任！

ataGear数据可视化分析平台提供了导入静态HTML模板的功能，使您可以利用已有的任意HTML网页资源制作数据可视化看板。

首先，您需要准备一套已设置好布局的静态HTML模板，其中包含的HTML网页及相关资源，例如：

index.html
css/
  |---style.css
  |---images
       |---bg.png
       |---bg_head.png
js/
  |---index.js
  |---common.js

它的静态效果如下图所示：

然后，将这套静态HTML模板压缩到一个ZIP文件中，使用DataGear看板的[导入]功能，将这个ZIP文件导入为看板。

导入成功后，打开看板编辑界面，为HTML模板中的div元素添加dg-chart-widget属性绑定图表组件，例如：

...
<div class="panel-content"
    dg-chart-widget="图表组件ID"></div>
...

其中，图表组件ID 是图表管理列表中的一个图表条目ID。

设置完所有的div元素后，一个数据可视化看板就制作完成了，点击[保存并展示]按钮，即可查看展示效果。

等等，默认的展示效果差强人意……，没关系，自定义展示效果也很简单！

首先，自定义图表主题，打开看板编辑界面，为<body>标签添加dg-chart-theme自定义图表主题，如下代码：

...
<body dg-chart-theme="{color:'#F0F0F0',
    backgroundColor:'transparent',
    actualBackgroundColor:'#050d3c'}">
...
</body>
...

然后，自定义图表设置项，为<body>标签添加dg-chart-options属性，定义全局图表设置项：

<body ... dg-chart-options="{title:{show:false},
    legend:{top:0},grid:{top:25}}">
<!--隐藏标题、图例顶部展示、坐标系距顶部25像素，具体参考echarts设置项-->

大功告成！

官网地址：http://www.datagear.tech

源码地址：

https://gitee.com/datagear/datagear

https://github.com/datageartech/datagear

们可以使用以下的方式去渲染html

func main() {
	router := gin.Default()
	router.LoadHTMLGlob("templates/*")
	//router.LoadHTMLFiles("templates/template1.html", "templates/template2.html")
	router.GET("/index", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.tmpl", gin.H{
			"title": "Main website",
		})
	})
	router.Run(":8080")
}

在html中我们可以使用特殊的双花括号来渲染title这个值

<html>
	<h1>
		{{ .title }}
	</h1>
</html>

值得注意的是这种方式并不是gin特有的，而是golang特有的，它还有其他的模板语法。

模板语法：

定义变量：

{{$article := "hello"}}

也可以给变量赋值

{{$article := .ArticleContent}}

函数的调用：

{{funcname .arg1 .arg2}}

判断语法：

{{if .condition}}
{{end}}

{{if .condition1}}
{{else if .contition2}}
{{end}}

not 非

{{if not .condition}}
{{end}}

and 与

{{if and .condition1 .condition2}}
{{end}}

or 或

{{if or .condition1 .condition2}}
{{end}}

eq 等于

{{if eq .var1 .var2}}
{{end}}

ne 不等于

{{if ne .var1 .var2}}
{{end}}

lt 小于

(less than){{if lt .var1 .var2}}
{{end}}

le 小于等于

{{if le .var1 .var2}}
{{end}}

gt 大于

{{if gt .var1 .var2}}
{{end}}

ge 大于等于

{{if ge .var1 .var2}}
{{end}}

循环：

{{range $i, $v := .slice}}
{{end}}

引入一个模板：

{{template "navbar"}}

在线咨询

上一篇：第 09 篇：让博客支持 Markdown 语法和代码高亮
下一篇：HTML <html> 标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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