Treeview Dynamically Add items in WPF C#

Treeview Dynamically in WPF C#


Step 1) Create WPF Project  using C# 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.
            TreeViewItem root = TreeView1.SelectedItem as TreeViewItem;
            if (root != null)
            {
                TreeViewItem subItem = new TreeViewItem();
                subItem.Header = txtNode.Text;
                root.Items.Add(subItem);
                root.IsExpanded = true;
              //Expand the Node.
            }
            else MessageBox.Show("Select root/subitem");

Step 7)  Run the Application

Click on "Add Node"

Tags:Treeview Dynamically Add items in WPF C#,Treeview Dynamically  in WPF C#,dynamically add items in treeview wpf,TreeView dynamically add items in wpf using C#,TreeView Programatically add items in wpf using C#,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.cs

 

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

namespace Wpfone
{
    /// <summary>
    /// Interaction logic for TreeViewDemo_dynamic.xaml
    /// </summary>
    public partial class TreeViewDemo_dynamic : Page
    {
        public TreeViewDemo_dynamic()
        {
            InitializeComponent();
        }

        private void btnAddNode_Click_1(object sender, RoutedEventArgs e)
        {
            stackpanel1.Opacity = 0;
            TreeView1.Background = new SolidColorBrush(Color.FromRgb(255, 255, 255));
            TreeViewItem root = TreeView1.SelectedItem as TreeViewItem;
            if (root != null)
            {
                TreeViewItem subItem = new TreeViewItem();
                subItem.Header = txtNode.Text;

                root.Items.Add(subItem);
                root.IsExpanded = true;
            }
            else MessageBox.Show("Select root/subitem");
        }

        private void btnAdd_Click_1(object sender, RoutedEventArgs e)
        {
            stackpanel1.Opacity = 1;
            TreeView1.Background = new SolidColorBrush(Color.FromRgb(150, 150, 10));
        }
    }
}