TreeView Appearance in WinForms TreeView(SfTreeView)

3 Feb 20229 minutes to read

This section provides options to the customize the tree structure and the nodes.

Background Settings

WinForms TreeView control lets you customize its background with colors and image.

Background Colors

The below properties sets the background color for the treeview and also the node text.

Property Table

TreeViewAdv Properties Description
BackgroundColor Indicates the background color of the control. It provides options to set style, back color, fore color, gradient color and gradient styles.
BackColor Indicates the background color of the text and the graphics of the control.


The Background property is available for individual nodes also.

Background Image

Use the BackgroundImage property to specify a custom image as the background of the chart. The image layout can also be specified using the properties below.

Property Table

TreeViewAdv Properties Description
BackgroundImage Indicates the background image that can be used for the control.
BackgroundImageLayout Indicates the layout for the background image in the control.

More Customization for PlusMinus Controls

The controls in the TreeViewAdv like PlusMinus control will have a transparent background, if the TransparentControls property is set to true.

Property Table

TreeViewAdv Properties Description
TransparentControls Indicates if the control will have a transparent background.
this.treeViewAdv1.TransparentControls = true;
Me.treeViewAdv1.TransparentControls = True

Customization in PlusMinus WinForms TreeView

Themed TreeView Control

Themes can be enabled for the control by enabling ThemesEnabled property. This can also be enabled for individual nodes also by using the TreeNodeAdv.ThemesEnabled property.

Property Table

TreeViewAdv Properties Description
ThemesEnabled Indicates if the control is drawn themed.

Property Table

TreeNodeAdv Properties Description
ThemesEnabled Indicates if the node control will be themed.

Drawing Node Background

To draw the node’s background, users need to turn on OwnerDrawnNodesBackground property, in theTreeViewAdv and then listen to the tree’s NodeBackgroundPaint event which will be called for each node. This can be implemented by using the following code snippet.

Property Table

TreeViewAdv Properties Description
OwnerDrawnNodesBackground Indicates if the NodeBackgroundPaint event will be fired before drawing a node's background.

Event Table

TreeViewAdv event Description
NodeBackgroundPaint This event when fired, paints the background of the node, when OwnerDrawNodes property is set to true.
this.treeViewAdv1.OwnerDrawNodesBackground = true;

// Background Paint Event
private void treeViewAdv1_NodeBackgroundPaint(object sender, TreeNodeAdvPaintBackgroundEventArgs e)
    if (e.Node.Index == 2 | e.Node.Index == 4)
        Syncfusion.Drawing.BrushInfo br = new Syncfusion.Drawing.BrushInfo(Color.Orange);
        e.BrushInfo = br;
Me.treeViewAdv1.OwnerDrawNodesBackground = True

' Background Pain Event
Private Sub treeViewAdv1_NodeBackgroundPaint(ByVal sender As Object, ByVal e As TreeNodeAdvPaintBackgroundEventArgs)
    If e.Node.Index = 2 Or e.Node.Index = 4 Then
Dim br As Syncfusion.Drawing.BrushInfo = New Syncfusion.Drawing.BrushInfo(Color.Orange)
e.BrushInfo = br
    End If
End Sub

Drawing Node BackGround in WinForms TreeView

Painting the Active and Inactive Nodes

Background for the selected node can be set using SelectedNodeBackground property. The selection rectangle gets grayed out when the TreeViewAdv loses focus. If the user still wishes to maintain the node’s active colors, then the InactiveSelectedNodeBackground and InactiveSelectedNodeForeColor properties can be set.


HideSelection property should be set to false to effect this setting.

TreeViewAdv Properties Description
SelectedNodeBackground Paints the background of the selected node.
InactiveSelectedNodeBackground Indicates the background of the selected node when the control is not focused.
InactiveSelectedNodeForeColor Indicates the text color of the selected node when not focused.
this.treeViewAdv1.InactiveSelectedNodeBackground = new Syncfusion.Drawing.BrushInfo(Syncfusion.Drawing.GradientStyle.ForwardDiagonal, System.Drawing.Color.Ivory, System.Drawing.Color.DarkOrange);
this.treeViewAdv1.InactiveSelectedNodeForeColor = System.Drawing.Color.SteelBlue;
Me.treeViewAdv1.InactiveSelectedNodeBackground = New Syncfusion.Drawing.BrushInfo(Syncfusion.Drawing.GradientStyle.ForwardDiagonal, System.Drawing.Color.Ivory, System.Drawing.Color.DarkOrange)
Me.treeViewAdv1.InactiveSelectedNodeForeColor = System.Drawing.Color.SteelBlue

Paint Active and Inactive Nodes

Foreground Settings

Foreground Settings for the tree node text

Using the Text and TextColor property, individual node’s text can be edited and colored respectively.

Using the Font and the ForeColor properties of the control, the text and text color of the nodes can be set for all the nodes in the TreeView control.


The font style for individual nodes, can be set using the Font property available for individual nodes using NodeCollection Editor.

TreeViewAdv Properties Description
Font Specifies the Font style of the node text.
ForeColor Specifies the text color of the nodes.

