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.
Step3- Write the following code in the Program.fs window; your window will look like below.
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#.