Question

I have MyCollection of MyPOCO object (that has two string properties).

When I try to implement a HierarchicalDataTemplate into a treeview the binding is not working, I get the class name.

I know that if i take out the datatemplate from the control everything works fine but i am interested to see why this example is not working.

<Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource testVM}}">
    <sdk:TreeView Margin="8,8,8,111" ItemsSource="{Binding MyCollection}">
        <sdk:HierarchicalDataTemplate ItemsSource="{Binding MyPOCO}">
            <sdk:HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Property1}"/>
                        <TextBlock Text="{Binding Property2}"/>
                    </StackPanel>
                </DataTemplate>
            </sdk:HierarchicalDataTemplate.ItemTemplate>
        </sdk:HierarchicalDataTemplate>
    </sdk:TreeView>
</Grid>

Here is the ViewModel also.

namespace MyPOCProject

{
public class MyPOCO
{
private string property1;

    public string Property1
    {
        get { return property1; }
        set { property1 = value; }
    }

    private string property2;

    public string Property2
    {
        get { return property2; }
        set { property2 = value; }
    }

    public MyPOCO(string p1, string p2)
    {
        property1 = p1;
        property2 = p2;
    }
}

public class MyViewModel : INotifyPropertyChanged
{
    private ObservableCollection<MyPOCO> myCollection;

    public ObservableCollection<MyPOCO> MyCollection
    {
        get { return myCollection; }
        set { myCollection = value; RaisePropertyChanged("MyCollection"); }
    }

    public MyViewModel()
    {
        MyPOCO _poco1 = new MyPOCO("aaa1", "bbb1");
        MyPOCO _poco2 = new MyPOCO("aaa2", "bbb2");
        MyPOCO _poco3 = new MyPOCO("aaa3", "bbb3");

        MyCollection = new ObservableCollection<MyPOCO>() { _poco1, _poco2, _poco3 };
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

}

So what am I doing wrong?

AGAIN … I am interested in this particular example. I want to know what’s wrong with this example and why.

Thanks.

Answer 1

The code you posted is not hierarchical, In other words: The MyPOCO Class is not containing a property MyCollection<MYPOCO> Children.
Here is an example for the HierarchicalDataTemplate

Xaml:

<sdk:TreeView x:Name="MyTreeView"
              HorizontalAlignment="Left"
              ItemsSource="{Binding MyCollection}"
              Width="200" Height="280">
    <sdk:TreeView.ItemTemplate>
        <sdk:HierarchicalDataTemplate ItemsSource="{Binding Path=Children}">
            <TextBlock Text="{Binding Path=Header}"/>
            <sdk:HierarchicalDataTemplate.ItemTemplate>
                <sdk:HierarchicalDataTemplate ItemsSource="{Binding Path=Children}">
                    <TextBlock Text="{Binding Path=Header}"/>
                </sdk:HierarchicalDataTemplate>
            </sdk:HierarchicalDataTemplate.ItemTemplate>
        </sdk:HierarchicalDataTemplate>
    </sdk:TreeView.ItemTemplate>
</sdk:TreeView>

Codebehind classes:

public class MyPoco
{
    public MyPoco(string header, int sampleChildrenCount)
    {
        this.Header = header;
        this.Children = new ObservableCollection<MyPoco>();
        if (sampleChildrenCount > 0)
        {
            for (int i = 0; i < sampleChildrenCount; i++)
            {
                string newHeader = String.Format("Test {0}", sampleChildrenCount * i);
                var myPoco = new MyPoco(newHeader, sampleChildrenCount - 1)
                this.Children.Add(myPoco);
            }
        }
    }
    public string Header { get; set; }
    public ObservableCollection<MyPoco> Children { get; set; }
}

public class MyViewModel
{
    public MyViewModel()
    {
        MyCollection = new ObservableCollection<MyPoco>();
        for (int i = 0; i < 6; i++)
        {
            this.MyCollection.Add(new MyPoco(String.Format("Test {0}", i), 5));
        }
    }
    public ObservableCollection<MyPoco> MyCollection { get; set; }
}

Codebehind startup:

public MainPage()
{
    public MainPage()
    {
        InitializeComponent();
        MyTreeView.DataContext = new MyViewModel();
    }
}