[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Expand]Controls and Libraries
 [Collapse]Common Features
  [Expand]Data Binding Common Concepts
  [Expand]Data Source Wizard
  [Expand]Expressions
  [Expand]Behaviors
  [Expand]Application Appearance and Skin Colors
  [Expand]Filtering UI Context
   Find Panel Syntax
  [Expand]Graphics Performance and High DPI
  [Expand]Scaffolding Wizard
  [Expand]Formatting Values
   HTML-inspired Text Formatting
  [Expand]Menus
  [Expand]Tooltip Management
  [Expand]Save and Restore Layouts
   Clipboard - Copy and Paste Operations. Data Formatting
   Version Compatibility: Default Property Values
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

HTML-inspired Text Formatting

A number of DevExpress controls allow you use simplified HyperText Markup Language (HTML) tags to format display text strings. This document describes available HTML-inspired tags, and lists all controls that support them.

Note

When the HTML Text Formatting feature is enabled for a certain control or its visual element, its text is painted in left-to-right mode, regardless of the RightToLeft option.

Expanded Supported Tags

Tags are enclosed with the '<' and '>' symbols, and typically have a corresponding end tag. If a tag is not matched by its ending counterpart, all text that follows the tag will be formatted accordingly.

Note

Note that if you need to use angle brackets ('<' and '>') in the text of the controls that support HTML text formatting, you need to use an additional '<' bracket at the beginning. For example, to get "<some text>" you should assign "<<some text>" to the corresponding property.

"Br" Tag

Inserts a single line break.

To use this tag, you should enable word wrap with the TextOptions.WordWrap option of a corresponding appearance object.

Control or Control Element

Property that provides access to appearance settings

GridControl

GridViewAppearances.HeaderPanel
GridColumn.AppearanceHeader
BandedViewAppearances.BandPanel
GridBand.AppearanceHeader

TreeList

TreeListAppearanceCollection.HeaderPanel
TreeListColumn.AppearanceHeader

LabelControl

LabelControl.Appearance

CheckEdit

RepositoryItem.Appearance

LayoutControlItem

BaseLayoutItem.AppearanceItemCaption

  • Syntax: <br>

  • Example: First Name<br>Last Name


"Color" and "Backcolor" Tags

Specify text foreground and background colors.

Syntax: <color=value></color> <backcolor=value></backcolor>

Examples:

  • <color=red>Text</color>, <backcolor=red>Text</backcolor>
  • <color=0,255,0>Text</color>, <backcolor=0,255,0>Text</backcolor>
  • <color=255,0,255,0>Text</color> <backcolor=255,0,255,0>Text</backcolor>
  • <color=#0000FF>Text</color>" <backcolor=#0000FF>Text</backcolor>"

"Size" Tag

Specifies the font size.

Syntax: <size=value></size>

Examples:

  • <size=10>10pt text</size>
  • <size=+4>Larger text</size>
  • <size=-4>Smaller text</size>

Text Format Tags ("b", "i", "s", "u", "r")

Allow you to create bold, italic, underlined and strikethrough strings.

The "r" tag applies normal text formatting. This resets any existing bold, italic, underlined and strikethrough formats, including those applied in control Appearance settings.

Syntax: <b></b>, <i></i>, <s></s>, <u></u>, <r>

Examples:

  • <b>Bold text</b>
  • <i>Italic text</i>
  • <s>Strikethrough text</s>
  • <u>Underlined text</u>
  • <b>Bold-<u>UnderlinedBold-</u><r>Normal</b>

If the static DevExpress.Utils.Text.StringParser.KeepFontStyle property is false, a text block that has font style HTML tags (font family, font weight, etc.) ignores AppearanceObject font style settings. Otherwise, both font style sets are applied.

The default KeepFontStyle property value is false for versions 19.1 and older, and true for v19.2 and newer.


"Sub" and "Sup" Tags

Define text that is smaller than neighboring letters, and displayed lower (subscript) or higher (superscript) than the previous character.

