Scroll To Top
Reader Level:

How to Manually Populate a TreeView in WPF Using F#

By Dea Saddler on Aug 10, 2011
This article is a demonstration regarding how you can manually populate a TreeView in WPF using F#.Take a quick review to learn.

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




Gets the browser-specific adapter for the control


Get/set the border color of the web control


Get/set the height of the web server control


Get/set the maximum numbers of tree levels to bind to the TreeView control


Get/set a value indicating whether expansion node indicators are displayed


Get/set the width of the web server control


Get/set the tab index of the web server control


Get/set the skin to apply to the control

Methods of TreeView control




Enables the redrawing of the TreeView


Expand all the tree nodes


Retrieves the node that is at the specified point


Provides node information, given at a point


Starts a drag-and-drop operation


Releases all resources used by the component


Create the Graphics for the control


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.

New Project Dialog Box

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.

    Solution Explorer

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

    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()
        (let animalBranch = new TreeViewItem(Header="Languages")
            (let branch = new TreeViewItem(Header=".NET version")
             let dogs = [".NET3.0";".NET3.5";".NET 4.0"]
             addSubItems dogs branch
             branch) |>ignore
            (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
            (let branch = new TreeViewItem(Header=".NET Code Behind")
             let primates = ["C#";"Visual Basic";"F#"]
             addSubItems primates branch
             branch) |> ignore
         animalBranch) |> ignore
        (let branch = new TreeViewItem(Header="Books")
         let minerals = ["F# Books";"WPF Books";"FrameWork Books"]
         addSubItems minerals branch
         branch) |> ignore
        (let branch = new TreeViewItem(Header="WebSites")
         let vegetables = ["";"vbdotnetheaven";""]
         addSubItems vegetables branch
         branch) |> ignore
    let window = new Window(Title="WPF TreeView using F#",
    #if COMPILED
         let app =  Application() in
        app.Run(window) |> ignore

    TreeView Example

    TreeView Example.

    Step 5: Now press F5 to execute the code.


    TreeView Output1

    TreeView Output2

    TreeView Output3


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