HtmlTemplate Class

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

Namespace: DevExpress.Utils.Html

Assembly: DevExpress.Utils.v22.2.dll

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

Declaration

C#

public class HtmlTemplate :
    Component,
    INotifyPropertyChanged,
    ISupportDxHtmlContent

VB.NET

Public Class HtmlTemplate
    Inherits Component
    Implements INotifyPropertyChanged,
               ISupportDxHtmlContent

Related API Members

The following members return HtmlTemplate objects:

Show 25 links

• AccordionControlHtmlTemplates.FooterElement
• AccordionControlHtmlTemplates.FooterOverflowButton
• AccordionControlHtmlTemplates.FooterPanel
• AccordionControlHtmlTemplates.Group
• AccordionControlHtmlTemplates.GroupContent
• AccordionControlHtmlTemplates.HamburgerHeaderPanel
• AccordionControlHtmlTemplates.HamburgerMenuButton
• AccordionControlHtmlTemplates.Item
• AccordionControlHtmlTemplates.ItemContent
• AccordionControlHtmlTemplates.MinimizedElement
• AccordionControlHtmlTemplates.MinimizedGroupPopup
• AccordionControlHtmlTemplates.Separator
• AlertControl.HtmlTemplate
• DirectXFormBase.HtmlTemplate
• HtmlContentControl.HtmlTemplate
• HtmlContentPopup.HtmlTemplate
• HtmlTemplate.Clone()
• HtmlTemplateCollection.AddTemplate(String, String)
• ItemsView.EmptyViewHtmlTemplate
• ItemsView.HtmlTemplate
• TileView.TileHtmlTemplate
• ToolTipController.HtmlTemplate
• ToolTipControllerShowEventArgs.HtmlTemplate
• WinExplorerViewStyleOptions.HtmlTemplate
• XtraBaseArgs.HtmlTemplate

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:

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:

• HTML and CSS-based Desktop UI
• HTML Tags
• CSS Styles

Example

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

C#

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;

VB.NET

Dim html As String = "<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>"

Dim css As String = ".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

Inheritance

Object

MarshalByRefObject

Component

HtmlTemplate