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.

TreeView6.gif

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

TreeView Output 1

TreeView Output 2

TreeView Output 3

Summary

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

Up Next
    Ebook Download
    View all
    Learn
    View all