How to populate a WPF TreeView node from a datasource?<p><font face="Tahoma,Helvetica,Sans-Serif">I'm having a question about populating a treeview control node. </font></p> <p class=MsoNormal><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">  &lt;TreeView&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">    &lt;TreeViewItem Header=&quot;Node1&quot;&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><strong>      &lt;TreeViewItem Header=&quot;Subnode1&quot;/&gt;<br>       ...<br>      &lt;TreeViewItem Header=&quot;Subnode10&quot;/&gt;</strong><br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">    &lt;/TreeViewItem&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">    &lt;TreeViewItem Header=&quot;Node2&quot;&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><strong>      &lt;TreeViewItem Header=&quot;Subnode1&quot;/&gt;<br>       ...<br>      &lt;TreeViewItem Header=&quot;Subnode10&quot;/&gt;</strong></span><br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">    &lt;/TreeViewItem&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">  &lt;/TreeView&gt;</span></p> <p class=MsoNormal><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><font face="Tahoma,Helvetica,Sans-Serif">Now, my problem is that I have a observableCollection that holds infrmation for subnodes that go into &quot;Node1&quot;, and another observableCollection that holds information about subnodes that go into &quot;Node2&quot;. 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?</font></span></p> <p class=MsoNormal><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><font face="Tahoma,Helvetica,Sans-Serif">Thanks in advance,<br>Marko Vuksanovic.</font></span></p>© 2009 Microsoft Corporation. All rights reserved.Fri, 16 Jan 2009 03:21:01 Zd5a0d9eb-8cd5-467b-a963-cf66d0539110http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#d5a0d9eb-8cd5-467b-a963-cf66d0539110http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#d5a0d9eb-8cd5-467b-a963-cf66d0539110markovuksanovichttp://social.msdn.microsoft.com/Profile/en-US/?user=markovuksanovicHow to populate a WPF TreeView node from a datasource?<p><font face="Tahoma,Helvetica,Sans-Serif">I'm having a question about populating a treeview control node. </font></p> <p class=MsoNormal><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">  &lt;TreeView&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">    &lt;TreeViewItem Header=&quot;Node1&quot;&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><strong>      &lt;TreeViewItem Header=&quot;Subnode1&quot;/&gt;<br>       ...<br>      &lt;TreeViewItem Header=&quot;Subnode10&quot;/&gt;</strong><br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">    &lt;/TreeViewItem&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">    &lt;TreeViewItem Header=&quot;Node2&quot;&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><strong>      &lt;TreeViewItem Header=&quot;Subnode1&quot;/&gt;<br>       ...<br>      &lt;TreeViewItem Header=&quot;Subnode10&quot;/&gt;</strong></span><br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">    &lt;/TreeViewItem&gt;<br></span><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'">  &lt;/TreeView&gt;</span></p> <p class=MsoNormal><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><font face="Tahoma,Helvetica,Sans-Serif">Now, my problem is that I have a observableCollection that holds infrmation for subnodes that go into &quot;Node1&quot;, and another observableCollection that holds information about subnodes that go into &quot;Node2&quot;. 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?</font></span></p> <p class=MsoNormal><span lang=EN-GB style="font-size:10pt;font-family:'Lucida Console'"><font face="Tahoma,Helvetica,Sans-Serif">Thanks in advance,<br>Marko Vuksanovic.</font></span></p>Tue, 10 Oct 2006 21:21:06 Z2006-10-10T21:21:06Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#38a8de48-2094-42e9-a5fb-6ba82020eaedhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#38a8de48-2094-42e9-a5fb-6ba82020eaedmarkovuksanovichttp://social.msdn.microsoft.com/Profile/en-US/?user=markovuksanovicHow to populate a WPF TreeView node from a datasource?Also an example of how to programatically populate a TreeView control would be very useful.......Wed, 11 Oct 2006 08:19:11 Z2006-10-11T08:19:11Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#8817c583-409e-4032-bb17-aa03b6ca2c54http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#8817c583-409e-4032-bb17-aa03b6ca2c54lee dhttp://social.msdn.microsoft.com/Profile/en-US/?user=lee%20dHow to populate a WPF TreeView node from a datasource?<p>Did you try something like this</p><font color="#0000ff" size=2> <p>&lt;</font><font color="#800000" size=2>Window.Resources</font><font color="#0000ff" size=2>&gt;</p> <p>&lt;</font><font color="#800000" size=2>ObjectDataProvider</font><font color="#0000ff" size=2> </font><font color="#ff0000" size=2>ObjectType</font><font color="#0000ff" size=2>=</font><font size=2>&quot;</font><font color="#0000ff" size=2>{x:Type loc:MyData}</font><font size=2>&quot;</font><font color="#0000ff" size=2> </font><font color="#ff0000" size=2>x:Key</font><font color="#0000ff" size=2>=</font><font size=2>&quot;</font><font color="#0000ff" size=2>odp1</font><font size=2>&quot;</font><font color="#0000ff" size=2>&gt;&lt;/</font><font color="#800000" size=2>ObjectDataProvider</font><font color="#0000ff" size=2>&gt;</p> <p>&lt;/</font><font color="#800000" size=2>Window.Resources</font><font color="#0000ff" size=2>&gt;</p></font><font color="#0000ff" size=2> <p>&lt;</font><font color="#800000" size=2>TreeView</font><font color="#0000ff" size=2>&gt;</p> <p>&lt;</font><font color="#800000" size=2>TreeViewItem</font><font color="#0000ff" size=2> </font><font color="#ff0000" size=2>Header</font><font color="#0000ff" size=2>=</font><font size=2>&quot;</font><font color="#0000ff" size=2>Node1</font><font size=2>&quot;</font><font color="#0000ff" size=2> </font><font color="#ff0000" size=2>ItemsSource</font><font color="#0000ff" size=2>=</font><font size=2>&quot;</font><font color="#0000ff" size=2>{Binding Source={StaticResource odp1}, Path=Data}</font><font size=2>&quot;</font><font color="#0000ff" size=2>&gt;</p> <p></p> <p>&lt;/</font><font color="#800000" size=2>TreeViewItem</font><font color="#0000ff" size=2>&gt;</p> <p>&lt;</font><font color="#800000" size=2>TreeViewItem</font><font color="#0000ff" size=2> </font><font color="#ff0000" size=2>Header</font><font color="#0000ff" size=2>=</font><font size=2>&quot;</font><font color="#0000ff" size=2>Node2</font><font size=2>&quot;</font><font color="#0000ff" size=2>&gt;</p> <p></p> <p>&lt;/</font><font color="#800000" size=2>TreeViewItem</font><font color="#0000ff" size=2>&gt;</p> <p>&lt;/</font><font color="#800000" size=2>TreeView</font><font color="#0000ff" size=2>&gt;</p></font>Wed, 11 Oct 2006 08:29:22 Z2006-10-11T08:29:22Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#9b2426a9-ef67-4db0-91a0-b12fde6b700ahttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#9b2426a9-ef67-4db0-91a0-b12fde6b700amarkovuksanovichttp://social.msdn.microsoft.com/Profile/en-US/?user=markovuksanovicHow to populate a WPF TreeView node from a datasource?<p>I have done the following:<br><br> &lt;TreeViewItem Header=&quot;Sets&quot; x:Name=&quot;SetsTreeViewItem&quot; ItemsSource=&quot;{Binding Source={StaticResource PhotoSetCollectionDS}, Path=Title}&quot;&gt;</p> <p>&lt;ObjectDataProvider x:Key=&quot;PhotoSetCollectionDS&quot; d:IsDataSource=&quot;True&quot; ObjectType=&quot;{x:Type FlickrAPI:LeftMenuExpanderListboxItemsCollection}&quot;/&gt;</p> <p>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...</p>Wed, 11 Oct 2006 08:47:51 Z2006-10-11T08:47:51Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#c0f896df-d31e-4bbc-a4d1-bed41fbcc2bfhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#c0f896df-d31e-4bbc-a4d1-bed41fbcc2bflee dhttp://social.msdn.microsoft.com/Profile/en-US/?user=lee%20dHow to populate a WPF TreeView node from a datasource?<p>It cannot find 'Title'  property</p> <p>try this</p><font color="#0000ff" size=2> <p>&lt;</font><font color="#800000" size=2>DataTemplate</font><font color="#0000ff" size=2> </font><font color="#ff0000" size=2>x:Key</font><font color="#0000ff" size=2>=</font><font size=2>&quot;</font><font color="#0000ff" size=2>dt</font><font size=2>&quot;</font><font color="#0000ff" size=2>&gt;</p> <p>&lt;</font><font color="#800000" size=2>TextBlock</font><font color="#0000ff" size=2> </font><font color="#ff0000" size=2>Text</font><font color="#0000ff" size=2>=</font><font size=2>&quot;</font><font color="#0000ff" size=2>{Binding Path=Title}</font><font size=2>&quot;</font><font color="#0000ff" size=2>&gt;&lt;/</font><font color="#800000" size=2>TextBlock</font><font color="#0000ff" size=2>&gt;</p> <p>&lt;/</font><font color="#800000" size=2>DataTemplate</font><font color="#0000ff" size=2>&gt;</font></p> <p><font color="#0000ff" size=2><font color="#000000">&lt;TreeViewItem Header=&quot;Sets&quot; <font color="#ff0000" size=2></p> <p>ItemTemplate</font><font color="#0000ff" size=2>=</font><font size=2>&quot;</font><font color="#0000ff" size=2>{StaticResource dt}</font><font size=2>&quot;</font><font color="#0000ff" size=2> </p> <p></font>x:Name=&quot;SetsTreeViewItem&quot; ItemsSource=&quot;{Binding Source={StaticResource PhotoSetCollectionDS}, Path=Title}&quot;&gt;</font></p></font>Wed, 11 Oct 2006 09:03:21 Z2006-10-11T09:03:21Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#d8f0c7f6-bf64-4ee0-a25b-90f16bca51bchttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#d8f0c7f6-bf64-4ee0-a25b-90f16bca51bcmarkovuksanovichttp://social.msdn.microsoft.com/Profile/en-US/?user=markovuksanovicHow to populate a WPF TreeView node from a datasource?<p>I also made sure that the datasource is not empty,... Still the data is not populated in the dataset.</p> <p>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?</p>Wed, 11 Oct 2006 09:05:14 Z2006-10-11T09:05:14Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#0924ef8f-84fb-4d25-b10d-a1757cadbfe9http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#0924ef8f-84fb-4d25-b10d-a1757cadbfe9markovuksanovichttp://social.msdn.microsoft.com/Profile/en-US/?user=markovuksanovicHow to populate a WPF TreeView node from a datasource?The title property is a property of my observable collection.... Did I do something wrong?Wed, 11 Oct 2006 09:06:19 Z2006-10-11T09:06:19Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#fed24397-5fa6-4aa6-9e71-083bed9e19b6http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#fed24397-5fa6-4aa6-9e71-083bed9e19b6lee dhttp://social.msdn.microsoft.com/Profile/en-US/?user=lee%20dHow to populate a WPF TreeView node from a datasource?if I understand correctly, source is a collection of some objects and Title is a property on the object right?Wed, 11 Oct 2006 09:21:12 Z2006-10-11T09:21:12Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#e87f1540-63b9-4bf5-a032-ba7ce22fc500http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#e87f1540-63b9-4bf5-a032-ba7ce22fc500markovuksanovichttp://social.msdn.microsoft.com/Profile/en-US/?user=markovuksanovicHow to populate a WPF TreeView node from a datasource?<p>That's right....</p> <p>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....</p> <p>     &lt;ListBox Width=&quot;Auto&quot; Height=&quot;Auto&quot; x:Name=&quot;LeftMenuSetsExpanderListBox&quot; SelectionChanged=&quot;OnLeftMenuItemSelected&quot; Background=&quot;{x:Null}&quot; BorderThickness=&quot;0,0,0,0&quot; Padding=&quot;15,0,0,0&quot; ItemsSource=&quot;{Binding PhotoSets, Mode=Default, Source={StaticResource PhotoSetCollectionDS}}&quot; ItemTemplate=&quot;{DynamicResource PhotoSetsTemplate1}&quot; LostFocus=&quot;OnListBoxLostFocus&quot;/&gt;<br></p> <p>  &lt;ObjectDataProvider x:Key=&quot;PhotoSetCollectionDS&quot; d:IsDataSource=&quot;True&quot; ObjectType=&quot;{x:Type FlickrAPI:LeftMenuExpanderListboxItemsCollection}&quot;/&gt;<br>    &lt;DataTemplate x:Key=&quot;PhotoSetsTemplate1&quot;&gt;<br>   &lt;StackPanel Margin=&quot;0,0,0,0&quot; Width=&quot;Auto&quot; Height=&quot;Auto&quot; Background=&quot;{x:Null}&quot; x:Name=&quot;StackPanel&quot; HorizontalAlignment=&quot;Stretch&quot; Grid.Column=&quot;0&quot; Grid.Row=&quot;0&quot;&gt;<br>    &lt;TextBlock Height=&quot;Auto&quot; Width=&quot;Auto&quot; x:Name=&quot;ButtonInExtender&quot; Text=&quot;{Binding Title}&quot; TextAlignment=&quot;Left&quot;/&gt;<br>   &lt;/StackPanel&gt;</p> <p>Now I would like to populate the data from the aboove DataObjectProvide into a treeView node... but cannot figure out a way...</p>Wed, 11 Oct 2006 09:34:35 Z2006-10-11T09:34:35Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#001efa42-4d19-407b-b3d1-058a847367cchttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#001efa42-4d19-407b-b3d1-058a847367cclee dhttp://social.msdn.microsoft.com/Profile/en-US/?user=lee%20dHow to populate a WPF TreeView node from a datasource?did you try setting the itemtemplate on the treeviewnode like I mentioned?Wed, 11 Oct 2006 09:36:02 Z2006-10-11T09:36:02Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#52987ddf-f51e-4e55-ab67-07e90e1c73dfhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#52987ddf-f51e-4e55-ab67-07e90e1c73dfmarkovuksanovichttp://social.msdn.microsoft.com/Profile/en-US/?user=markovuksanovicHow to populate a WPF TreeView node from a datasource?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...Wed, 11 Oct 2006 12:54:16 Z2006-10-11T12:54:16Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#076c74fb-9d7a-4a29-93cb-33ea017f3c40http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#076c74fb-9d7a-4a29-93cb-33ea017f3c40lee dhttp://social.msdn.microsoft.com/Profile/en-US/?user=lee%20dHow to populate a WPF TreeView node from a datasource?Do you see any Binding Errors in the output windowWed, 11 Oct 2006 13:02:17 Z2006-10-11T13:02:17Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#2bd7da7a-9fae-44bc-bcfa-8b75df918d4bhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#2bd7da7a-9fae-44bc-bcfa-8b75df918d4bmarkovuksanovichttp://social.msdn.microsoft.com/Profile/en-US/?user=markovuksanovicHow to populate a WPF TreeView node from a datasource?<p>No, there are no errors in the output.</p> <p>I also tried using the same binding as I used for the listbox but... it populates the listbox but not the treeview control...</p> <p>     &lt;TreeViewItem Header=&quot;Sets&quot; IsExpanded=&quot;True&quot; ItemTemplate=&quot;{StaticResource PhotoSetsTemplate2}&quot; x:Name=&quot;SetsTreeViewItem&quot; ItemsSource=&quot;{Binding PhotoSets, Mode=Default, Source={StaticResource PhotoSetCollectionDS}}&quot;&gt;</p>Wed, 11 Oct 2006 13:34:29 Z2006-10-11T13:34:29Zhttp://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#8f2e7776-5911-4cd0-9e42-1b34d82507d9http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/d5a0d9eb-8cd5-467b-a963-cf66d0539110#8f2e7776-5911-4cd0-9e42-1b34d82507d9Mike Hillberg - MSFThttp://social.msdn.microsoft.com/Profile/en-US/?user=Mike%20Hillberg%20-%20MSFTHow to populate a WPF TreeView node from a datasource?<p>You likely want to use a <a title="http://windowssdk.msdn.microsoft.com/en-us/library/system.windows.hierarchicaldatatemplate.aspx" href="http://windowssdk.msdn.microsoft.com/en-us/library/system.windows.hierarchicaldatatemplate.aspx">HierarchicalDataTemplate</a> for the TreeView.ItemTemplate; the ItemsSource property on that template is what describes the nested collection to the TreeView.</p> <p>I posted some examples <a title="http://blogs.msdn.com/mikehillberg/archive/2006/10/11/a-treeview-a-hierarchicaldatatemplate-and-a-2d-collection-walk-into-a-bar.aspx" href="http://blogs.msdn.com/mikehillberg/archive/2006/10/11/a-treeview-a-hierarchicaldatatemplate-and-a-2d-collection-walk-into-a-bar.aspx">here</a>, and Bea has lots of other HierarchicalDataTemplates examples on <a title="http://www.beacosta.com/" href="http://www.beacosta.com/">her blog</a>.</p> <p> </p>Wed, 11 Oct 2006 15:30:33 Z2006-10-11T15:30:33Z