WPF Select Item in TreeView control in VB.NET

Introduction

Here in this article I am Discussing about TreeView control and also how we can get selected item from a TreeView on Button Click Event. A TreeView control is used to show the information in Hierarchical format that is in Parent Child relationship. Usually all childs of a given Node are of the same type Where a Parent node can be Expanded or Collapse. We can use the TreeView control to show information from a wide variety of Data Sources such as an Site-Map file, XML file, String or from a Database. We use the TreeView in our WPF programs to literally provides a View of a Tree.  Windows Explorer is an example of the TreeView control. The below Image is showing the TreeView control in ToolBox.

c
 

<TreeView></TreeView>

The above tag in WPF represents the TreeView control in WPF.

TreeView Items

A TreeView control have a collection of TreeViewItem. It has a attribute Header which Displayed on the View.

<TreeViewItem></TreeViewItem>

Above Tag in WPF represents TreeViewItem in WPF.

Properties of TreeView control

• BackGround:- This property gets or sets a Brush that describes the BackGround colour of a control.

• IsEnabled:- This is a Dependency Property. It determines a value that shows whether this Element is Enabled in the User Interface or not.

• Height:- This property gets or sets the suggested Height of the Element.

• Width:- This property gets or sets the Width of the Element.

• Margin:- This property gets or sets the outer Margin of the Element.

• MaxHeight:- This property gets or sets the Maximum Height Constraint of the Element.

• MaxWidth:- This property gets or sets the Maximum Width Constraint of the Element.

• MinHeight:- This property gets or sets the Minimum Height Constraint of the Element.

•   MinWidth:- This Property gets or sets the Minimum Width Constraint of the Element. 

Below is the image of the TreeView  control properties.

 

TreeViewItem Selected Event:-

This Event occurs when we select any of the Item in the TreeView Control. Here in the Example we are selecting the Items of the TreeView control and Showing them on Button Click Event. When we select any of the node either Parent Node or Child Node of the TreeView control and click on Button a MessageBox will display with the Currently selected Node of the TreeView control and if we click Button without selecting any Node it will show the MessageBox with a Message "Currently you have not  selected any Item".

When we Drag the controls and sets all properties. Our window will look like below Image.

 

This is my XAML code

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="373" Width="358" Background="White"  >
    <DockPanel LastChildFill="True" Background="Coral">
        <DockPanel.Resources>
            <Style TargetType="{x:Type TreeViewItem}">
                <EventSetter Event="Selected" Handler="TreeViewItem_Selected" />
            </Style>
        </DockPanel.Resources>
        <Button Click="Button_Click" DockPanel.Dock="Bottom" Content="Dispaly Selected Item"MaxHeight="23"
MaxWidth="120" Background="White" Height="23" Width="120" />
        <TreeView FontSize="14" Name="trvwTree" Background="SkyBlue" >
            <TreeViewItem Header="New Technologies" IsExpanded="True" Foreground="White" >
                <TreeViewItem Header="Microsoft" Foreground="Red" >
                    <TreeViewItem Header="WPF" Foreground="Pink" />
                    <TreeViewItem Header="SilverLight" Foreground="Pink"  />
                </TreeViewItem>
                <TreeViewItem Header="Books"  Foreground="Red">
                    <TreeViewItem Header="WPF Books" Foreground="Pink" />
                    <TreeViewItem Header="SilverLight Books" Foreground="Pink" />
                </TreeViewItem>
            </TreeViewItem>
            <TreeViewItem Header="Title" IsExpanded="True" Foreground="White">
                <TreeViewItem Header="Book Title"  Foreground="Red">
                    <TreeViewItem Header="WPF 4 Unleashed" Foreground="Pink" />
                    <TreeViewItem Header="Pro.WPF.in.VB.2010" Foreground="Pink" />
                    <TreeViewItem Header="SilverLight 4 Unleashed" Foreground="Pink" />
                </TreeViewItem>
                <TreeViewItem Header="Chapters"  Foreground="Red">
                    <TreeViewItem Header="6 Chapters" Foreground="Pink" />
                    <TreeViewItem Header="33 Chapters" Foreground="Pink" />
                    <TreeViewItem Header="22 Chapters" Foreground="Pink" />
                </TreeViewItem>
            </TreeViewItem>
        </TreeView>
    </DockPanel>
</Window>

The NameSpaces which I have used are shown below.

Imports System
Imports System.Windows
Imports System.Windows.Controls

This is my xaml.VB code

    Private Sub TreeViewItem_Selected(sender As Object, e As RoutedEventArgs)
        Dim trvitem As TreeViewItem = TryCast(sender, TreeViewItem)
        If trvitem Is e.OriginalSource Then
            Console.WriteLine(trvitem.Header)
            Console.WriteLine(trvitem.Items.Count)
        Else
            Console.WriteLine("Parent of selected")
            Console.WriteLine(trvitem.Header)
            Console.WriteLine(trvitem.Items.Count)
        End If
    End Sub
    Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
        Dim trvitem As TreeViewItem = TryCast(trvwTree.SelectedItem, TreeViewItem)
        If trvitem IsNot Nothing Then
            MessageBox.Show("Currently Selected Item From TreeView: " &Convert.ToString(trvitem.Header),
            Title)
        Else
            MessageBox.Show("Currently you have not selected any item", Title)
        End If
    End Sub

When we run the application it shows output like below.

 

When we Expand all the Nodes of the TreeView it will look like Below Window.

 

When we Select any node of the TreeView control and Click the Button a MessageBox will display Like Below image.

 

When we click on Button without selecting any Item. The MessageBox will show the Message like below image.

 

Summary

In this Article We learned about the TreeView and how to get Selected item from a TreeView on Button click.