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