Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

HtmlTemplate Class

An HTML-CSS template used to render a UI of DevExpress controls.

Namespace: DevExpress.Utils.Html

Assembly: DevExpress.Utils.v24.2.dll

NuGet Packages: DevExpress.Utils, DevExpress.Wpf.Core

#Declaration

public class HtmlTemplate :
    Component,
    INotifyPropertyChanged,
    ISupportDxHtmlContent

#Remarks

Certain DevExpress controls allow you to use HTML-CSS templates to render their UI. These controls typically have the HtmlTemplate properties to specify templates. At design time, you can create a template in the control’s Designer:

ListBoxControl-Html-Template

Run Demo: HTML Main Demo — Lab

To specify an HTML-CSS template for a control at runtime, set the following properties:

  • control.HtmlTemplate.Template — Gets or sets the template’s HTML markup used to build a control’s UI.
  • control.HtmlTemplate.Styles — Gets or sets the template’s CSS code that specifies the appearance settings, size, padding, and layout options of UI elements.

See the following topics for more information:

#Example

The example below specifies a sample HTML-CSS template for an HtmlContentControl. This template renders the following UI:

HtmlContentControl - Sample - Background

string html =
@"<div class='container background-color1'>
    <h3>background-color: LightPink;</h3>
</div>
<div class='container background-color2'>
    <h3>background-color: rgb(207, 236, 207);</h3>
</div>
<div class='container background-color3'>
    <h3>background-color: rgba(253, 202, 162, 0.7);</h3>
</div>
<div class='container background-color4'>
    <h3>background-color: @Question;</h3>
</div>
<div class='container background-color5'>
    <h3>background-color: @Blue/0.2;</h3>
</div>";

string css =
@".container {
    padding: 10px;
    margin-bottom: 10px;
    background-color: @Window;
}
.background-color1 {
    background-color: LightPink;
}
.background-color2 {
    background-color: rgb(207, 236, 207);
}
.background-color3 {
    background-color: rgba(253, 202, 162, 0.7);
}
.background-color4 {
    background-color: @Question;
}
.background-color5 {
    background-color: @Blue/0.2;
}";
htmlContentControl1.HtmlTemplate.Template = html;
htmlContentControl1.HtmlTemplate.Styles = css;
See Also