欧美精品在线一区,国产不卡一区0,日韩欧美1区

DevExpress WinForms HTML & CSS模板——輕松創建警報通知

翻譯|使用教程|編輯：龔雪|2022-05-10 10:14:08.040|閱讀 400 次

概述：本文主要為大家介紹如何使用DevExpress WinForms HTML & CSS模板創建警報通知，歡迎下載最新版產品體驗！

相關鏈接：

在最新的DevExpress WinForm版本中，開發者可以使用WinForm產品線（通過DevExpress AlertControl和ToastNotificationManager）創建兩種類型的通知/警報，最近技術團隊還推薦使用DevExpress 來顯示原生 Windows 10+ 通知。

獲取工具下載 - DevExpress v21.2

DevExpress WinForms HTML & CSS模板——輕松創建警報通知

盡管自定義選項有些有限（toast 僅提供九個布局模板），但ToastNotificationManager 代表了比傳統的基于面板的更好、更現代的替代方案。

在最新版中為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" 枚舉值而變化。