Syntax: <sub>Text</sub>, <sup>Text</sup>

Examples:

  • Subscript: H<sub>2</sub>O
  • Double subscript: 2<sub>2<sub>2</sub></sub>
  • Superscript: 5<sup>2</sup>=25
  • Double superscript: 5<sup>2<sup>2</sup></sup>

"Font" Tag

Specifies the font family. Can be combined with Color and Size settings inside a single tag.

Syntax: <font></font>

Examples:

  • <font=Helvetica>Helvetica</font>
  • <font='Times New Roman'size=15 color=red>Times New Roman</font>

"Image" Tag

Inserts an image from a bound image collection or from project resources. To insert an image from project resources, the image's name must be preceded with the '#' character. The image referenced from project resources will not appear at design time, but will appear at runtime.

Note

Project resource images can only be loaded from the Entry Assembly (the startup executable). Thus, if you define images in the resources of your additional class library, these images cannot be loaded using the image tag, even from this library code.

If the image's name is not preceded with '#', it is implied that the image should be loaded by its name from a bound image collection. Use the control's HtmlImages property to provide an image collection (ImageCollection or SvgImageCollection ).

The following attributes for the image tag are supported.

  • size - sets the display size of the image.

  • align - specifies the vertical alignment of the image relative to the text. Possible values: top, bottom and center.

Attributes must be specified after the tag's value, followed by the ";" character. They must be separated with ";", and specified without spaces.

Controls and components that accept the image tag and provide the HtmlImages property are listed below.

Syntax: <image=value>

Examples:

  • <image=UpArrow.png>
  • <image=#LeftArrow>
  • <image=DownArrow.png;size=20,20;align=top>

"Href" Tag

Displays a hyperlink. The value string specifies the hyperlink source, and the string between the opening and closing tags is the text to be displayed.

Controls that can display hyperlinks raise the HyperlinkClick event when a user clicks a link.

Syntax: <href=value></href>

Example: <href=www.devexpress.com>Our web site</href>


"Nbsp" Tag

Inserts a non-breaking space character (0xA0).

Syntax: <nbsp>

Example: First Name<nbsp>Last Name

Expanded Supported Controls

All Controls

Element that supports tags

Editor property that turns HTML-formatting on or off

Tooltips and SuperToolTips

ToolTipController.AllowHtmlText, SuperToolTip.AllowHtmlText, ToolTipItem.AllowHtmlText

Tooltips for BaseControl descendants - the BaseControl.ToolTip property

BaseControl.AllowHtmlTextInToolTip

XtraForm caption - the XtraForm.HtmlText property

n/a

ContextButton text - the ContextButtonBase.Caption property.

ContextButtonBase.AllowHtmlText

