How to populate a WPF TreeView node from a datasource?

Question

I'm having a question about populating a treeview control node.

  <TreeView>
    <TreeViewItem Header="Node1">
      <TreeViewItem Header="Subnode1"/>
       ...
      <TreeViewItem Header="Subnode10"/>
    </TreeViewItem>
    <TreeViewItem Header="Node2">
      <TreeViewItem Header="Subnode1"/>
       ...
      <TreeViewItem Header="Subnode10"/>
    </TreeViewItem>
  </TreeView>

Now, my problem is that I have a observableCollection that holds infrmation for subnodes that go into "Node1", and another observableCollection that holds information about subnodes that go into "Node2". Until runtime, I don't know which elements will be in the node1 nor how many of them will be... Does anyone know how can I bind the information from ObservableCollections to the nodes/subnodes?

Thanks in advance,
Marko Vuksanovic.

Answer 1

Also an example of how to programatically populate a TreeView control would be very useful.......

Answer 2

Did you try something like this

<Window.Resources>

<ObjectDataProvider ObjectType="{x:Type loc:MyData}" x:Key="odp1"></ObjectDataProvider>

</Window.Resources>

<TreeView>

<TreeViewItem Header="Node1" ItemsSource="{Binding Source={StaticResource odp1}, Path=Data}">

</TreeViewItem>

<TreeViewItem Header="Node2">

</TreeViewItem>

</TreeView>

Answer 3

I have done the following:

 <TreeViewItem Header="Sets" x:Name="SetsTreeViewItem" ItemsSource="{Binding Source={StaticResource PhotoSetCollectionDS}, Path=Title}">

<ObjectDataProvider x:Key="PhotoSetCollectionDS" d:IsDataSource="True" ObjectType="{x:Type FlickrAPI:LeftMenuExpanderListboxItemsCollection}"/>

But this does not populat the treeview node,.. it is empty,... If I populate a listbox from the above datasource it, the data is displayed correctly...

Answer 4

It cannot find 'Title'  property

try this

<DataTemplate x:Key="dt">

<TextBlock Text="{Binding Path=Title}"></TextBlock>

</DataTemplate>

<TreeViewItem Header="Sets"

ItemTemplate="{StaticResource dt}"

x:Name="SetsTreeViewItem" ItemsSource="{Binding Source={StaticResource PhotoSetCollectionDS}, Path=Title}">

Answer 5

I also made sure that the datasource is not empty,... Still the data is not populated in the dataset.

Now I realized that there might be one more problem. If the dataset is empty and there are not treeview items to be put in a treeview node the node will not be possible to expand... What I would like to make is that the data is fetched from the internet once the treeviewnode is expanded. Is this possible with the treeview control?

Answer 6

The title property is a property of my observable collection.... Did I do something wrong?

Answer 7

if I understand correctly, source is a collection of some objects and Title is a property on the object right?

Answer 8

That's right....

If I populate the a ListBox control using the following code it work.... But I would like this data (that is now in the listbox) to be in a treview node....

     <ListBox Width="Auto" Height="Auto" x:Name="LeftMenuSetsExpanderListBox" SelectionChanged="OnLeftMenuItemSelected" Background="{x:Null}" BorderThickness="0,0,0,0" Padding="15,0,0,0" ItemsSource="{Binding PhotoSets, Mode=Default, Source={StaticResource PhotoSetCollectionDS}}" ItemTemplate="{DynamicResource PhotoSetsTemplate1}" LostFocus="OnListBoxLostFocus"/>

  <ObjectDataProvider x:Key="PhotoSetCollectionDS" d:IsDataSource="True" ObjectType="{x:Type FlickrAPI:LeftMenuExpanderListboxItemsCollection}"/>
    <DataTemplate x:Key="PhotoSetsTemplate1">
   <StackPanel Margin="0,0,0,0" Width="Auto" Height="Auto" Background="{x:Null}" x:Name="StackPanel" HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="0">
    <TextBlock Height="Auto" Width="Auto" x:Name="ButtonInExtender" Text="{Binding Title}" TextAlignment="Left"/>
   </StackPanel>

Now I would like to populate the data from the aboove DataObjectProvide into a treeView node... but cannot figure out a way...

Answer 9

did you try setting the itemtemplate on the treeviewnode like I mentioned?

Answer 10

Yes, I did and it did not work... i also made sure that the objectdataprovider/observable collection is not empty,.... I still cannot figure out a way to populate the treeview control...

Answer 11

Do you see any Binding Errors in the output window

Answer 12

No, there are no errors in the output.

I also tried using the same binding as I used for the listbox but... it populates the listbox but not the treeview control...

     <TreeViewItem Header="Sets" IsExpanded="True" ItemTemplate="{StaticResource PhotoSetsTemplate2}" x:Name="SetsTreeViewItem" ItemsSource="{Binding PhotoSets, Mode=Default, Source={StaticResource PhotoSetCollectionDS}}">

Answer 13

You likely want to use a HierarchicalDataTemplate for the TreeView.ItemTemplate; the ItemsSource property on that template is what describes the nested collection to the TreeView.

I posted some examples here, and Bea has lots of other HierarchicalDataTemplates examples on her blog.