Skip to content

Appearance

Flexible TreeView allows to tweak its appearance to fit the treeview look to your project style and requirements. Apart from themes and their customization, Flexible TreeView provides the following additional possibilities to tweak its appearance:

  • Options.Appearance - the collection of bit flags that control the overall treeview appearance.
  • TextStyle - defines the text content style inside of treeview.
  • Background - allows to change the treeview background settings.
  • Border - allows to change the treeview border settings.
  • Cursor - allows to change the treeview cursor settings.
  • ColumnHeaderHeight - defines height of the treeview columns header in pixels. Read this topic for details.
  • PreferredNodeHeight - defines height of the node row in pixels for the node static height mode.
  • RootIndent - the indentation size in pixels from the treeview's left border to a root node's left border. Applied only to root nodes.
  • NodeIndent - the indentation size in pixels from the parent node's left border to a child node's left border. Applied only to child nodes.

Options.Appearance#

The treeview appearance boolean flags are gathered in Options.Appearance treeview property. This property holds the settings that did not appear in a more specific setting property.

TextStyle#

The TextStyle treeview property defines appearance of a text content.

Ones of its properties are those that define how a HTML link is appeared in the treeview. These properties are:

  • LinkCursor - allows to change the mouse cursor that is appeared over a HTML link.
  • LinkStyle - allows to set text style of a HTML link when the mouse is not over the link.
  • LinkHotStyle - allows to set text style of a HTML link when the mouse is over the link.

Background#

To change the treeview background settings the Background treeview property should be used. Note that the BackgroundImage, BackgroundImageLayout and BackColor standard properties are deprecated and replaced with Background property.

It contains following properties to customize the background:

Background.Color#

The Color property allows to define the background color or color gradient. Below is an example of how to specify either a solid color or color gradient for background.

// Use solid color.
tree.Background.Color = new ColorGradient(Color.Green);

// Use color gradient.
tree.Background.Color = new ColorGradient(Color.LightBlue, Color.Blue);

' Use solid color.
tree.Background.Color = New ColorGradient(Color.Green)

' Use color gradient.
tree.Background.Color = New ColorGradient(Color.LightBlue, Color.Blue)

To make treeview background semitransparent the Color property support colors with transparency as shown below.

tree.Background.Color = new ColorGradient(Color.FromArgb(50, Color.Green));

tree.Background.Color = New ColorGradient(Color.FromArgb(50, Color.Green))

Background.Wallpaper#

The Wallpaper property allows to specify the treeview background wallpaper. To change the wallpaper image use the Image property. Also Align, Layout and Opacity properties can be used to adjust the background image settings.

Background.Watermark#

The Watermark property allows to specify the treeview watermark image. The Image property should be used to specify the watermark image. Also Align, Layout and Opacity properties can be used to adjust the watermark settings.

Border#

To change the treeview visible border sides the Border treeview property should be used. It is marked with FlagsAttribute attribute so any border side visibility could be controlled separately, as shown below.

tree.Border = eBorder.Left | eBorder.Right;

tree.Border = eBorder.Left Or eBorder.Right

Cursor#

In order to change the treeview cursor appearance the Cursor treeview property should be used. The changed cursor is applied to overall treeview. To change cursor for a particular node control, the Cursor node control property should be used instead.

Below is how to change the treeview cursor.

tree.Cursor = Cursors.WaitCursor;

tree.Cursor = Cursors.WaitCursor

PreferredNodeHeight#

Flexible TreeView has two node height modes, static - when all nodes have the same height in pixels, and dynamic - when each node height is calculated dynamically depends on the node content. The mode is switched by changing the Options.Node.AutoNodeHeight treeview boolean property, when it is disabled (FALSE, by default), the static height mode is enabled, otherwise, dynamic height mode is enabled.

When the node static height mode is activated, the node height could be changed by using the PreferredNodeHeight treeview property, which by default equals to 22 pixels.