ValidationHint texts - the (ValidationHintBaseDefaultProperties.Text and ValidationHintBaseProperties.Text properties

ValidationHintBaseDefaultProperties.AllowHtmlDrawText

ValidationHintBaseProperties.AllowHtmlDrawText

Charts

In ChartControl, you can use HTML-inspired tags to format:

Editors Library

The table below enumerates editors from the DevExpress Editors suite that support tags.

Element that supports tags

Editor property that turns HTML-formatting on or off

LabelControl text - the LabelControl.Text property

LabelControl.AllowHtmlString

CheckEdit and ToggleSwitch text

RepositoryItem.AllowHtmlDraw

SimpleButton text - the (SimpleButton.Text property

SimpleButton.AllowHtmlDraw

Text strings in ButtonEdit descendants whose RepositoryItemButtonEdit.TextEditStyle

property is set to TextEditStyles.DisableTextEditor

RepositoryItem.AllowHtmlDraw

Button texts for ButtonEdit and its descendants

RepositoryItem.AllowHtmlDraw

ListBoxControl and CheckedListBoxControl items

BaseListBoxControl.AllowHtmlDraw

ComboBoxEdit, ImageComboBoxEdit and CheckedComboBoxEdit items

RepositoryItem.AllowHtmlDraw

GroupControl text - the GroupControl.Text property

GroupControl.AllowHtmlText

RatingControl text - the RatingControl.Text property

RepositoryItemRatingControl.AllowHtmlDraw

Data Grid

The GridControl supports HTML tags in the following elements.

Element that supports tags

Property that turns HTML-formatting on or off

View Caption - the BaseView.ViewCaption property

n/a

Column captions - the GridColumn.Caption property

GridOptionsView.AllowHtmlDrawHeaders

Band captions - the GridBand.Caption property

GridOptionsView.AllowHtmlDrawHeaders

Cell text. Note that cells with HTML-formatted values cannot be edited at runtime.

There are multiple ways to add HTML tags to cell text strings.

No dedicated property. Use RepositoryItemHypertextLabel as an in-place editor.

Group row texts - handle the GridView.CustomDrawGroupRow event

GridOptionsView.AllowHtmlDrawGroups

column captions in the TileView's Edit Form - the GridColumn.Caption

TileViewOptionsEditForm.AllowHtmlCaptions

WinExplorerView items

WinExplorerViewOptionsView.AllowHtmlText

Tree List

The TreeList supports HTML tags in the following elements.

Element that supports tags

Property that turns HTML-formatting on or off

Column captions - the TreeListColumn.Caption property

TreeListOptionsView.AllowHtmlDrawHeaders

Band captions - the TreeListBand.Caption property

TreeListOptionsView.AllowHtmlDrawHeaders

Cell text. Note that cells with HTML-formatted values cannot be edited at runtime.

There are multiple ways to add HTML tags to cell text strings.

No dedicated property. Use RepositoryItemHypertextLabel as an in-place editor.

Pivot Grid

The PivotGridControl (see PivotGridControl) supports HTML tags in the following elements.

Element that supports tags

Property that turns HTML-formatting on or off

Field headers text - the PivotGridFieldBase.Caption property

PivotGridOptionsView.AllowHtmlDrawHeaders

Field values text - the PivotGridControl.FieldValueDisplayText event and

the PivotFieldDisplayTextEventArgs.DisplayText property.

PivotGridOptionsView.AllowHtmlDrawFieldValues

Vertical Grid and Property Grid

The PropertyGridControl is the VGridControl control descendant. Both controls have identical elements that support HTML tags.

Element that supports tags

Property that turns HTML-formatting on or off

Row captions

BaseOptionsView.AllowHtmlText

VGridOptionsRow.AllowHtmlText

CustomDrawRowHeaderCellEventArgs.AllowHtmlText

Cell text. Note that cells with HTML-formatted values cannot be edited at runtime.

There are multiple ways to add HTML tags to cell text strings.

No dedicated property. Use RepositoryItemHypertextLabel as an in-place editor.

Layout Control

The LayoutControl supports HTML tags in the following elements.

Element that supports tags

Property that turns HTML-formatting on or off

Item captions - the BaseLayoutItem.Text property

LayoutControlItem.AllowHtmlStringInCaption

LayoutGroup.AllowHtmlStringInCaption

Item tooltips

BaseLayoutItemOptionsToolTip.AllowHtmlString

BaseLayoutItemOptionsToolTip.IconAllowHtmlString

ToolTipController.AllowHtmlText

Ribbon, Bars and Menus

Element that supports tags

Property that turns HTML-formatting on or off

Item captions and descriptions - the BarItem.Caption and BarItem.Description properties

BarItem.AllowHtmlText

BarItemLink.AllowHtmlText

BarManager.AllowHtmlText

RibbonControl.AllowHtmlText

BackstageViewControl item captions - the BackstageViewItem.Caption property

BackstageViewItem.AllowHtmlString

Gallery item and group items - the GalleryItem.Caption and GalleryItemGroup.Caption properties

BaseGallery.AllowHtmlText

Application UI Manager

The DocumentManager supports HTML tags in the following elements.

Element that supports tags

Property that turns HTML-formatting on or off

Document headers - the BaseDocument.Header property

IDocumentSelectorDefaultProperties.AllowHtmlDrawHeaders

IDocumentSelectorProperties.AllowHtmlDrawHeaders

Document captions - the BaseDocument.Caption property

IDocumentGroupDefaultProperties.AllowHtmlDraw

IDocumentGroupProperties.AllowHtmlDraw

Flyout description and caption - the UIActionPropertiesCore.Caption and

UIActionPropertiesCore.Description properties

IFlyoutDefaultProperties.AllowHtmlDraw

IFlyoutProperties.AllowHtmlDraw

Tile elements

ITileContainerDefaultProperties.AllowHtmlDraw

Content Containers' overview screens

OverviewContainerDefaultProperties.AllowHtmlDraw

OverviewContainerProperties.AllowHtmlDraw

Navigation Controls

Element that supports tags

Property that turns HTML-formatting on or off

OfficeNavigationBar item captions - the NavigationBarItem.Text property

OfficeNavigationBar.AllowHtmlDraw

WindowsUIButton captions

WindowsUIButtonPanel.AllowHtmlDraw

TileControl and TileBar tiles

TileControl.AllowHtmlText

TileItem.AllowHtmlText

NavBarControl item and group texts - the NavElement.Caption property

NavBarControl.AllowHtmlString

NavElement.AllowHtmlString

Navigation Frame, Tab Pane and Navigation Pane pages (both caption and text)

NavigationPageDefaultProperties.AllowHtmlDraw

NavigationPageProperties.AllowHtmlDraw

NavigationPane.AllowHtmlDraw

AccordionControl element headers - the AccordionControlElementBase.Text property

AccordionControl.AllowHtmlText

XtraTabControl (see XtraTabControl) page captions

XtraTabControl.AllowHtmlDraw

Gauges

Enable the Label.AllowHTMLString property to format label text strings in the GaugeControl.

Scheduler

To display HTML tags inside appointment subject, description or location, enable the View's AppointmentDisplayOptions.AllowHtmlText setting and handle the SchedulerControl.InitAppointmentDisplayText event.

Map Control

The MapControl supports HTML tags in the following elements.

Element that supports tags

Property that turns HTML-formatting on or off

MapCallout text

MapCallout.AllowHtmlText

MapCustomElement text

MapCustomElement.AllowHtmlText

Dialogs and Wizards

Element that supports tags

Property that turns HTML-formatting on or off

XtraDialog and XtraMessageBox captions

XtraDialog.AllowHtmlText

XtraMessageBox.AllowHtmlText

WizardControl pages' text

WizardControl.AllowHtmlText

AlertControl windows' captions and regular text blocks

AlertControl.AllowHtmlText

Expanded Example 1

The following example shows how to format a LabelControl's text using HTML tags. HTML formatting is enabled via the LabelControl.AllowHtmlString property. To respond to an end-user clicking the hyperlink, the LabelControl.HyperlinkClick event is handled. The image below shows the result:

Expanded Example 2

This example shows how to create a SuperToolTip containing a hyperlink for a SimpleButton.

The SimpleButton control provides the BaseControl.SuperTip inherited property that allows you to set a tooltip. To enable use of the <href> tag and other HTML text formatting tags in tooltips, activate the HTML Text Formatting feature (for instance, via the SuperToolTip.AllowHtmlText property). To respond to clicking a hyperlink, handle the ToolTipController.HyperlinkClick event.

The code that creates a SuperToolTip for a button is shown at the end of this section. At design time, you can create a SuperToolTip for a button as shown below. In this case, you still need to implement the HyperlinkClick event in code.

At design time, select the SimpleButton control and click the ellipses button within the SuperTip row in the Properties window:

This invokes the SuperToolTip Editor, which allows you to set the tooltip content and activate the HTML formatting feature:

When you run the application, the result will be as follows:

Expanded See Also

Is this topic helpful?​​​​​​​