windowsforms-403775-controls-and-libraries-messages-notifications-and-dialogs-alert-windows-alert-windows-with-html-templates.md
Web-inspired HTML and CSS templates allow you to design alerts with any custom appearance and layout.
Before you start:
Click the ellipsis button next to the AlertControl.HtmlTemplate property to invoke the template editor.
If you need multiple templates, populate the AlertControl.HtmlTemplates collection. You can use this collection to switch active templates before showing a notification.
alertControl1.HtmlTemplate.Assign(alertControl1.HtmlTemplates[1]);
alertControl1.HtmlTemplate.Assign(alertControl1.HtmlTemplates(1))
The tag allows you to add icons to templates. Populate an [SvgImageCollection](/WindowsForms/DevExpress.Utils.SvgImageCollection) with vector images and assign it to the [AlertControl.HtmlImages](/WindowsForms/DevExpress.XtraBars.Alerter.AlertControl.HtmlImages) property. When an image collection is assigned to the Alert Control, you can press Ctrl+Space in the Template Syntax Editor to browse a list of icons stored inside this collection, and assign a required image to the `src` property of the tag.
To show notifications with static templates, use the AlertControl.Show(Form) method that only takes a parent object (form) as a parameter.
alertControl1.Show(this);
alertControl1.Show(Me)
Along with templates with static caption and text strings, you can create HTML elements with placeholders for values.
<div class="text">${Caption}</div>
<div class="text">${Text}</div>
Use AlertControl.Show method overloads with “Caption” and “Text” parameters to pass real values to these HTML elements. As a result, you can use the same template design for various notifications.
alertControl1.Show(this, "Sample caption", "Sample notification text");
alertControl1.Show(Me, "Sample caption", "Sample notification text")
You can also use an overload with AlertInfo parameters. This overload allows you to pass both string and image data to HTML elements.
<div class="text">${Caption}</div>
<div class="text">${Text}</div>
AlertInfo aInfo = new AlertInfo("Sample notification", "This text is stored in the AlertInfo object");
aInfo.ImageOptions.SvgImage = svgImageCollection1[0];
alertControl1.Show(this, aInfo);
Dim aInfo As New AlertInfo("Sample notification", "This text is stored in the AlertInfo object")
aInfo.ImageOptions.SvgImage = svgImageCollection1(0)
alertControl1.Show(Me, aInfo)
If you require a complex template with multiple data-bound elements, create a custom data storage. To pass data from this object to HTML elements, use the corresponding Show method overload or handle the AlertControl.BeforeFormShow event.
<div class="title-main">${Title}</div>
<div class="title-sub">${Subtitle}</div>
<div class="text">${PrimaryText}</div>
<div class="text">${SecondaryText}</div>
alertControl1.Show(new AlertData("Sample Title", "Sample Subtitle", "Primary Text Block", "Secondary Text Block"), this);
// or
alertControl1.Show(this);
private void AlertControl1_BeforeFormShow(object sender, AlertFormEventArgs e) {
e.HtmlPopup.DataContext = new AlertData("Sample Title", "Sample Subtitle",
"Primary Text Block", "Secondary Text Block");
}
// Custom class whose instances are used as DataContext
public class AlertData {
public AlertData(string title, string subtitle, string primaryText, string secondaryText) {
Title = title;
Subtitle = subtitle;
PrimaryText = primaryText;
SecondaryText = secondaryText;
}
public string Title { get; set; }
public string Subtitle { get; set; }
public string PrimaryText { get; set; }
public string SecondaryText { get; set; }
}
alertControl1.Show(New AlertData("Sample Title", "Sample Subtitle", "Primary Text Block", "Secondary Text Block"), Me)
' or
alertControl1.Show(Me)
private void AlertControl1_BeforeFormShow(Object sender, AlertFormEventArgs e)
e.HtmlPopup.DataContext = New AlertData("Sample Title", "Sample Subtitle", "Primary Text Block", "Secondary Text Block")
' Custom class whose instances are used as DataContext
public class AlertData
public AlertData(String title, String subtitle, String primaryText, String secondaryText)
Title = title
Subtitle = subtitle
PrimaryText = primaryText
SecondaryText = secondaryText
public String Title {get;set;}
public String Subtitle {get;set;}
public String PrimaryText {get;set;}
public String SecondaryText {get;set;}
All AlertControl settings that specify the location and behavior of regular alert windows can also be used for templated alerts:
To close and pin templated alerts, you can create buttons with unique IDs and handle the AlertControl.HtmlElementMouseClick event.
<div id="pinButton" class="button">Pin</div>
<div id="closeButton" class="button">Close</div>
private void OnHtmlElementMouseClick(object sender, AlertHtmlElementMouseEventArgs e) {
if (e.ElementId == "pinButton")
e.HtmlPopup.Pinned = !e.HtmlPopup.Pinned;
if (e.ElementId == "closeButton")
e.HtmlPopup.Close();
}
Private Sub OnHtmlElementMouseClick(ByVal sender As Object, ByVal e As AlertHtmlElementMouseEventArgs)
If e.ElementId = "pinButton" Then
e.HtmlPopup.Pinned = Not e.HtmlPopup.Pinned
End If
If e.ElementId = "closeButton" Then
e.HtmlPopup.Close()
End If
End Sub
The RaiseHtmlElementClick method allows you to trigger actions associated with required HTML elements manually (use unique element IDs to identify HTML elements).
alertControl1.RaiseHtmlElementClick("closeButton", e.HtmlPopup);
alertControl1.RaiseHtmlElementClick("closeButton", e.HtmlPopup)
See Also