HtmlContentControl Class

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

Namespace: DevExpress.XtraEditors

Assembly: DevExpress.XtraEditors.v24.1.dll

NuGet Package: DevExpress.Win.Navigation

Declaration

C#

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

VB.NET

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.

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:

• HTML Tags
• CSS Styles

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.

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 binding

The ${FieldName} syntax in HTML markup inserts values of fields from the control’s data context (HtmlContentControl.DataContext). See Data Binding.

Images

The <img> HTML tag allows you to add images.

Buttons

The 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

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

The control contains events to respond to mouse actions:

• HtmlContentControl.ElementMouseClick
• HtmlContentControl.ElementMouseDown
• HtmlContentControl.ElementMouseMove
• HtmlContentControl.ElementMouseOut
• HtmlContentControl.ElementMouseOver
• HtmlContentControl.ElementMouseUp

C#

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

VB.NET

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