Treeview Dynamically Add items in WPF VB.NET

Treeview Dynamically Add items in WPF VB.NET


Step 1) Create WPF Project  using Vb.NET 4.0/4.5

Step 2) Add a Page  ,name it as TreeViewdynamic.xaml

Step 3)  Add TreeView control  as shown below

        <TreeView x:Name="TreeView1" HorizontalAlignment="Left" Height="233" VerticalAlignment="Top" Width="245" FontSize="16" Foreground="Beige">
            <TreeViewItem Header="root">
               
            </TreeViewItem>
        </TreeView>
 Add single treeview item  name it as "root"


Step 4) Add Button control which will allow us to do popup screen for adding items

        <Button Content="Add Node" Width="75" Height="30" x:Name="btnAdd"  Click="btnAdd_Click_1" Margin="10,238,215,32"/>

Step 5) Add StackPanel with  2 controls in it

•  TextBlock   
• Button control

        <StackPanel Orientation="Vertical" Height="120" x:Name="stackpanel1" Opacity="0"  HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="29,0,0,62">
            <TextBox Height="30" TextWrapping="Wrap" x:Name="txtNode" Text=""  Width="204"/>
            <Button Content="Add Node" Width="75" x:Name="btnAddNode" Click="btnAddNode_Click_1"/>
        </StackPanel>

Step 6)  Add Button Event handler for "Add Node"

•  Which will set StatckPanel Opacity to  1(fully visible) 
• stackpanel1.Opacity = 1
•  Now focus should goto StatckPanel rather than treeview control, so set background color for
  TreeView to Gray 
• TreeView1.Background = New SolidColorBrush(Color.FromRgb(100, 100, 100))

          
Step 7)  Button Inside StatckPanel, Which will  Add items to TreeView.

            stackpanel1.Opacity = 0
             //MakeTreeview background color to white
            TreeView1.Background = New SolidColorBrush(Color.FromRgb(255, 255, 255));
           //Select Root node. then add item otherwise MessageBox will popup.
            Dim root As TreeViewItem = TryCast(TreeView1.SelectedItem, TreeViewItem)
            If root IsNot Nothing Then
                Dim subItem As New TreeViewItem()
                subItem.Header = txtNode.Text

                root.Items.Add(subItem)
                root.IsExpanded = True
            Else
                MessageBox.Show("Select root/subitem")
            End If

Step 7)  Run the Application

Click on "Add Node"

Tags:Treeview Dynamically Add items in WPF VB.NET,Treeview Dynamically  in WPF VB.NET,dynamically add items in treeview wpf,TreeView dynamically add items in wpf using VB.NET,TreeView Programatically add items in wpf using VB.NET,TreeView-in-wpf

Complete Source Code

TreeViewDemo_dynamic.XAML

<Page x:Class="Wpfone.TreeViewDemo_dynamic"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      mc:Ignorable="d"
    Title="TreeViewDemo_dynamic" Width="392" Height="400">

    <Grid ShowGridLines="True" HorizontalAlignment="Right" Width="392">
        <Grid.RowDefinitions>
            <RowDefinition Height="50"></RowDefinition>
            <RowDefinition Height="350"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock  Width="300" Text="TreeView Dynamically Add Items in WPF"
                    Height="30"
                     FontSize="16" Foreground="Gray"
                    Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="0"
                    >
            <TextBlock.Background>
                <LinearGradientBrush StartPoint="0.30,0.2" EndPoint="0.30,0.99">
                    <GradientStop Color="Yellow"  Offset="0.5"></GradientStop>
                    <GradientStop Color="YellowGreen"  Offset="1.5"></GradientStop>
                </LinearGradientBrush>
            </TextBlock.Background>
        </TextBlock>
        <TreeView x:Name="TreeView1"
                  HorizontalAlignment="Left" Height="233" VerticalAlignment="Top"
                  Width="246" FontSize="16" Foreground="Beige"
                  Grid.Column="0" Grid.Row="01" Margin="75,30,0,0" Grid.ColumnSpan="2"
                  >
            <TreeViewItem Header="root"/>
        </TreeView>
        <Button Content="Add Node" Width="75" Height="30"
                x:Name="btnAdd"  Click="btnAdd_Click_1"
               
                Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="01" Margin="162,284,155,36"
                />
        <StackPanel Orientation="Vertical" Height="120" x:Name="stackpanel1"
                    Opacity="0"  HorizontalAlignment="Left" VerticalAlignment="Bottom"
                   
                    Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="01" Margin="94,0,0,87"
                    >
            <TextBox Height="30" TextWrapping="Wrap" x:Name="txtNode" Text=""  Width="204"/>
            <Button Content="Add Node" Width="75" x:Name="btnAddNode" Click="btnAddNode_Click_1"/>
        </StackPanel>

    </Grid>
</Page>

 

TreeViewDemo_dynamic.XAML.vb

 

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes

Namespace Wpfone
    ''' <summary>
    ''' Interaction logic for TreeViewDemo_dynamic.xaml
    ''' </summary>
    Public Partial Class TreeViewDemo_dynamic
        Inherits Page
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub btnAddNode_Click_1(sender As Object, e As RoutedEventArgs)
            stackpanel1.Opacity = 0
            TreeView1.Background = New SolidColorBrush(Color.FromRgb(255, 255, 255))
            Dim root As TreeViewItem = TryCast(TreeView1.SelectedItem, TreeViewItem)
            If root IsNot Nothing Then
                Dim subItem As New TreeViewItem()
                subItem.Header = txtNode.Text

                root.Items.Add(subItem)
                root.IsExpanded = True
            Else
                MessageBox.Show("Select root/subitem")
            End If
        End Sub

        Private Sub btnAdd_Click_1(sender As Object, e As RoutedEventArgs)
            stackpanel1.Opacity = 1
            TreeView1.Background = New SolidColorBrush(Color.FromRgb(150, 150, 10))
        End Sub
    End Class
End Namespace