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.

NOTE

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.

C#

this.treeViewAdv1.TransparentControls = true;

VB.NET

Me.treeViewAdv1.TransparentControls = True

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.

C#

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

VB.NET

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

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.

NOTE

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.

C#

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;

VB.NET

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

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.

NOTE

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.

NOTE

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.

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.

NOTE

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.

C#

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)
    {
        e.ForeColor=Color.Red;
    }
}

VB.NET

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

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.

C#

this.treeViewAdv1.SelectedNodeForeColor = System.Drawing.Color.Gray;

VB.NET

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. FixedSingle - a normal border, Fixed3D - 3D appearance.
Border3DStyle	Indicates the style of the 3D border when BorderStyle is set to Fixed3D.RaisedOuter SunkenOuterRaisedInnerSunkenInnerRaisedEtchedBumpSunken (Default)Adjust Flat

2D Border for TreeView

The following properties let you set customized 2D border.

NOTE

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.

C#

this.treeViewAdv1.BorderColor = System.Drawing.Color.SteelBlue;
this.treeViewAdv1.BorderSingle = System.Windows.Forms.ButtonBorderStyle.Dashed;
this.treeViewAdv1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;

VB.NET

Me.treeViewAdv1.BorderColor = System.Drawing.Color.SteelBlue
Me.treeViewAdv1.BorderSingle = System.Windows.Forms.ButtonBorderStyle.Dashed
Me.treeViewAdv1.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle

Spacing

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

GutterSpace

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.

C#

this.treeViewAdv1.GutterSpace = 7;

VB.NET

Me.treeViewAdv1.GutterSpace = 5

Indentation

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.

C#

this.treeViewAdv1.Indent = 21

VB.NET

Me.treeViewAdv1.Indent = 21

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.

C#

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

VB.NET

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