Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Implement WPF treeview with different Parent Nodes a well as different child nodes?

I want to implememt a tree view with has the following structure.....

[RootNode] <---- Root of tree
--[ParentNode P1] <---- Object of ModelClass P1
----[ChildNode C1] <----- Object of ModelClass C1 (have children of different type as well)
----[ChildNode C2] <----- Object of ModelClass C2 (have children of different type as well)
----[ChildNode C3] <----- Object of ModelClass C3 (have children of different type as well)
--[ParentNode Q1] <---- Object of ModelClass Q1
----[ChildNode B1] <----- Object of ModelClass B1 (have children of different type as well)
----[ChildNode B2] <----- Object of ModelClass B2 (have children of different type as well)
----[ChildNode B3] <----- Object of ModelClass B3 (have children of different type as well)
--[ParentNode R1] <---- Object of ModelClass R1
----[ChildNode A1] <----- Object of ModelClass A1 (have children of different type as well)
----[ChildNode A2] <----- Object of ModelClass A2 (have children of different type as well)
----[ChildNode A3] <----- Object of ModelClass A3 (have children of different type as well)

I have looked at many of the solution proposed on this site as well as on the web.....but just cant figure out how to do it.....

This is my first attempt on Wpf and this is a crucial requirement ......

Also finding hard to make the Object Model for the above different classes .....

All the classes displayed above have Other properties as well including their child nodes... i dont want to display all properties only the child nodes

Totally puzzled by ... seeing different solution

It would be really great if i could recieve some help in this regard...

Thanks

like image 574
Ankesh Avatar asked May 18 '11 13:05

Ankesh


1 Answers

Hierarchial Data Templates work if you use custom collections.... I made my classes like this :

public class EntityBase :ObservableCollection<object>
{

}

public class Parent : EntityBase
{

}  

public class ChildA : EntityBase // Dont make it a collection if it has noe childern to be displayed so dont inherit for EntityBase
{
   //Child Properties
}


public class ChildB : EntityBase
{
//Child Properties
}  

Now when you finally bind the data to you TreeView you'll make ChildA and ChildB items as Child items of Parent object i.e

    public ObservableCollection<object> GetData()
    {
         var temp = new ObservableCollection<object>();
         Parent parent = new Parent(); // Root Node
         temp.Add(parent);
         parent.Add(new ChildA()); // ChildA as Child1 of Parent

         parent.Add(new ChildA()); // ChildA as Child2 of Parent

         parent.Add(new ChildB()); // ChildB as Child3 of Parent

         parent.Add(new ChildB()); // ChildB as Child4 of Parent

         return temp;

    }  

Finally The Hierarchial data templates will look like..

<TreeView Name="test" Grid.Row="0" ItemsSource="{Binding Path=TreeData,Source={StaticResource ResourceKey=DataSource}}">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type EntityLayer:Parent}" ItemsSource="{Binding}">
                <StackPanel>
                    <TextBlock>Parent</TextBlock>
                </StackPanel>
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate DataType="{x:Type EntityLayer:ChildA}" ItemsSource="{Binding}">
                <StackPanel>
                    <TextBlock Text="{Binding Path = Name}"></TextBlock>
                </StackPanel>
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate DataType="{x:Type EntityLayer:ChildB}" ItemsSource="{Binding}">
                <StackPanel>
                    <TextBlock Text="{Binding Path = Name}"></TextBlock>
                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.Resources>
    </TreeView>
like image 167
Ankesh Avatar answered Sep 22 '22 02:09

Ankesh