adding child nodes to a treeview control in wpf,c#

Question

Hi ,

i have implemented a treeview control on a buttonclick event like this:

namespace TaxonomyTreeview
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        ObservableCollection<TaxonomyData> _TaxonomyCollection = new ObservableCollection<TaxonomyData>();

        public Window1()
        {
            InitializeComponent();
        }

        public ObservableCollection<TaxonomyData> TaxonomyCollection
        { get { return _TaxonomyCollection; } }

        private void SelectedTaxonomyChanged(object sender,
                         RoutedPropertyChangedEventArgs<Object> e)
        {
            TaxonomyData taxo = taxonomytree.SelectedItem as TaxonomyData;
            if (taxo != null)
            {
                MessageBox.Show("" + taxo.Tid);
            }
        }

        public class TaxonomyData
        {
            private string _name;
            private string _tid;

            public string Tid
            {
                get { return _tid; }
                set { _tid = value; }
            }

            public string Name
            {
                get { return _name; }
                set { _name = value; }
            }

            public TaxonomyData(string name, string tid)
            {
                Name = name;
                Tid = tid;
            }
        }

        private void populate_Click(object sender, RoutedEventArgs e)
        {
            taxonomytree.Items.Clear();
            TaxonomyCollection.Add(new TaxonomyData("Taxonomy1", "1"));

            taxonomytree.Items.Add(TaxonomyCollection[0]);
        }
    }
}

The xaml code is :

<Window x:Class="TaxonomyTreeview.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="435" Width="458" Loaded="Window_Loaded">
<Grid>

    <TextBox Height="23" Margin="20,9,0,0" Name="startvid" VerticalAlignment="Top" HorizontalAlignment="Left" Width="120" />
    <TextBox Height="23" Margin="165,9,151,0" Name="endvid" VerticalAlignment="Top" />
    <Button Height="23.78" HorizontalAlignment="Right" Margin="0,8.22,11,0" Name="populate" VerticalAlignment="Top" Width="115" Click="populate_Click">Populate</Button>
    <TreeView HorizontalAlignment="Left" Margin="20,53,0,144" Width="120"  Name="taxonomytree"  ItemsSource="{Binding Window1.TaxonomyCollection}" 
      SelectedItemChanged="SelectedTaxonomyChanged">
                    <TreeView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Path=Name}"  />
            </DataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</Grid>
</Window>

As i want to display, the structure in a hierarchy, i want to know what is the best method to add a child node to this

Please help

Answer 1

Your data structure doesn't support parent/child relationships, so your UI's not going to be able to either.

The first place to start is by adding a Children property of type ObservableCollection<TaxonomyData> to your TaxonomyData class.

To display these items, you need to use a HierarchicalDataTemplate. This is just like a normal DataTemplate except that it's got an ItemsSource property that tells it where to get the item's child objects. The template itself produces the header of the TreeViewItem that it generates, and the ItemsSource tells it where to get the child items:

<HierarchicalDataTemplate DataType="{x:Type TaxonomyData}"
                          ItemsSource="{Binding Children}">
   <TextBlock Text="{Binding Name}"/>
</HierarchicalDataTemplate>

To add new items, you make your Click event handler look something like this:

if (taxonomytree.SelectedItem == null)
{
   TaxonomyCollection.Add(new TaxonomyData("foo", "bar");
}
else
{
   TaxonomyData td = (TaxonomyData) taxonomytree.SelectedItem;
   td.Children.Add(new TaxonomyData("foo", "bar"));
}

That will add a child the currently-selected item, and if there is no currently-selected item, it will add it to the top-level collection.

In no event should your code touch the Items property of the TreeView, as your present code does. The TreeView is populated by data binding. Manage the TaxonomyCollection collection, and data binding will take care of the TreeViews items for you.

Answer 2

but that doesn't sole the problem

How would i assign a child object to "Taxonomy1","Tid=1"

My question was to display the data in a hierarchical data format in the treeview in real time at runtime?

This is a solution but the original question was to display it in a hierarchy like this:

Vocabulary 1

|

| - Taxonomy1, Tid1

| - Taxonomy2, Tid2

Vocabulary 2

|

| - Taxonomy 1, Tid3

| - Taxonomy 2, Tid4