All docs
V21.2
21.2
21.1
The page you are viewing does not exist in version 21.1. This link will take you to the root page.
20.2
The page you are viewing does not exist in version 20.2. This link will take you to the root page.
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

HTML and CSS-based Desktop UI

  • 10 minutes to read

Note

HTML and CSS-based controls are under active development and are available as a Community Technology Preview (CTP). We appreciate your feedback on how you build desktop UIs with HTML and CSS.

A set of controls and components allow you to build a UI in HTML format, and customize the appearance settings, size, padding, and layout options of UI elements using CSS styles. You no longer need to handle custom draw events or change numerous properties to modify a control to match the UI specification. Use your knowledge of HTML and CSS markup to build layouts for desktop applications.

Html desktop UI

Key features include:

  • Specify data binding expressions in HTML markup to display values from underlying data sources.
  • Create responsive UIs with CSS — add effects when a user’s mouse pointer hovers over or clicks a particular element.
  • Add external controls (for instance, text boxes) to the UI.
  • Handle control events to respond to UI element mouse actions.
  • Enable DirectX hardware acceleration for better performance.

Note

The HTML/CSS-aware controls/components support a limited set of HTML tags and CSS styles, listed in the following topics:

Demos

HtmlContentControl

HtmlContentControl is a surface where you can build a UI from HTML-CSS markup.

HtmlContentControl

HtmlContentPopup

HtmlContentPopup is a popup version of the HtmlContentControl. This component generates a UI from HTML-CSS code and displays it as a flyout or modal window.

HtmlContentPopup

GridControl’s ItemsView

The new ItemsView does not have default data representation. It renders its items (data records) solely from the HTML-CSS template that you specify with a property, or dynamically with an event.

ItemsView- Html template

GridControl’s TileView

TileView generates its items (tiles) from a template. You can choose between regular templates and HTML-CSS-based templates.

TileView - Html template

See Create Tile Template.

GridControl’s WinExplorerView

WinExplorerView supports HTML-CSS templates to build a layout of cards. You can specify HTML-CSS templates for each display style (ExtraLarge, Large, Medium, List, Tiles, and so on), or dynamically with an event.

WinExplorerView - HTML-CSS templates

GanttControl

GanttControl allows you to use HTML-CSS markup to render many elements:

  • Tasks, Summaries, and Milestones
  • Regular and Summary Task Progress
  • Regular, Summary, and Milestone Task Baselines
  • Text Labels
  • Interaction Tooltips
  • Split Tasks

HTML templates in Gantt Control

See the following topic for more information: HTML Templates in Gantt Control.

Scheduler Control

You can use HTML-CSS-based templates in the SchedulerControl to render appointments.

Scheduler Control - HTML UI

HTML-CSS Markup

HTML and CSS-aware controls and components render their UIs from templates. The HTML markup of a control’s template specifies the control’s contents (UI elements), while the template’s CSS code specifies style, display, and layout settings applied to the UI elements.

Use the control’s HtmlTemplate property to specify the template. At design time, you can create a template in the HTML Template Editor.

HtmlContentControl - Html Template Editor

This editor supports syntax highlighting, IntelliSense (a code completion aid), and the preview pane. The preview pane allows you to inspect visual elements—locate HTML tags when you hover over the elements.

Example

The following example demonstrates an HtmlContentControl that renders a UI from the assigned HTML-CSS template. The control is bound to a list of Employee objects. The template’s HTML code contains data binding expressions to display values from the data source.

HtmlContentControl

public class Employee {
    public string DisplayName { get; set; }
    public string FullName { get; set; }
    public SvgImage Photo { get; set; }
}
//...
Employee emp = new Employee();
emp.DisplayName = "Leah Test Coordinator";
emp.FullName = "Leah Simpson";
SvgImageCollection imageCollection = new SvgImageCollection();
imageCollection.Add("photo", "image://svgimages/icon builder/business_businesswoman.svg");
emp.Photo = imageCollection["photo"];
List<Employee> list = new List<Employee>();
list.Add(emp);
htmlContentControl1.DataContext = list;
//...
void OnButtonClick(object sender, DxHtmlElementMouseEventArgs args) {
    if(args.ElementId == "uploadBtn") {
        //...
    }
    if (args.ElementId == "removeBtn") {
        //...
    }
    XtraMessageBox.Show("Button " + args.ElementId + " clicked");
}

Specify HTML-CSS Templates Dynamically

A number of controls use HTML-CSS templates to render their items. For instance, the ItemsView generates all its items (records) from the default template specified by the ItemsView.HtmlTemplate property.

These controls have events to dynamically assign templates to its items and thus override the default template:

Example

The following ItemsView.QueryItemTemplate event handler assigns different templates to different items based on an item’s type (IsOwnMessage setting).

You can find the complete code of this sample in the following demo: Chat Client.

