
	Home News Features Screen shots Testimonials Download Buy Now F.A.Q. Change Log


	Support Forums Knowledge Base Contact Us

HTML text

Wednesday, 19 August 2009

All text node controls (NodeTextBox, ExpandableTextBox, ExpandablePanel, etc.) and columns header allow you to show HTML text inside. To do that, enable the SupportHtml node control property.
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 text. width attribute is optional and allows to override tab width which by default is 20 pixels.

Example:

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");

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:

string text = "<font color=Blue>Blue text</font>";
 
Node node = 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:

// 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; }";

‘&’ 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:

Example:

// custom node control class to display all html links (<a href> tag) as italic.
class NodeTextBoxEx : NodeTextBox, IHtmlTagInspector
{
  protected override Size MeasureSize(Node pNode, DrawContext pContext)
  {
    // tell the engine that we`ll inspect all html text, displayed in this node control.
    pContext.Owner = this;
 
    // pass custom parameters to the ProcessHtmlTag method below.
    pContext.Parameters = pNode;
 
    // let the base class to measure text with enabled html inspector.
    Size sz = base.MeasureSize(pNode, pContext);
 
    pContext.Owner = null;
    pContext.Parameters = null;
 
    return sz;
  }
 
  protected override void Draw(Node pNode, DrawContext pContext)
  {
    pContext.Owner = this;
    pContext.Parameters = pNode;
 
    base.Draw(pNode, pContext);
 
    pContext.Owner = null;
    pContext.Parameters = null;
  }
 
  // inspect all html tags that`re appear in this node control.
  public void ProcessHtmlTag(HtmlTextTag pTag, DrawContext pContext)
  {
    // get the target node from the context custom parameters.
    Node node = (Node)pContext.Parameters;
    // if this is our node and this tag with a link, change the tag`s text appearance.
    if (node.Text == "My node" && pTag.Link != null)
    {
      pTag.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);

Use Flexible TreeView in WPF project
Sunday, 18 December 2011

Do you have a WPF project and want to use Flexible TreeView there? No problem!