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.

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.

    #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

    TreeView Example

    TreeView Example.

    Step 5: Now press F5 to execute the code.

    Output

    TreeView Output1

    TreeView Output2

    TreeView Output3

    Summary

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

    Up Next
      Ebook Download
      View all
      Learn
      View all