WPF Treeview Binding, HOw do i display different data class as a Nodes Child ?

Question

Hi,

Im trying to display a group (file extension and icon)(parent) then all of the files found in that group (child) in a WPF Treeview. I can get the groups to show in the treeview, each with an icon and text, however I dont understand how to display the files as children of the group. Here is the GroupInfo class, the problem is it contains FileInfo a different class and all of the tutorials I have read so far on WPF treeview use only one data class to create tree items :

public class GroupInfo
{
    public GroupInfo()
    {
        alFiles = new ObservableCollection<FileInfo>();
    }

    public string strExtension { get; set; }
    public ImageSource icon {get; set;}
    public string strDescription { get; set; }

    public string TypeDescription 
    {
        get
        {
            string s = strExtension;
            s.Replace('.',' ');
            s += " - " + strDescription;
            return s;
        }

        set
        {

        }
    }

    public ObservableCollection<FileInfo> alFiles;

    void LoadIcon()
    {
        //icon = BitmapFrame.Create();
    }

    string GetDescription()
    {
        string strD = "";

        return strD;
    }
}

I want to be able to show all the FileInfo classes in alFiles as children of the group node. Here is my XAML :

<TreeView Margin="12,12,12,375" Name="trGroups" ItemsSource="{Binding Groups}" >
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:GroupInfo}" 
                              ItemsSource="{Binding Groups}">
                <StackPanel Orientation="Horizontal" Margin="2">
                <Image Source="{Binding icon}"
                    Width="16" 
                   Height="16" 
                   SnapsToDevicePixels="True"/>
                    <TextBlock Text="{Binding TypeDescription}" Margin="5,0"/>

                </StackPanel>
            </HierarchicalDataTemplate>
            <HierarchicalDataTemplate DataType="{x:Type local:FileInfo}" 
                              ItemsSource="{Binding Groups.Files}">
                <StackPanel Orientation="Horizontal" Margin="2">
                    <Image Source="{Binding icon}"
                    Width="16" 
                   Height="16" 
                   SnapsToDevicePixels="True"/>
                    <TextBlock Text="{Binding TypeDescription}" Margin="5,0"/>

                </StackPanel>
            </HierarchicalDataTemplate>
        </TreeView.Resources>
    </TreeView>

Thanks in advance....

Answer 1

A few things. First, in your GroupInfo class, you should define a property for your alFiles field. This is so that it could work with Bindings.

public ObservableCollection<FileInfo> alFiles;
public ObservableCollection<FileInfo> AlFiles { get { return alFiles;} }

Next, in your HierarchicalDataTemplate for GroupInfo the ItemsSource should be set to the AlFiles property.

<HierarchicalDataTemplate DataType="{x:Type local:GroupInfo}" 
                              ItemsSource="{Binding AlFiles}">

Lastly, unless the FileInfo class has Children in them that you want to appear in the TreeView, you may want to change its template to just a <DataTemplate> instead of <HierarchicalDataTemplate>.

<DataTemplate DataType="{x:Type local:FileInfo}">
...                
</DataTemplate>

Hope this helps.