WPF Treeview in VB.net

Question

I have been looking for a some working code for the last couple of days to set up a treeview in my WPF app to display some database data. I use VB as i am much more confident in it - which drastically limited the code examples out there. More examples i found used manually entered data to populate each node versus a database which was little help. I finally found some code which bound the each node to a query and related the query via a DataRelation. Great this should work perfect!

The example used the Northwind database so I changed it to my database and plugged in the queries. To my shock the treeview populated fine except.... all the data is invisible.

Here is the code:

Imports MySql.Data.MySqlClient
Imports System.Data
Imports System.ComponentModel
Imports System.Xml
Imports System.IO
Class Window2
Dim connStr As String = "Server=127.0.0.1;Database=psdb;Uid=root;Pwd=;Connect    Timeout=30;"
Dim conn As New MySqlConnection(connStr)
Function GetRelationalData() As DataSet

    Dim CategoryAdapter As MySqlDataAdapter = New MySqlDataAdapter("select distinct Dist_name, dist_id from distributors".ToString, conn)
    Dim ProductsAdapter  As MySqlDataAdapter = New MySqlDataAdapter("select d.dist_id, t.Title_name, title_id from titles t, distributors d where d.dist_id = t.dist_id".ToString, conn)
    Dim ProductData As DataSet = New DataSet()
    CategoryAdapter.Fill(ProductData, "Categories") 'fill Categories
    ProductsAdapter.Fill(ProductData, "Products") 'fill products
    Dim CategoryRelation As DataRelation
    CategoryRelation = New DataRelation("ChildrenRelationship", _
    ProductData.Tables("Categories").Columns("dist_id"), _
    ProductData.Tables("Products").Columns("dist_id"), True)
    CategoryRelation.Nested = True
    ProductData.Relations.Add(CategoryRelation)
    Return ProductData
End Function
Private Sub Button1_Click(ByVal sender As System.Object, _
                          ByVal e As RoutedEventArgs) Handles Button1.Click
    BindData()
End Sub
Private Sub BindData()
    TreeView1.DataContext = GetRelationalData()
End Sub

End Class

and the XAML:

<Window x:Class="Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="400" Width="550"><Window.Resources>
<DataTemplate x:Key="ProductTemplate" >
    <TextBlock Text="{Binding ProductName}"></TextBlock>
</DataTemplate>
<HierarchicalDataTemplate x:Key="CategoryTemplate" 
                  ItemsSource="{Binding ChildrenRelationship}" 
                  ItemTemplate="{StaticResource ProductTemplate}">
    <TextBlock Text="{Binding CategoryName}"></TextBlock>
</HierarchicalDataTemplate>
</Window.Resources>
<Grid>

and here what i end up with the data seems to be there but you can't see it. Help!

PS there may be some confusion as to the objects. I went back tried to keep as close to the original code as possible when i discovered the problem only replacing the queries with my own - the original code used "Categories" and "Products" where as I "use Distributors" and "Titles"

Answer 1

I would highly recommend getting Snoop and running it while your application is running to see what your UI Elements are actually bound to.

I suspect it's simply a problem of having an invalid DataBinding in your TextBlock

Answer 2

OK Tim doesnt want the Kudos I guess. Here is the corrected code:

<Window x:Class="Window2" 
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="Window1" Height="400" Width="550">
<Window.Resources> 
<DataTemplate x:Key="ProductTemplate" > 
<TextBlock Text="{Binding title_name}">
</TextBlock> 
</DataTemplate> 
<HierarchicalDataTemplate x:Key="CategoryTemplate"           
ItemsSource="{Binding ChildrenRelationship}"                    
ItemTemplate="{StaticResource   ProductTemplate}">     
<TextBlock Text="{Binding dist_name}"></TextBlock> 
</HierarchicalDataTemplate>
</Window.Resources>
<Grid>