TreeView Control in F#


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




Get/set the back ground color of the control


Get/set the mode in which the control is drawn


Gets the collection of tree nodes that are assigned to the tree view control


Get/set the parent container of the control


Get/set the window region associated with the control


Get/set the site of the control


Get/set width of the control


Get/set the name of the control


Get/set the space between controls


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 =
                Leaf "Even Numbers",
                Node(Leaf "two", Leaf "three")),
                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
// create the form object
let form =
    let temp = new Form()
    let treeView = new TreeView(Dock = DockStyle.Fill)
    treeView.Nodes.Add(mapTreeToTreeNode tree) |> ignore

Step4- Now press F5 to execute the code.


TreeView Output 1

TreeView Output 2

TreeView Output 3


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

Up Next
    Ebook Download
    View all
    View all