AlertControl-使用教程

一、将 AlertControl 添加到 Form

在使用 AlertControl 之前，需要先将其添加到 Form 中。具体操作步骤如下：

• 1. 从工具箱添加组件：在工具箱里找到 AlertControl 并双击，它就会被添加到 Form 中。
     
• 2. 修改组件名称：为了便于后续引用和管理，将添加的 AlertControl 名称修改为 acAlert。
     

二、编辑 AlertControl 的 HtmlTemplate

在完成 AlertControl 的添加和命名后，需要对其 HtmlTemplate 进行编辑，这就会用到 HTML Template Editor。

HTML Template Editor介绍

• 1. 打开编辑器：点击 HtmlTemplate 右侧的按钮，即可打开 HTML Template Editor。
     
• 2. 编辑器界面：HTML Template Editor 拥有直观的操作界面。
     
• 3. 工具栏功能：该编辑器的工具栏提供了丰富的功能。

  • 撤销与重做操作：Undo（撤销）和 Redo（重做）功能方便你纠正误操作或恢复之前的修改。
    

  • 插入代码片段：Insert Snippet 功能允许你快速插入常用的代码片段，提高编辑效率。
    

  • 从模板库插入：Insert from Gallery 功能让你可以从模板库中选择合适的模板插入到编辑器中。
    

  • 保存到模板库：Save to Gallery 功能可以将你编辑好的模板保存到模板库，方便后续复用。
    

编辑HTML Template

如果你熟悉 HTML 和 CSS，可直接在 HTML Template Editor 中进行编辑。这里推荐使用 Insert from Gallery 功能来创建 HTML Template。

• 1. 插入模板：从模板库中选择合适的模板插入到编辑器中。
     
• 2. 修改并保存：对插入的模板进行 HTML 和 CSS 的修改，完成后点击保存按钮。
     

三、使用AlertControl

完成上述步骤后，就创建好了一个完整的 Alert，在需要的时候弹出即可。

弹出Alert

以下是设置 Alert 显示效果并弹出的代码示例：

// 设置显示速度
this.acAlert.FormDisplaySpeed = AlertFormDisplaySpeed.Fast;
// Alert停留时间(ms)
this.acAlert.AutoFormDelay = 2000;
// Alert显示位置
this.acAlert.FormLocation = AlertFormLocation.BottomRight;
// 弹出Alert
this.acAlert.Show(
    owner: this,
    caption: "这是一个警告",
    text: "别惹我，我是危险的人"
);

Alert中的按钮事件

若在 Alert HTML Template 中添加了按钮，可以为这些按钮添加响应事件。

• 添加事件：使用以下代码添加 HtmlElementMouseClick 事件。

this.acAlert.HtmlElementMouseClick += new AlertHtmlElementMouseClickEventHandler(this.OnAlertHtmlElementMouseClick);

• 事件处理函数：编写事件处理函数，根据按钮的不同 ID 执行相应的逻辑。

private void OnAlertHtmlElementMouseClick(object sender, AlertHtmlElementMouseEventArgs e)
{
    switch (e.ElementId)
    {
        case "yes":
            // TODO: 添加逻辑
            // ...
            break;
        case "unshown":
            // TODO: 添加逻辑
            // ...
            break;
        case "cancel":
            // TODO: 添加逻辑
            // ...
            e.HtmlPopup.Close();
            break;
        default:
            break;
    }
}

获取 Alert 标题等信息

可以在 HtmlElementMouseClick 事件中获取 Alert 的标题等信息，示例代码如下：

var caption = e.HtmlPopup.AlertInfo.Caption;

向Alert传递参数

AlertControl 参数默认使用 AlertInfo 类，AlertControl.Show 有多个重载方法，调用时会创建 AlertInfo 实例，或者直接传入 AlertInfo 作为参数。在 Html Template 中绑定参数时，要与 AlertInfo 属性名相同，否则无法显示。以下是 HTML 和 C# 代码示例：

<div class="frame" id="frame">
	<div class="content">
	    <div class="text caption">${Caption}</div>
		<div id="content">
		   	<div class="text message">${Text}</div>
		</div>
	</div>
	<div class="buttons">
		<div class="button" tabindex="1" id="yes">确定</div>
    	<div class="button" tabindex="2" id="unshown">不在提示</div>
    	<div class="button" tabindex="3" id="cancel">取消</div>
    </div>
</div>

this.acAlert.Show(
    owner: this,
    caption: "这是一个警告",
    text: "别惹我，我是危险的人"
);
var info = new AlertInfo(caption: "这是一个警告", text: "别惹我，我是危险的人");
this.acAlert.Show(owner: this, info);

总结

本教程详细介绍了如何在 Form 中使用 AlertControl 组件。首先，将 AlertControl 添加到 Form 并修改其名称。接着，通过 HTML Template Editor 编辑 Alert 的 HtmlTemplate，可利用其丰富的工具栏功能提高编辑效率。最后，介绍了如何弹出 Alert、处理 Alert 中的按钮事件、获取 Alert 信息以及向 Alert 传递参数。按照这些步骤操作，你可以灵活运用 AlertControl 组件，在需要的时刻弹出自定义的 Alert 提示框。若想向 AlertControl 传递自定义参数，可参考官网示例进一步探索。

源码

https://gitcode.com/huyu107/DevExpress.WinForms