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:

Bold text - Bold text.
Italic text - Italic text.
Underlined text - Underlined text.
<s>Strikeout text</s> - ~~Strikeout text~~.
  - inserts a single line break.
Colored text - 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.
Colored text - 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

C#Visual Basic

Node node = new Node("<i>Some text</i><br/><b><font color='Blue'>Second</font> line</b>");
Node node = new Node("<tab/>First line<br/>Second line");

Dim node As New Node("<i>Some text</i><br/><b><font color='Blue'>Second</font> line</b>")
Dim node As New Node("<tab/>First line<br/>Second line")

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

C#Visual Basic

string text = "<font color=Blue>Blue text</font>";
Node node = new Node(HtmlTextHelper.TextToHtml(text));

Dim text As String = "<font color=Blue>Blue text</font>"
Dim node As New Node(HtmlTextHelper.TextToHtml(text))

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

C#Visual Basic

// 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 &lt; 10 || b &gt; 20) { return; }";

' using << and >> with auto-converting method call.
Dim node As New Node()
' convert text to "if(a < 10 || b > 20) { return; }"
node.Text = HtmlTextHelper.TextToHtml("if(a << 10 || b >> 20) { return; }")

' using < and >
Dim node As New Node()
node.Text = "if(a &lt; 10 || b &gt; 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:

C#Visual Basic

// 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.

Display an image that is stored in the Image property of the current node

HTML

<img scr="node:Image">

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.
HTML
<img scr="node:Image">
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.
HTML
<img scr="static:TestNamespace.Properties.Resources.imageToShow, Test">
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.

HTMLC#Visual Basic

<img scr="dynamic:closedAccountIcon">

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.

HTML Support#

Display special characters#

< and > characters#

The & character#

HTML text auto-wrapping#

Html text inspection and customization#

IMG tag#

`<` and `>` characters#

The `&` character#