WinForms HTML & CSS Templates — New Controls and Features

A few days ago, we announced support for HTML & CSS templates in our Alert Control. As last week’s post outlined, HTML & CSS templates allow you to create custom/modern notifications with ease. In this post, I'll share a few more template-related updates you can expect from our v22.1 release.

ListBox Control

In previous releases, we introduced standard templates for the WinForms ListBox Control— a designer similar to one available in the Tile View allows you to easily arrange elements across a ListBox item surface. HTML & CSS templates available in v22.1 will take this customization flexibility to a whole new level.

This image was taken from our updated HTML Demo Center module. We're using the following HTML markup to create this sample UI.

<div class="contact">
    <div class="contact-avatar">
        <img class="photo" src="${Photo}" />
        <div class="status" id="status"></div>
    </div>
	<div>
        <div class="contact-body">
            <div class="contact-info">
                <div class="name-info">
                    <div class="name">${FirstName} {LastName}</div>
                    <img class='info' src='Contact' id="info" />
                </div>
                <div class="phone">${HomePhone}</div>
            </div>
        </div>
        <div class='selection'></div>
	</div>
</div>

ComboBox Edit

The ComboBox Edit is yet another logical candidate for web-inspired templates. Similar to ListBox Edit templates, you can utilize ${FieldName} syntax to add data placeholders. At runtime, these placeholders are replaced with actual values from a Data Source. As you can see below, this makes our HTML & CSS templates a perfect tool for building data-aware control layouts.

The template for this sample ComboBox Edit UI is as follows:

<div class="contact">
    <div class="contact-avatar">
        <img class="photo" src="${Photo}" />
    </div>
	<div>
        <div class="contact-body">
            <div>
                <div class="name">${FirstName} {LastName}</div>
                <div class="label">${Department}</div>
            </div>
        </div>
        <div class='selection'></div>
	</div>
</div>

Item AutoHeight for TileView Templates

HTML & CSS template support for our TileView was introduced in the v21.2 release cycle. With our upcoming release, you’ll be able to adjust tiles based on content size.

To enable this feature, simply set the OptionsHtmlTemplate.ItemAutoHeight property to true.

At the markup level, you do not need to do anything unusual. The image above is created using the following HTML code.

<div class="container">
	<div class="card">
		<div class="stripe" id="stripe"></div>
		<div class="content">
			<div class="top-block">
				<div class="caption"><b>${Name}</b></div>
			</div>
			<div class="description">${Description}</div>
			<div class="bottom-block">
				<div class="bottom-block-near">
					<div><span style="color:@DisabledText">Due Date: </span>${DueDate}</div>
					<div><span style="color:@DisabledText">Employee: </span>${Employee}</div>
				</div>
				<div class="status">${Status}%</div>
			</div>
		</div>
	</div>
</div>

Your Opinion Matters

Tell us what you think about these newest additions. Have you already designed layouts with our web-inspired templates?