How to Manually Populate a TreeView in WPF Using F#

Today I am going to explain how you can manually populate a TreeView control in WPF using F#. If you want to populate a TreeView Manually in WPF, you have to use a F# WPF Application template and need to add some reference.

A TreeView is a graphical user interface element that represents a hierarchical view of information. A TreeView is a window that can list multiple items in hierarchy like Directories in Windows Explorer. A TreeView can be seen in file manager applications. Where they allow the user to navigate the file system directories. A TreeView holds a collection of nodes so if you want to add a new node you need to define a new node and then you can add that node to the TreeView's collection. You can change the appearance of a TreeView with TreeView Style.

Properties of TreeView

Properties	Description
Adapter	Gets the browser-specific adapter for the control
BorderColor	Get/set the border color of the web control
Height	Get/set the height of the web server control
MaxDataBindDepth	Get/set the maximum numbers of tree levels to bind to the TreeView control
ShowExpandCollapse	Get/set a value indicating whether expansion node indicators are displayed
Width	Get/set the width of the web server control
TabIndex	Get/set the tab index of the web server control
SkinId	Get/set the skin to apply to the control

Methods of TreeView control

Methods	Description
EndUpdate	Enables the redrawing of the TreeView
ExpandAll	Expand all the tree nodes
GetNodeAt	Retrieves the node that is at the specified point
HitTest	Provides node information, given at a point
DoDragDrop	Starts a drag-and-drop operation
Dispose	Releases all resources used by the component
CreateGraphics	Create the Graphics for the control
CollapseAll	Collapses all the tree nodes

Getting Started

These are the steps to manually populate the Treeview in WPF using F#.

Step 1: First open a new project in F# using Visual Studio 2010 and select F# WPF application template and name it. As done in the following image.

Step 2: Now add the following references in your project by right-clicking on your project in the Solution Explorer.

• PresentationCore

• PresentationFramework

• WindowsBase

• System
  
  
• System.Xaml

Step 3: When add all the references. Your Solution Explorer will look like following image.

Step 4: Now click on Program.fs file and write the following code in the Program.fs window; your window will look like below.

#light
  
 open System
 open System.Windows
 open System.Windows.Controls
 open System.Windows.Input
 open System.Windows.Media
  
 let addSubItems items (branch:TreeViewItem) = items |> Seq.iter (fun item ->
     item |> branch.Items.Add |> ignore)
  
 let tree = new TreeView()
  
 tree.Items.Add
    (let animalBranch = new TreeViewItem(Header="Languages")
  
     animalBranch.Items.Add
        (let branch = new TreeViewItem(Header=".NET version")
         let dogs = [".NET3.0";".NET3.5";".NET 4.0"]
         addSubItems dogs branch
         branch) |>ignore
  
     animalBranch.Items.Add
        (let branch = new TreeViewItem(Header=".NET Languages")
         branch.Items.Add(new TreeViewItem(Header="ASP.NET")) |>ignore
         branch.Items.Add(new Button(Content="VB.NET")) |>ignore
         branch.Items.Add(".NET") |>ignore
         branch) |> ignore
  
     animalBranch.Items.Add
        (let branch = new TreeViewItem(Header=".NET Code Behind")
         let primates = ["C#";"Visual Basic";"F#"]
         addSubItems primates branch
         branch) |> ignore
     animalBranch) |> ignore
      
 tree.Items.Add
    (let branch = new TreeViewItem(Header="Books")
     let minerals = ["F# Books";"WPF Books";"FrameWork Books"]
     addSubItems minerals branch
     branch) |> ignore
  
 tree.Items.Add
    (let branch = new TreeViewItem(Header="WebSites")
     let vegetables = ["c-sharpcorner.com";"vbdotnetheaven";"Mindcracker.com"]
     addSubItems vegetables branch
     branch) |> ignore
   
 let window = new Window(Title="WPF TreeView using F#",
                         Content=tree)
    
 #if COMPILED
 [<STAThread()>]
 do
     let app =  Application() in
     app.Run(window) |> ignore
 #endif

Step 5: Now press F5 to execute the code.

Output

Summary

In this article I have discussed how to populate a TreeView manually in WPF using F#.