TreeView Control in F#

Introduction

The TreeView control provides a seamless way to consume information from hierarchical data sources like an XML file and then display that information. This control can be bound to a hierarchical data source like the SiteMapDataSource or XmlDataSource. This control is for multi-purpose data visualization systems that can display information as a TREE, a GRID or a combination of both.

The TreeView control uses a <table> tag without adapter. Control adapters can be used so that nested <ul> tags are rendered instead. This control display hierarchical control list of items using lines to connect related items in a hierarchy. Each item consists of an optional bitmap and a label. The good example of the TreeView control is the Windows Explorer. Apart from statically data binding the TreeView control with contents of an XML file.

The TreeView control has been designed so that it integrates into the look and feel of the WebSites. If you will expand several nodes of the Tree, then select a node. You will see that:

The TreeView will maintain its expansion state.
The page's sample content has changed to include several instances of the selected node values.
The treeView's selected node is visually identified.

The TreeView control consist of nodes; the three types of nodes you can add to a TreeView control are:

Root- A root node is a node without parent node. A root node can have one or more child nodes.
Parent- Parent node contains a parent node and one or more child nodes.
Leaf- Leaf node has no child nodes.

Properties of TreeView Control

Properties	Description
BackColor	Get/set the back ground color of the control
DrawMode	Get/set the mode in which the control is drawn
Nodes	Gets the collection of tree nodes that are assigned to the tree view control
Parent	Get/set the parent container of the control
Region	Get/set the window region associated with the control
Site	Get/set the site of the control
Width	Get/set width of the control
Name	Get/set the name of the control
Margin	Get/set the space between controls
Size	Get/set the Height and width of the control

Getting Started

Step1- First open a new project in F# using Visual Studio 2010, and give a name to it.

Step2- Click on Program.fs file in Solution Explorer.

Solution Explorer

Step3- Write the following code in the Program.fs window; your window will look like below.

TreeView Example
open System.Drawing
open System.Windows.Forms

// The tree type
type 'n Tree =
| Node of 'n Tree * 'n Tree
| Leaf of 'n
// The definition of the tree
let tree =
Node(
Node(
Leaf "Even Numbers",
Node(Leaf "two", Leaf "three")),
Node(
Node(Leaf "six", Leaf "eight"),
Leaf "ten"))
// A function to transform our tree into a tree of controls
let mapTreeToTreeNode t =
let rec mapTreeToTreeNodeInner t (node : TreeNode) =
match t with
| Node (l, a) ->
let newNode = new TreeNode("Node")
node.Nodes.Add(newNode) |> ignore
mapTreeToTreeNodeInner l newNode
mapTreeToTreeNodeInner a newNode
| Leaf x ->
node.Nodes.Add(new TreeNode(sprintf "%A" x)) |> ignore
let root = new TreeNode("Root")
mapTreeToTreeNodeInner t root
root
// create the form object
let form =
let temp = new Form()
let treeView = new TreeView(Dock = DockStyle.Fill)
treeView.Nodes.Add(mapTreeToTreeNode tree) |> ignore
treeView.ExpandAll()
temp.Controls.Add(treeView)
temp
Application.Run(form)

Step4- Now press F5 to execute the code.

Output

Summary

In this article I have discussed about TreeView Control in F#.