Property Table

TreeViewAdv Properties Description
Text Sets text for the node.
TextColor Sets the color for the specific node text.


When you set the ForeColor property for TreeViewAdv control, it will get reflected in the Node’s TextColor property. User can change the color for specific nodes using TreeNodeAdv.TextColor property.

ForeGround Settings in WinForms TreeView

Drawing Selected Node Foreground

Painting the foreground of the Specified Nodes

User can paint specific nodes using the BeforeNodePaint event.

Event Table

TreeNodeAdv event Description
BeforeNodePaint Handled before a node is being painted.


OwnerDrawNodes property should be set to true while handling this event.

treeViewAdv Properties Description
OwnerDrawNodes Indicates if the BeforeNodePaint event will be fired before drawing a node.
this.treeViewAdv1.OwnerDrawNodes = true;

// Enabling Node's Foreground
private void treeViewAdv1_BeforeNodePaint(object sender, TreeNodeAdvPaintEventArgs e)
    if (e.Node.Index == 2 | e.Node.Index == 4)
Me.treeViewAdv1.OwnerDrawNodes = True

' Enabling Node's Foreground
Private Sub treeViewAdv1_BeforeNodePaint(ByVal sender As Object, ByVal e As TreeNodeAdvPaintEventArgs)
If e.Node.Index = 2 Or e.Node.Index = 4 Then
e.ForeColor = Color.Red
End If
End Sub

Drawing Selected Node Foreground in WinForms TreeView

Active Node Foreground Settings

SelectedNodeForeColor property lets you paint the selected node.

Property Table

treeViewAdv Properties Description
SelectedNodeForeColor Indicates the fore color of the node that is selected.
this.treeViewAdv1.SelectedNodeForeColor = System.Drawing.Color.Gray;
Me.treeViewAdv1.SelectedNodeForeColor = System.Drawing.Color.Gray

Post Default Drawing

Users can also draw on the node, after the default drawing routines have rendered the node appropriately. Users can do so by first turning on OwnerDrawnNodes in the tree and listening to the AfterNodePaint event.

Event Table

TooltipTreeNodeAdv event Description
AfterNodePaint Handled after a node is painted.

See Also

Image Overlaying

Border Settings

3D Border for TreeView

The following properties sets 3D border for the treeview.

Property Table

TreeViewAdv Property Description
BorderStyle Sets the border style for the Treeview control.


- a normal border,


- 3D appearance.
Border3DStyle Indicates the style of the 3D border when BorderStyle is set to Fixed3D.RaisedOuter
SunkenOuterRaisedInnerSunkenInnerRaisedEtchedBumpSunken (Default)Adjust Flat

Border in WinForms TreeView

2D Border for TreeView

The following properties let you set customized 2D border.


The settings will effect only when TreeViewAdv.BorderStyle property is set to FixedSingle.

TreeViewAdv Property Description
BorderColor Indicates the color of the 2D border.
BorderSides Specifies the sides of the control to which border should be set.
BorderSingle Indicates the 2D border style. The options are,Solid (Default),Dotted,Dashed,Inset,Outset,None.
this.treeViewAdv1.BorderColor = System.Drawing.Color.SteelBlue;
this.treeViewAdv1.BorderSingle = System.Windows.Forms.ButtonBorderStyle.Dashed;
this.treeViewAdv1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
Me.treeViewAdv1.BorderColor = System.Drawing.Color.SteelBlue
Me.treeViewAdv1.BorderSingle = System.Windows.Forms.ButtonBorderStyle.Dashed
Me.treeViewAdv1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle

Two Dimension Border in WinForms TreeView


TreeViewAdv architecture gives a neat look by using the gutter space and indentation features.


The space on the left side of a TreeViewAdv control is the gutter space which acts as a left margin to the control. It can be modified using GutterSpace property. By default it is 3.

this.treeViewAdv1.GutterSpace = 7;
Me.treeViewAdv1.GutterSpace = 5


The space between the parent node and the child node is the Indentation. It indicates the indent of the child nodes from the parent node. By providing value to the Indent property of the TreeViewAdv control, Indentation can be altered. Default value is 19.

this.treeViewAdv1.Indent = 21
Me.treeViewAdv1.Indent = 21

Spacing in WinForms TreeView

Visual Style

VisualStyles provides rich and professional look and feel UI for the TreeViewAdv control. Some of the available VisualStyles are as follows:

  • Default
  • Office2007
  • Office2010
  • Metro
  • Office2016Colorful
  • Office2016White
  • Office2016Black
  • Office2016DarkGray

The visual style can be applied for the TreeViewAdv using Style property.

//Set the visual Style of the TreeViewAdv control.
this.treeViewAdv1.Style = Syncfusion.Windows.Forms.Tools.TreeStyle.Office2016Colorful;
'Set the visual Style of the TreeViewAdv control.
Me.treeViewAdv1.Style = Syncfusion.Windows.Forms.Tools.TreeStyle.Office2016Colorful

Visual Style in WinForms TreeView