Getting Started with Windows Forms Tree Navigator

18 Nov 20184 minutes to read

This section briefly describes how to design a Tree Navigator Control in a Windows Forms Application.

Assembly Deployment

The following list of assemblies needs to be added as reference to use Tree Navigator in any application,

NameSpace: Syncfusion.Windows.Forms.Tools

Assembly: Syncfusion.Tools.Windows

Dependent Assembly : Syncfusion.Shared.Base

Required assemblies

Description

Syncfusion.Tools.Windows

Syncfusion.Tools.Windows assembly contains classes that handles all UI operations, fundamentals and base classes of Tree Navigator Control.

Syncfusion.Shared.Base

Syncfusion.Shared.Base contains style related properties and various other controls which are used in Tree Navigator Control.

We can Implement Tree navigator in Two ways they are,

  • Adding Control Via Designer
  • Adding Control Manually in C#

Adding Control Via Designer

  1. Create a new Windows Forms Application Project in VS IDE through New Project Wizard.
  2. Then Drag and Drop the Tree Navigator control from the toolbox into the designer page.

Adding Tree Navigator Control Via Designer

  1. Once you drag drop the Tree Navigator into the designer page, the Tree Navigator will be added successfully into the application with the required libraries.

Drag Drop the Tree Navigator

Adding control manually in C#

Tree Navigator can be added through code-behind by following the below steps.

  1. Include the namespaces Syncfusion.Windows.Forms and Syncfusion.Windows.Forms.Tools which are needed for the Control.
//Namespaces.

		using Syncfusion.Windows.Forms.Tools;

		using Syncfusion.Windows.Forms;
Namespaces.

		Imports Syncfusion.Windows.Forms

		Imports Syncfusion.Windows.Forms.Tools
  1. To add Tree Navigator Control to a Windows Forms Application through code, Create an instance of the Tree Navigator control and add it to the Form.
//Creates the Tree Navigator instance.

		TreeNavigator treeNavigator = new TreeNavigator();

		this.Controls.Add(treeNavigator);
Creates the Tree Navigator instance.

		Dim treeNavigator As TreeNavigator = New TreeNavigator()

		Me.Controls.Add(treeNavigator)

Adding TreeMenuItem to the control

 The Tree Navigator is populated with the collection of TreeMenuItem using the items property. we can add TreeMenuItem in two Ways,
 
 * Adding items manually in C#
 * Adding items through Designer 

The following code example allows you to add TreeMenuItem to the Tree Navigator.

//Adds items to the Tree Navigator.
this.treeNavigator.Header.HeaderText = "This PC";
TreeMenuItem treemenuitem1 = new TreeMenuItem();
this.treeNavigator.Items.Add(treemenuitem1);
treemenuitem1.Text = "Desktop";
TreeMenuItem treemenuitem2 = new TreeMenuItem();
this.treeNavigator.Items.Add(treemenuitem2);
treemenuitem2.Text = "Document";
TreeMenuItem treemenuitem3 = new TreeMenuItem();
this.treeNavigator.Items.Add(treemenuitem3);
treemenuitem3.Text = "Downloads";
'Adds items to the Tree Navigator.
Me.treeNavigator1.Header.HeaderText = "This PC"
Dim treemenuitem1 As TreeMenuItem = New TreeMenuItem()
Me.treeNavigator1.Items.Add(treemenuitem1)
treemenuitem1.Text = "Desktop"
Dim treemenuitem2 As TreeMenuItem = New TreeMenuItem()
Me.treeNavigator1.Items.Add(treemenuitem2)
treemenuitem2.Text = "Document"
Dim treemenuitem3 As TreeMenuItem = New TreeMenuItem()
Me.treeNavigator1.Items.Add(treemenuitem3)
treemenuitem3.Text = "Downloads"

The following steps allows you to add TreeMenuItem to the Tree Navigator through Designer,

  1. Once you drag drop the Tree Navigator into the designer page, the Tree Navigator will be added successfully into the application, you can see the Smart Tag on the top right corner.

  2. Click the Smart Tag button and select the items property from the listed properties.

Click Smart Tag button

  1. Then add items as shown below.

Adding the Items

WinForms Tree Navigator

In .NET Core, when adding child items to a TreeMenuItem directly from the Visual Studio Properties window, the default Collection Editor opens instead of the expected editor.
Workaround: Use the main Tree Navigator Collection Editor to add items, then configure the child items as needed. A permanent fix is in progress.