Skip to main content
All docs
V24.1

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

public class HtmlContentControl :
    EditorContainer,
    IHtmlContentControl,
    IDxHtmlClient,
    ISupportLookAndFeel,
    IHtmlContentControlInternal,
    IDxHtmlControlHost,
    IHtmlContentControlScrollBarOwner,
    ISupportDxHtmlContent,
    ITouchScrollBarOwner,
    IDxHtmlDesignerDataProvider,
    IStyleExceptionProvider,
    IToolTipControlClient,
    IDxHtmlRepositoryOwner,
    ISupportDxHtmlSelection,
    ISupportCommandBindingForElements<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:

HtmlContentControl

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.

HtmlContentControl EditTemplate Action

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

HTML Input Box

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

<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:
void htmlContentControl1_ElementMouseClick(object sender, DevExpress.Utils.Html.DxHtmlElementMouseEventArgs e) {
    if(e.ElementId == "btnSend") {
        //...
    }
}

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.

See Also