HTML Tags
- 7 minutes to read
This topic describes HTML tags supported by DevExpress WinForms controls for HTML and CSS-based UI design.
Sections and Headings
<div>
Tag
A container for other elements.
<div class='view'>
<b>Lorem ipsum</b><br>
<i>dolor sit amet</i><br>
</div>
<span>
Tag
An inline container for other elements.
<div class="container">
This is an example of the <span class="SpanExample">span tag</span> inside simple text.
</div>
<h1>
–<h6>
Tags
Headings.
<h1>Header h1</h1>
<p>
Tag
A paragraph.
<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>
Attributes
align
- The alignment of paragraph text content. Available values include:
left
,right
,center
,justify
.
Example: <p align="right">Right-aligned paragraph</p>
.
<br>
Tag
A line break.
<p>To force<br> line breaks<br>,use the br<br> element.</p>
Links and Images
<a>
Tag
A hyperlink.
<a href='devexpress.com'>Hyperlink</a><br>
Attributes
href
- The URL of the page to which the link goes.
<img>
Tag
An image.
Attributes
src
- Specifies the image source. It can be set to the following values:
The name or index of an image in a control’s dedicated image collection. Use the control’s HtmlImages property (for example, HtmlContentControl.HtmlImages or ItemsView.HtmlImages) to assign this collection.
A binding expression that defines a field in a control’s data source that stores image data. This expression has the following syntax:
${FieldName}
.<img src="${LargePhoto}" width="100" height="100">
width
- The image’s display width, in pixels.
height
- The image’s display height, in pixels.
Input
<input>
Tag
The <input>
tag allows you to add an input box or external control to the UI. The tag is supported for the following controls:
- HtmlContentControl
- Use the
<input>
tag as a placeholder for external controls and Repository Items (in-place editors) that you want to display within a layout. - Data Grid Views (ItemsView, TileView, and WinExplorerView)
- Use the
<input>
tag as a placeholder for Repository Items (in-place editors). It’s not possible to use this tag to display external controls in Data Grid Views.
<!-- Show external controls-->
<input name="textEdit1"/>
<input name="calcEdit1"/>
<!-- Show in-place editors -->
<input class="editor" value="${StringData}" name="repositoryItemTextEdit1"/>
<input class="editor" value="${IntData}" name="repositoryItemSpinEdit1"/>
<input class="editorHigh" value="${ImageData}" name="repositoryItemPictureEdit1"/>
<input class="editor" value="${Rating}" name="repositoryItemRatingControl1"/>
<input class="editor" value="${FloatData}" name="repositoryItemProgressBar1"/>
<!-- Show in-place editors based on the data types of bound fields -->
<input class="editor" value="${OrderDate}"/>
<input class="editor" value="${Photo}"/>
Attributes
name
Specifies the name of an external control or Repository Item that you want to display instead of the
input
HTML element.The
name
attribute is optional if you bind the<input>
tag to a data field (see thevalue
attribute). If thename
attribute is not specified, the runtime UI renders a default DevExpress editor instead of the<input>
tag. The default editor’s type matches the type of the bound data field. For example, the UI renders a DateEdit editor for the<input value="${BirthDate}"/>
element bound to the DateTime “BirthDate” field.value
- Specifies the static control value (
value = "5"
), or the data source field name bound to this control (value = "${Price}"
).
Add External Controls
To display an external control within an HtmlContentControl, do the following:
- Place an external control (for example, a TextEdit) onto the HtmlContentControl.
- Define the
input
tag in HTML code. - Set the
name
attribute of theinput
tag to the name of the added control.
Add Repository Items
Repository Items (RepositoryItem descendants) are objects used to create in-place editors in container controls. To create Repository Items that can be referenced in your HTML template, open the “In-place Editor Repository” tab of the control’s Designer.
If you create these items in code, remember to add them to the control’s RepositoryItems
collection (otherwise, the control is unable to locate a referenced Repository Item). Items created at design time (in the control’s Designer) are placed into this collection automatically.
RepositoryItemTextEdit repoItem = new RepositoryItemTextEdit();
// Specify the Name property to reference this Repository Item in the 'input' tag.
repoItem.Name = "repositoryItemTextEdit1";
repoItem.EditValueChanged += RepoItem_EditValueChanged;
repoItem.ShowNullValuePrompt = DevExpress.XtraEditors.ShowNullValuePromptOptions.EmptyValue;
repoItem.NullValuePrompt = "No value";
htmlContentControl1.RepositoryItems.Add(repoItem);
private void RepoItem_EditValueChanged(object sender, EventArgs e) {
// Process user input.
}
Formatting
<b>
Tag
Bold text.
<b>Bold text</b><br>
<i>
Tag
Italicized text.
<i>Italic Text</i><br>
<u>
Tag
Text with an underline.
<u>Underline</u><br>
<s>
Tag
Strikethrough text.
<s>Strikethrough</s><br>
<ol>
Tag
An ordered list.
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes
reversed
- Items are displayed in reversed order. Example:
<ol reversed>
. start
- The start value of an ordered list. Example:
<ol start="10">
. type
The kind of marker to use in the list. Available values include:
1 — Default. Decimal numbers (1, 2, 3, 4).
a — Alphabetically ordered list, lowercase (a, b, c, d).
A — Alphabetically ordered list, uppercase (A, B, C, D).
i — Roman numbers, lowercase (i, ii, iii, iv).
I — Roman numbers, uppercase (I, II, III, IV).
Example:
<ol type="I">
.
<ul>
Tag
An unordered list.
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<li>
Tag
A list item.
<ol>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ol>
Attributes
value
- Applies to
ol
lists. Specifies the item’s value. The following list items will increment from that number. Example:<ol> <li value="7">Apple</li> </ol>
Tables
<table>
Tag
A table.
<table>
<thead>
<tr>
<th>Company</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer cell</td>
<td>footer cell</td>
</tr>
</tfoot>
</table>
<th>
Tag
A header cell in a table.
<table>
<thead>
<tr>
<th>Company</th>
<th>Country</th>
</tr>
</thead>
...
</table>
Attributes
colspan
- The number of columns a cell should span.
rowspan
- The number of rows a cell should span.
<tr>
Tag
A row in a table.
<table>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
</tbody>
</table>
<td>
Tag
A cell in a table.
<table>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
</tbody>
</table>
Attributes
colspan
- The number of columns a cell should span.
rowspan
- The number of rows a cell should span.
<thead>
Tag
Groups the header content in a table.
<table>
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</table>
<tbody>
Tag
Groups the body content in a table.
<table>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
</tr>
</tbody>
</table>
<tfoot>
Tag
Groups the footer content in a table.
<table>
<thead>
<tr>
<th>Company</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>footer cell</td>
<td>footer cell</td>
</tr>
</tfoot>
</table>
Tooltips
Any HTML tag has the title
attribute that allows you to specify a tooltip for the HTML element.
<div id="miNew" class="menuItem" title="Create a new file">New</div>
The Default ToolTipController object (see DefaultToolTipController) initially manages the display settings of tooltips. Set a control’s ToolTipController
property (for example, HtmlContentPopup.ToolTipController) to a ToolTipController component to use a custom ToolTipController
object instead of the Default ToolTipController to manage tooltips.
See the following topic for more information: Tooltips.