WinForms — HTML & CSS Templates: Core Enhancements (v22.2)

In this post, I'll detail upcoming changes to our HTML & CSS Template-engine – new capabilities we expect to implement in our v22.2 release cycle.

If you’re considering our HTML & CSS Template engine for an upcoming project, be sure to review the following post – it lists the components that will support this engine in our next major update: WinForms v22.2 — HTML & CSS Templates: New Controls.

CSS Style Selector

With v22.2, you will be able to specify multiple styles for the same element, and choose the active style based on the value of a given property. For example, the following markup is copied from the "HTML Demo | WinExplorer View module. In this markup, the outer <div> element serves as a container for multiple data-bound elements, and is styled with the static item_info-outer style.

<div class="item_info_outer">
    <div class="name">${TrademarkName} {Name}</div>
    <!--Other data-bound elements-->
</div>

.item_info_outer { background-color: @HighlightAlternate/0.2; ... }

In v22.2, you will be able to use the dx-class attribute to specify the CSS selection condition. In the sample below, the outer container selects a CSS class based on the Modification field value. As a result, this entire item block will be rendered differently for "SUV", "Truck", "Car", and other values.

<div dx-class="{Modification}">
    <div class="name">${TrademarkName} {Name}</div>
    <!--Other data-bound elements-->
</div>

.SUV { background-color: @Red/0.2; ... }
.Car { background-color: @Blue/0.2; ... }
.Truck { background-color: @Green/0.2; ... }

For this example, you will require CSS classes with names that match the values of the "Modification" enum. If a selector property is a different type, the dx-class attribute syntax may differ. For example, the code below illustrates how to select a style based on a Boolean property value.

<div dx-class="{InStock: item-instock, item-outofstock}">${InStock}</div>

.item-instock { color: @ControlText; }
.item-outofstock { color: @DisabledText; }

You will be able to use both class and dx-class attributes together. The standard class specifies the default item style, and if a dx-class condition is met, a conditional style is applied above.

Reusable Custom Elements

In v22.2, you will be able to create custom HTML tags that encapsulate specific functionality, and include these tags in templates as child elements Please refer to the following article for more information on WebComponents: Web Components.

This mechanism will also allow DevExpress to ship custom tags. Specifically, tags that can be used to visualize data collections. For example, a collection of employees assigned to a Grid card.

<div class="card">
    <div class="title">{Title}</div>
    <!--other child elements-->
    <avatars-box
        Items="${Owners}" 
        ImageMember="Avatar"
        Initials="FullName">
    </avatars-box>
</div>

Since there is no out-of-the-box HTML element to render such child collections, you’ll need to handle the control's CustomizeHtmlTemplate event and patch the template on-the-fly — adding or removing <div> elements based on the number of collection items. This approach is far from a native web-inspired design, and will be addressed once you have WebComponents at your disposal.

Element Alignment

We expect to support the position and top/bottom/left/right attributes. You can use a combination of these attributes to align elements inside their parent elements, and set offsets from required borders.

position: absolute;
bottom: 0;
right: 0;

Text Selection

Our next major update will ship with a highly reqested template-related feature: the ability to select and copy text from HTML templates.

Your Feedback Matters

Web-inspired template support is a key addition to our WinForms product line, but not the only feature we expect to release by the end of this development cycle. Our next blog post will cover these other features. Please use the text field below to share your opinion on templates with us.