DevComponents Knowledge Base

Hyper-menus feature in DotNetBar employs the mini-markup/text-markup language to decorate menu items.

Mini-markup must be well formed. That means that all tags must be properly closed and all attributes must have values enclosed in double quotes. For example this is how line-break tag would look like: <br/>

Markup Reference

<b> – The B element indicates that text is rendered as bold text.

No attributes are available for this tag.

Example:

<b>Bold Text</b>

<i> – The I element indicates that text is rendered as italic text.

No attributes are available for this tag.

Example:

<i>Italic Text</i>

<u> – The U element indicate that text is rendered as underlined text.

No attributes are available for this tag.

Example:

<u>Underlined Text</u>

<s> – The S element indicates that text is rendered as StrikeOut Text

No attributes are available for this tag.

Example:

<s>StrikeOut Text</s>

or

<strike>StrikeOut Text</strike>

<font> – The font element indicates the size change, font face or text color.

Attributes:

Example:

<font color=”Red” size=”-1″>Red smaller text</font>

<h1> … <h6> Indicates block heading text.

No attributes are available for this tag.

Example:

<h1>Level One Heading</h1>
<h3>Level 3 heading</h3>

<a> Indicates an anchor – a hypertext link.

Attributes:

• href – string which indicates hypertext reference. Attribute value is available in event arguments of MarkupLinkClick and can be used to provide more information about the link.
• name – string which indicates name of the link. Attribute value is available in event arguments of MarkupLinkClick and can be used to provide more information about the link.

Example:<a href=”MyLink”>My Link Text</a>

<br/> – Indicates line break.

No attributes are available for this tag.

Example:

First Line<br/>Second Line

<div> – Indicates generic block level container element.

Attributes:

• align – Indicates the container content alignment. left, right or center are allowed values for this attribute.
• width – Indicate the container width in pixels.
• height – Indicate the container height in pixels.
• bgcolor – Indicate the container background color, for example: bgcolor=”#FF0000″ or bgcolor=”Red”.
• padding – Indicates the padding around the element in pixels. Format for the value is: left, right, top, bottom. For example: <div padding=”1,1,4,4″”> produces 1 pixel padding on left and right side of container and 4 pixels padding on top and bottom. All values must be specified.
• valign – Indicates the vertical alignment for the content blocks inside of container. Default value is top. Acceptable values are: top, middle, bottom

Example:

<div align=”center” width=”120″>Block container element content center aligned with width of 120 pixels</div>

<span> – Indicates the in-line block level container element. The tag does not cause the line break. You can use it to create tabular layouts.

Attributes:

• align – Indicates the container content alignment. left, right or center are allowed values for this attribute.
• width – Indicate the container width in pixels.
• padding – Indicates the padding around the element in pixels. Format for the value is: left, right, top, bottom. For example: <span padding=”1,1,4,4″”> produces 1 pixel padding on left and right side of container and 4 pixels padding on top and bottom. All values must be specified.

Example:

<span align=”right” width=”100″>In-line container element content right aligned with width of 100 pixels</span>

<p> – The P element defines a paragraph.

Attributes:

• align – Indicates the paragraph content alignment. left, right or center are allowed values for this attribute.
• width – Indicate the paragraph width in pixels.
• padding – Indicates the padding around the element in pixels. Format for the value is: left, right, top, bottom. For example: <p padding=”1,1,4,4″”> produces 1 pixel padding on left and right side of container and 4 pixels padding on top and bottom. All values must be specified.

Example:

<p align=”right” width=”200″>Paragraph element content right aligned with width of 200 pixels</p>

<expand/> – Indicates the position for the expand sign of the button inside of the markup text. This tag allows you to place the drop-down sign which indicates that button has drop-down anywhere inside of the markup text to reduce the space used by a button.

Attributes:

• direction – Optional attribute that indicates the direction the expand sign points to. Possible values: left, right, top, bottom, popup

Example:

Page<br/>Borders<expand/>

<img> – The img tag defines an image.

Attributes:

• src – Specifies the image source resource name or embedded resource name. Note that image specified will be displayed only at run-time. At design-time only image box will be shown. Format ClassLibrary1/ClassLibrary1.MyImage.png or ClassLibrary1/global::ClassLibrary1.Resources.MyImage to load image from specified assembly is also supported. ClassLibrary1 in example above is used to load assembly using Assembly.Load. DotNetBar 6.8.4.0 and later.
• width – Indicates the fixed image width in pixels. If this attribute is specified height attribute must be specified as well.
• height – Indicates the fixed image height in pixels. If this attribute is specified width attribute must be specified as well.

Example if image is part of global resources:
<img src=”global::Ribbonpad.Properties.Resources.Document” />

Example if image is included as embedded resource:
<img src=”Ribbonpad.Info.png” />

Loading of images can be expensive in terms of performance. To allow you cached loading of images you can handle MarkupSettings.ResolveImage static event and return images from the event handler. Following code shows very simple cached image resolution (note that you can use ResolveImageEventArgs.Key to get to src attribute value):

Private Sub ResolveMarkupImage(sender As Object, e As DevComponents.DotNetBar.TextMarkup.ResolveImageEventArgs)
e.ResolvedImage = _Image
e.Handled=True
End Sub

Supported entity characters:

&lt; – less than <
&gt; – greater than >
&nbsp; – hard space
&amp;- ampersand &