void OnQueryItemTemplate(object sender, QueryItemTemplateEventArgs e) {
    var message = e.Row as DevAV.Chat.Model.Message;
    if(message == null)
        return;
    if(message.IsOwnMessage)
        Styles.MyMessage.Apply(e.Template);
    else
        Styles.Message.Apply(e.Template);
    //...
}

Customize Items Dynamically

Controls that generate its items from templates also have events to dynamically customize each item:

These events fire for each item in the control before the item is displayed onscreen. They allow you to access individual HTML elements that are about to be rendered, and customize their visibility and style settings.

Example

The following example changes visibility of HTML elements according to custom logic.

You can find the complete code of this sample in the following demo: Chat Client.

//CustomizeItem event handler:
void OnCustomizeItem(object sender, CustomizeItemArgs e) {
    //...
    if(message.IsLiked) {
        var btnLike = e.ElementInfo.FindElementById("btnLike");
        var btnMore = e.ElementInfo.FindElementById("btnMore");
        if(btnLike != null && btnMore != null) {
            btnLike.Hidden = false;
            btnMore.Hidden = true;
        }
    }
    if(message.IsFirstMessageOfBlock)
        return;
    if(!message.IsOwnMessage) {
        var avatar = e.ElementInfo.FindElementById("avatar");
        if(avatar != null)
            //Display an empty region instead of the 'avatar' element.
            avatar.Style.SetVisibility(Utils.Html.Internal.CssVisibility.Hidden);
    }
//...
}

Data Binding

If a control is bound to a data source, you can use the following syntax in HTML markup to display values of data source fields:

${FieldName}

The ‘$’ character specifies that the text that follows is an interpolated string—an expression that the control needs to evaluate. An interpolated string can contain static text, and data binding to multiple fields:

  • $text{FieldName}text
  • ${FieldName1}text{FieldName2}text

For example, the following HTML code displays a value of the “UserName” field from the control’s data source:

<div class='contactName'>${UserName}</div>

The following example adds the ‘Welcome’ string before a user name:

<h1>$Welcome {UserName}!</h1>

External Controls/Input Boxes

Note

This feature is only supported for the HtmlContentControl.

HTML Input Box

Follow the steps below to add an input box or any external control to the HTML-based UI generated by an HtmlContentControl:

  • Define an <input> tag in HTML markup.
  • Drop any text editor/external control onto the HtmlContentControl. Set the editor’s name.
  • Set the name property of the <input> tag to the editor’s name.
<input name="textEditEmail" class="field-input"/>

The HtmlContentControl will render the external control in place of the input element.

Run Demo: Chat Client

Buttons

Html Buttons

Follow the steps below to render a button:

  • Define an HTML element that renders a button. Specify the element’s class (for instance, set the class name to “button”).
  • In CSS code, define the “button” class to specify the element’s display properties.
  • Also define the hover state for the button class to highlight the element when it’s hovered over.

The following sample uses the <div> tag to define a button:

<div id="uploadBtn" class="centered button">Upload</div>
<div id="removeBtn" class="centered button">Remove</div>

UI Element Mouse Actions

You can respond to mouse actions on HTML UI elements at the control level, HTML markup level, and when using Fluent API.

Control’s Mouse Events

HTML-aware controls expose events that you can handle to respond to mouse actions on HTML UI elements. These events are typically called:

  • ElementMouseClick
  • ElementMouseDown
  • ElementMouseMove
  • ElementMouseOut
  • ElementMouseOver
  • ElementMouseUp
void htmlContentControl1_ElementMouseClick(object sender, DevExpress.Utils.Html.DxHtmlElementMouseEventArgs e) {
    if(e.ElementId == "btnSend") {
        //...
    }
}

HTML Mouse Events

The following mouse events are supported in HTML markup: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, and onmouseout. You can subscribe to these events as follows:

  • Define a method in code-behind with the following signature:
void <MethodName>(object sender, DxHtmlElementMouseEventArgs args)
  • In the HTML code, set an element’s event to the name of the defined method.
<img onclick="<MethodName>" ... />

Example:

<div class='buttonPanel'>
    <img onclick="OnPhoneClick" src="PhoneCall" class="button" />
</div>

Fluent API

You can use Fluent API to subscribe to an element’s mouse click event.

var fluent = context.OfType<ViewModel>();
fluent.BindCommandToElement(htmlContentControl, "btnPhone", x => x.Phone);
//...
public class ViewModel {
    public void Phone() {
        //...
    }
    //...
}

See the following demo: Html Main Demo - Interaction

Images

HtmlContentControl image

Use the <img> HTML tag to display an image. Assign the image source to the tag’s src attribute. The image source can be one of the following values:

  • The name or index of a target image in the control’s HtmlImages collection (for instance, HtmlContentControl.HtmlImages).
  • A binding expression (“${FieldName}”) that defines a field in the control’s data source that stores image data.
svgImageCollection1.Add("employee", "image://svgimages/icon builder/business_businesswoman.svg");
htmlContentControl1.HtmlImages = svgImageCollection1;
See Also