How to use the wpf treeview with nested objects of different types

Question

I have two classes that I'd like to show in a treeview.

In my main window, I have an observable collection of a certain type of object, call it object a. Object a contains an observable collection of another type of object, object b. Each object b contains an observable collection of object b's.

For example, I might have something that looks like this

ListOfObjectA's

-ObjectA1

--ListOfObjectB's

---ObjectB

----ListOfObjectB's

-----ObjectB

-ObjectA2

--ListOfObjectB's

---ObjectB

What should my xaml look like to bind the treeview to something like that?

Sorry if I'm not explaining this well, I'm new to wpf.

Answer 1

I know enough WPF to be really dangerous, but I'm pretty sure the HierarchicalDataTemplate is the solution to your problem. My XAML skill are iffy, so I am can't write good example code for you. Here is how I used the HierarchicalDataTemplate in my project. I hope this gives you some good ideas.

<TreeView Grid.Row="1" 
          Grid.Column="1" 
          ItemsSource="{Binding Children}" 
          SelectedItemChanged="TreeView_SelectedItemChanged" 
          ContextMenu="{StaticResource MenuContextMenu}">

  <TreeView.ItemTemplate>
    <HierarchicalDataTemplate  ItemsSource="{Binding Children}" >
      <!--<TextBlock Text="{Binding Path=ItemName}" Margin="5,0,5,0" />-->
      <Grid  ContextMenu="{StaticResource ContextMenu}"   >
        <TextBlock  Name="ShownItem" 
                          Text="{Binding Path=ItemName}" 
                          Margin="0,0,0,0" />

          <TextBox Name="EditBox" 
                 Text="{Binding Path=ItemName}" 
                 Visibility="{Binding Path=Visibility}"
                 Style="{StaticResource EditableTextBox}" 
                 IsVisibleChanged="EditBox_IsVisibleChanged"
                 PreviewKeyDown="EditBox_KeyDown"
                 Margin="0,2,0,2"
                   >

              </TextBox>

      </Grid>
     </HierarchicalDataTemplate>
  </TreeView.ItemTemplate>
</TreeView>

Answer 2

RB has the right idea. This is where WPF's ability to apply templates to normal .NET objects becomes very powerful.

You need to specify two HierarchialDataTemplates, one for objects of type a, and the other for objects of type b. Something like this:

<TreeView>
    <TreeView.Resources>
        <HierarchialDataTemplate TargetType="{x:Type local:a}">
            <!-- XAML to display objects of type a -->
        </HierarchialDataTemplate>
        <HierarchialDataTemplate TargetType="{x:Type local:b}">
            <!-- XAML to display objects of type b -->
        </HierarchialDataTemplate>
    </TreeView.Resources>
</TreeView>

You'll need to specify bindings for the ItemsSource property of each template so that WPF knows where to get child objects from. Also, you'll need to add an xmlns declaration to the root node specifying the namespace that the objects live in (represented by local in the sample code above).

Answer 3

Hi!

i have created tree view demo but i want to give header and when header is clicked it sort data. i want to create demo like this

header1………….header2……….header3

-parent1…………..parent2………..parent3

…-child1……………-child1………….child1

……child1……………-child1…………child1

-parent2…………..parent2………..parent2

…-child2……………-child2………….child2

……child……………-child2…………child2

parent3…………….parent3………..parent3

plz suggest any link or samples code. thank you!