HtmlContentControl Class

Renders a UI from HTML-CSS markup. Can show data from a bound data context (a business object or data source item).

Assembly : DevExpress.XtraEditors.v25.2.dll

NuGet Package : DevExpress.Win.Navigation

Declaration

C#
VB.NET

csharp

[DXLicenseWinForms]
public class HtmlContentControl :
    EditorContainer,
    IHtmlContentControl,
    IDxHtmlClient,
    ISupportLookAndFeel,
    IHtmlContentControlInternal,
    IDxHtmlControlHost,
    IHtmlContentControlScrollBarOwner,
    ISupportDxHtmlContent,
    ITouchScrollBarOwner,
    IDxHtmlDesignerDataProvider,
    IStyleExceptionProvider,
    IToolTipControlClient,
    IDxHtmlRepositoryOwner,
    ISupportDxHtmlSelection,
    ISupportCommandBindingForElements<string>

<DXLicenseWinForms>
Public Class HtmlContentControl
    Inherits EditorContainer
    Implements IHtmlContentControl,
               IDxHtmlClient,
               ISupportLookAndFeel,
               IHtmlContentControlInternal,
               IDxHtmlControlHost,
               IHtmlContentControlScrollBarOwner,
               ISupportDxHtmlContent,
               ITouchScrollBarOwner,
               IDxHtmlDesignerDataProvider,
               IStyleExceptionProvider,
               IToolTipControlClient,
               IDxHtmlRepositoryOwner,
               ISupportDxHtmlSelection,
               ISupportCommandBindingForElements(Of String)

Remarks

Note

We appreciate your feedback on how you build desktop UIs with HTML and CSS.

HtmlContentControl along with other controls can render a UI from HTML markup. These controls use CSS styles for customization of the appearance settings, size, padding, and layout options of generated UI elements.

YouTube video

The following image demonstrates an HtmlContentControl that renders a sample UI from HTML-CSS markup:

See the following demo to find the complete code that renders this UI:

Run Demo: HTML Controls Lab Demo

Note

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

Specify HTML-CSS Markup

At design time, click the control’s smart tag and select the Edit Template command to open the HTML/CSS editor.

YouTube video

Use the HtmlContentControl.HtmlTemplate property to specify HTML markup and CSS styles in code. The HtmlTemplate object exposes two nested properties for this purpose:

HtmlTemplate.Template — Specifies HTML code that defines the layout of UI elements.
HtmlTemplate.Styles — Specifies CSS styles applied to the UI elements.

Main Features of HTML and CSS Templates

Data bindingThe ${FieldName} syntax in HTML markup inserts values of fields from the control’s data context (HtmlContentControl.DataContext). See Data Binding.ImagesThe `` HTML tag allows you to add images.ButtonsThe HTML-CSS markup allows you to add elements to emulate buttons.External Controls and Inplace Editors

The <input> tag allows you to add an external control or an in-place editor (Repository Item) to the HtmlContentControl.

HTML

html

<input name="textEditEmail" class="field-input"/>
<input name="repositoryItemCalcEdit1" value="${Price}" class="editor"/>

Note

Changing the state of a repository item (enabled, disabled, read only) has no effect. Use the corresponding standalone editor instead (for example, use TextEdit instead of RepositoryItemTextEdit).

Run Demo: Chat Client Run Demo: In-place Editors

See the following topic for more information: HTML Tags - Input.

Mouse actionsThe control contains events to respond to mouse actions:

csharp

void htmlContentControl1_ElementMouseClick(object sender, DevExpress.Utils.Html.DxHtmlElementMouseEventArgs e) {
    if(e.ElementId == "btnSend") {
        //...
    }
}

Sub HtmlContentControl1_ElementMouseClick(sender As Object, e As DevExpress.Utils.Html.DxHtmlElementMouseEventArgs) Handles HtmlContentControl1.ElementMouseClick
    If e.ElementId = "btnSend" Then
        '...
    End If
End Sub

You can also subscribe to mouse events for elements in HTML markup, and when using Fluent API.

See the following topic for more information: HTML and CSS-based Desktop UI.

Inheritance

Object MarshalByRefObject Component Control EditorContainer HtmlContentControl