WinForms HTML & CSS Templates — Alert Control

As you may already know, you can create two types of notifications/alerts with our WinForms product line (via the DevExpress AlertControl and ToastNotificationManager). Until recently, we recommended use of the DevExpress ToastNotificationManager to display native Windows 10+ notifications.

Despite somewhat limited customization options (toasts only offer nine layout templates), we felt that the ToastNotificationManager represented a better and more modern alternative to our traditional panel-based AlertControl.

This recommendation may change once we release HTML & CSS templates for our AlertControl. These web-inspired templates should allow you to create stylish notifications while leveraging the simplicity of the AlertControl itself. The figure below illustrates some of the sample templates available in our Demo Center (find and copy templates you like to your own projects)

Most notifications are simply a rectangle with a couple of text blocks, images, and buttons. Designing such simple objects should be relatively easy for everyone – whether you have experience with HTML & CSS or are beginning to leverage its potential inside your WinForms app. For example, the following template (included in the Demo Center) creates a notification with an icon, title, description, and "OK" button.

<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>

Note that in this sample markup, notification title and description are static strings. This solution works just fine if you have a single message to display for your users.

Of course, our data binding feature offers more flexibility — you can create a single template and pass different data objects to it. As such, you may reuse a single template for multiple notification messages.

If you prefer this option, use the ${Data_property_name} placeholder as follows:

<div class="text">${Caption}</div>
<div class="text">${Text}</div>

"Caption" and "Text" are standard placeholders that can be replaced directly via AlertControl.Show overloads:

alertControl1.Show(this, "Sample caption", "Sample notification text");

You can add as many placeholders as your template design requires, but remember to handle the AlertControl.BeforeFormShow event and pass a data object to the e.HtmlPopup.DataContext property. For example, the code below uses a div element to display a string combined from five placeholders: two for string values (FullName, Ticker), two for numbers (Percentage, Price), and one for custom Direction enum values.

<div class="message-text">
    ${FullName} ({Ticker}) {Direction} {Percentage}%. The current price is ${Price}.
</div>

The notification image is also retrieved at runtime, the img tag uses a placeholder instead of a static src property value.

<img src="${StockImage}" class="message-image" />

This sample app utilizes StockInfo class objects as data items.

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
}

Notifications are triggered when a data item's "Price" value changes significantly over a short period of time. The corresponding item is assigned to the e.HtmlPopup.DataContext property in the AlertControl.BeforeFormShow event handler.

void AlertControl1_BeforeFormShow(object sender, AlertFormEventArgs e) {
    // TODO: Retrieve a data item
    e.HtmlPopup.DataContext = myStockInfoInstance;
}

As a result, a notification retrieves data for its ${Field_Name} placeholders from a data item assigned as a DataContext. Note that the color of the side strip changes based on the "Direction" enumeration value.

Tell Us What You Think

It's been some time since our initial release of HTML & CSS template support for our WinForms Data Grid and WinForms Scheduler (as well as our stand-alone HtmlContentControl and HtmlContentPopup components). If you've already tried our HTML & CSS template engine, please tell us your thoughts and share suggestions so we can adjust our product roadmap accordingly.