WPF: Problem with TreeView databinding

Question

Hi,

I have a tree view defined as follows:

<HierarchicalDataTemplate x:Key="ChildTemplate"
                          ItemsSource="{Binding Children}">
    <TextBlock Text="{Binding TagName, Mode=OneWay}"/>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate x:Key="NavigationHeaderTemplate"
                          ItemsSource="{Binding Children}"
                          ItemTemplate="{StaticResource ChildTemplate}">
    <StackPanel Orientation="Horizontal" Margin="0">
        <Image Source="{Binding Image}" Height="16" Width="16"></Image>
        <TextBlock Text="{Binding Header}"></TextBlock>
    </StackPanel>
</HierarchicalDataTemplate>
<TreeView Grid.Row="0" Grid.Column="0" Margin="0"
    FlowDirection="LeftToRight"
    ItemTemplate="{StaticResource NavigationHeaderTemplate}"
    Name="TreeView2">
</TreeView>

The data binding is:

public class ViewTag : INotifyPropertyChanged
{
    private string _tagName;
    public string TagName
    {
        get { return _tagName; }
        set
        {
            _tagName = value;
            PropertyChanged(this, new PropertyChangedEventArgs("Tag Name"));
        }
    }
    private ObservableCollection<ViewTag> _childTags;
    public ObservableCollection<ViewTag> ChildTags
    {
        get { return _childTags; }
        set
        {
            _childTags = value;
            OnPropertyChanged(new PropertyChangedEventArgs("Child Tags"));
        }
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;
    public void OnPropertyChanged(PropertyChangedEventArgs e)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, e);
    }
    #endregion

    public ViewTag(string tagName, ObservableCollection<ViewTag> childTags)
    {
        _tagName = tagName;
        _childTags = childTags;
    }
}

public class ViewNavigationTree
{
    public string Image { get; set; }
    public string Header { get; set; }
    public ObservableCollection<ViewTag> Children { get; set; }
}

And my test binding is:

        var xy = new List<ViewNavigationTree>();
        List<ViewTag> tempTags = new List<ViewTag>();
        ViewTag t1, t2, t3, t4, t5, t6;
        t1 = new ViewTag("Computers", null);
        t2 = new ViewTag("Chemistry", null);
        t3 = new ViewTag("Physics", null);
        var t123 = new ObservableCollection<ViewTag>();
        t123.Add(t1);
        t123.Add(t2);
        t123.Add(t3);
        t4 = new ViewTag("Science", t123);
        var t1234 = new ObservableCollection<ViewTag>();
        t1234.Add(t4);
        t5 = new ViewTag("All Items", t1234);
        t6 = new ViewTag("Untagged", null);

        var tall = new ObservableCollection<ViewTag>();
        tall.Add(t5);
        tall.Add(t6);
        xy.Add(new ViewNavigationTree() { Header = "Tags", Image = "img/tags2.ico", Children = tall });

        var rootFolders = eDataAccessLayer.RepositoryFacrory.Instance.MonitoredDirectoriesRepository.Directories.ToList();
        var viewFolders = new ObservableCollection<ViewTag>();
        foreach (var vf in rootFolders)
        {
            viewFolders.Add(new ViewTag(vf.FullPath, null));
        }
        xy.Add(new ViewNavigationTree() { Header = "Folders", Image = "img/folder_16x16.png", Children = viewFolders });

        xy.Add(new ViewNavigationTree() { Header = "Authors", Image = "img/user_16x16.png", Children = null });
        xy.Add(new ViewNavigationTree() { Header = "Publishers", Image = "img/powerplant_32.png", Children = null });

        TreeView2.ItemsSource = xy;

Problem is, the tree only shows:

+ Tags
    All Items
    Untagged
+ Folders
    dir 1
    dir 2
    ...
Authors
Publishers

The items I added under "All Items" aren't displayed.

Being a WPF nub, i can't put my finger on the problem. Any help will be greatly appriciated.

Answer 1

For TreeView binding, you need to use a HierarchicalDataTemplate. This allows you to specify both the data for the node, and also the children for the node (by binding to ItemsSource).

Answer 2

The only thing that jumps out here is that you're referencing the Children property in your ChildTemplate instead of ChildTags as defined in ViewTag.