HTML Support#
All text node controls (NodeTextBox, NodeExpandableTextBox, NodeExpandablePanel, etc.) and columns header allow you to show HTML text inside. To do that, enable the SupportHtml node control property.
Below are the supported HTML tags:
- <b>Bold text</b> - Bold text.
- <i>Italic text</i> - Italic text.
- <u>Underlined text</u> - Underlined text.
- <s>Strikeout text</s> -
Strikeout text. - <br/> - inserts a single line break.
- <font color="ColorId">Colored text</font> - changes the text color where the ColorId is a text color and can be either a color name (from the System.Drawing.Color type) or hexadecimal RGB value in #RRGGBB format.
- <a href='url'>Hyperlink</a> - shows a clickable hyperlink. To handle the link click, subscribe to the LinkClicked treeview event. You can change the link appearance using the TextStyle treeview property.
- <tab width='xx' /> - adds a tab (empty space) into the text. The
width
attribute is optional and allows to override tab width which by default is 20 pixels. - <img src='xx' /> - shows an image specified in the
src
attribute. Read here for details. - <span background-color='green or #112233'>Colored text</span> - shows text ('Colored text' in this example) with the specified background color. The color should be specified either as a color name or its RGB value.
Example
Values of all complex tags (font.color, a.href, etc.) should be quoted. If you have text without quotes, use the HtmlTextHelper.TextToHtml static method to convert it to valid HTML text.
Example
Display special characters#
To show special characters in HTML text, replace them with the analogues specified below.
<
and >
characters#
To show <
and >
characters replace them with <
and >
respectively, or use <<
and >>
characters in the text and call the HtmlTextHelper.TextToHtml method to convert them to a valid HTML text.
Example
// using << and >> with auto-converting method call.
Node node = new Node();
// convert text to "if(a < 10 || b > 20) { return; }"
node.Text = HtmlTextHelper.TextToHtml("if(a << 10 || b >> 20) { return; }");
// using < and >
Node node = new Node();
node.Text = "if(a < 10 || b > 20) { return; }";
The &
character#
To show the &
character, use the &
string.
HTML text auto-wrapping#
Flexible TreeView supports HTML text auto-wrapping. See the Text wrapping article for details.
Html text inspection and customization#
By default, Flexible TreeView displays html text according to the treeview theme's settings. If you need to customize the html tag's appearance before it will be displayed in the treeview, you can do that using the IHtmlTagInspector interface. It contains the ProcessHtmlTag method, where you can customize every tag's appearance.
For example, to customize text appearance in a node control, use the code below:
// custom node control class to display all html links (<a href> tag) as italic.
class NodeTextBoxEx : NodeTextBox, IHtmlTagInspector
{
protected override Size MeasureSize(Node node, DrawContext context)
{
// tell the engine that we'll inspect all html text, displayed in this node control.
context.Owner = this;
// pass custom parameters to the ProcessHtmlTag method below.
context.Parameters = node;
// let the base class to measure text with enabled html inspector.
Size sz = base.MeasureSize(node, context);
context.Owner = null;
context.Parameters = null;
return sz;
}
protected override void Draw(Node node, DrawContext context)
{
context.Owner = this;
context.Parameters = node;
base.Draw(node, context);
context.Owner = null;
context.Parameters = null;
}
// inspect all html tags that're appear in this node control.
public void ProcessHtmlTag(HtmlTextTag tag, DrawContext context)
{
// get the target node from the context custom parameters.
Node node = (Node)context.Parameters;
// if this is our node and this tag with a link, change the tag's text appearance.
if (node.Text == "My node" && tag.Link != null)
{
tag.Italic = true;
}
}
}
// you can use this node control class as any other node control in your treeview.
NodeTextBoxEx tb = new NodeTextBoxEx();
tb.DataFieldName = "Text";
tb.AttachTo(tree);
' custom node control class to display all html links (<a href> tag) as italic.
Class NodeTextBoxEx
Inherits NodeTextBox
Implements IHtmlTagInspector
Protected Overrides Function MeasureSize(node As Node, context As DrawContext) As Size
' tell the engine that we'll inspect all html text, displayed in this node control.
context.Owner = Me
' pass custom parameters to the ProcessHtmlTag method below.
context.Parameters = node
' let the base class to measure text with enabled html inspector.
Dim sz As Size = MyBase.MeasureSize(node, context)
context.Owner = Nothing
context.Parameters = Nothing
Return sz
End Function
Protected Overrides Sub Draw(node As Node, context As DrawContext)
context.Owner = Me
context.Parameters = node
MyBase.Draw(node, context)
context.Owner = Nothing
context.Parameters = Nothing
End Sub
' inspect all html tags that're appear in this node control.
Public Sub ProcessHtmlTag(tag As HtmlTextTag, context As DrawContext)
' get the target node from the context custom parameters.
Dim node As Node = DirectCast(context.Parameters, Node)
' if this is our node and this tag with a link, change the tag's text appearance.
If node.Text = "My node" AndAlso tag.Link IsNot Nothing Then
tag.Italic = True
End If
End Sub
End Class
' you can use this node control class as any other node control in your treeview.
Dim tb As New NodeTextBoxEx()
tb.DataFieldName = "Text"
tb.AttachTo(tree)
IMG tag#
Flexible TreeView supports the img
HTML tag which allows to display an image from different sources specified in the src
attribute.
The img
tag supports three image data source's prefixes:
-
node
- allows to retrieve the image to display from the property or field of the current node. Current node is a node where the image would be shown. It may be either a bound or unbound node.The sample above will display an image stored in the Image node property or field.
-
static
- allows to retrieve the image to display from the static property specified after prefix. The source property name should has full assembly qualified name like in the sample below.The sample above will display an image stored in the imageToShow static property of the type TestNamespace.Properties.Resources from the Test assembly. In case of treeview would not find the specified image an empty area will be displayed instead, no error will be raised.
-
dynamic
- allows to display an image that is requested through the GetDynamicImage treeview event. Note that the GetDynamicImage event is called each time the image is needed so it's good practice to cache the returned image to do not hurt the treeview performance.
The GetDynamicImage event will receive the target image name that is specified after the prefix colon.tree.GetDynamicImage += tree_GetDynamicImage; void tree_GetDynamicImage(FlexibleTreeView treeview, ResolveNodeImageEventArgs args) { if (args.ImageName == "closedAccountIcon") { if(args.Node.IsFocused) args.Image = Resources.ClosedAccountIconActive; else args.Image = Resources.ClosedAccountIconInactive; } }
tree.GetDynamicImage += tree_GetDynamicImage Private Sub tree_GetDynamicImage(treeview As FlexibleTreeView, args As ResolveNodeImageEventArgs) If args.ImageName = "closedAccountIcon" Then If args.Node.IsFocused Then args.Image = Resources.ClosedAccountIconActive Else args.Image = Resources.ClosedAccountIconInactive End If End If End Sub
In the above sample the closedAccountIcon image is requested dynamically by raising the GetDynamicImage treeview event.
Note
Different images for each node state (selected, focused, etc.) or by checking other data can be returned.