WPF TreeView with HierarchicalDataTemplate and ObservableCollection containing Children

Question

I'm trying to get this to work but unfortunately I have no idea what I'm doing wrong! I've looked into every uestion asked so far containing TreeView and the HierarchicalDataTemplate.

Here's the problem: I have a TreeView and would like to show the folder structure with all SubFolders and Files in it. To do so I created a class with the necessary Items:

public class FolderItem : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;

        if (handler != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    public FolderItem()
    {
        Files = new ObservableCollection<FileItem>();
        SubFolders = new ObservableCollection<FolderItem>();
    }

    #region:PrivateVariables
    private DirectoryInfo _Info;
    private ObservableCollection<FileItem> _Files;
    private ObservableCollection<FolderItem> _SubFolders;
    #endregion

    public DirectoryInfo Info
    {
        get { return _Info; }
        set
        {
            _Info = value;
            OnPropertyChanged("Info");
        }
    }
    public ObservableCollection<FileItem> Files
    {
        get { return _Files; }
        set
        {
            _Files = value;
            OnPropertyChanged("Files");
        }
    }
    public ObservableCollection<FolderItem> SubFolders
    {
        get { return _SubFolders; }
        set
        {
            _SubFolders = value;
            OnPropertyChanged("SubFolders");
        }
    }
}
public class FileItem : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;

        if (handler != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    #region:PrivateVariables
    private FileInfo _Info;
    #endregion

    public FileInfo Info
    {
        get { return _Info; }
        set
        {
            _Info = value;
            OnPropertyChanged("Info");
        }
    }
}

In the code I now loop through all Folders and Files and the ObservableCollection folders now shows the correct data! The code I use looks like this:

public void StartExtraction(string sPath)
{
    if (Directory.Exists(sPath))
    {
        FolderItem newFolder = new FolderItem();
        newFolder.Info = new DirectoryInfo(sPath);

        GetFileCount(sPath, newFolder);

        Application.Current.Dispatcher.Invoke((Action)delegate ()
        {
            ViewModel_ZVLB.folders.Add(newFolder);
        });
    }
}

public void GetFileCount(string sPath, FolderItem actualFolder)
{
    if (Directory.Exists(sPath))
    {
        foreach (string fileName in Directory.GetFiles(sPath))
        {
            FileItem newFile = new FileItem();
            newFile.Info = new FileInfo(fileName);
            actualFolder.Files.Add(newFile);
        }

        foreach (string subFolder in Directory.GetDirectories(sPath))
        {
            FolderItem newSubFolder = new FolderItem();
            newSubFolder.Info = new DirectoryInfo(subFolder);
            actualFolder.SubFolders.Add(newSubFolder);

            GetFileCount(subFolder, newSubFolder);
        }
    }
}

With this OC I go to the XAML and tried a lot to show the Data:

    <TreeView ItemsSource="{Binding folders}">
    <TreeView.Resources>
        <HierarchicalDataTemplate ItemsSource="{Binding folders}" DataType="{x:Type local:FolderItem}">
            <HierarchicalDataTemplate.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Info.Name}" />
                </DataTemplate>
            </HierarchicalDataTemplate.ItemTemplate>
        </HierarchicalDataTemplate>
    </TreeView.Resources>

    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </TreeView.ItemContainerStyle>

    <TreeView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Info.FullName}" FontSize="16" FontWeight="Bold" />
        </DataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Even with another HierarchicalDataTemplate it won't work.

Is there anything I did wrong? Or is it just not working with ObservableCollections?

Intereisting is also that after the Update of Visual Studio 2017 a new Error appeared: As "folders" for Tpye "ViewModel_ZVLB" a instancemenber is expected! (translated from German) Has this something to do with my problem?

Thanks for your help!

Answer 1

In my opinion, if you want to work with Treeviews, it is easier to use only one Observablecollection for the children.

First I create a generic class for each element of your Tree. The Folder and File classes inherits from it.

public class TreeItem: INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;

        if (handler != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

public class FolderItem:TreeItem
{
    public FolderItem()
    {
        Elems = new ObservableCollection<TreeItem>();
    }

    #region:PrivateVariables
    private DirectoryInfo _Info;
    private ObservableCollection<TreeItem> _Elems;
    #endregion

    public DirectoryInfo Info
    {
        get { return _Info; }
        set
        {
            _Info = value;
            OnPropertyChanged("Info");
        }
    }

    public ObservableCollection<TreeItem> Elems
    {
        get { return _Elems; }
        set
        {
            _Elems = value;
            OnPropertyChanged("Elems");
        }
    }
}
public class FileItem : TreeItem
{

    #region:PrivateVariables
    private FileInfo _Info;
    #endregion

    public FileInfo Info
    {
        get { return _Info; }
        set
        {
            _Info = value;
            OnPropertyChanged("Info");
        }
    }
}

Here is the XAML code:

    <TreeView ItemsSource="{Binding folders}">
        <TreeView.Resources>
            <HierarchicalDataTemplate ItemsSource="{Binding Elems}" DataType="{x:Type local:FolderItem}">
                <TextBlock Text="{Binding Info.Name}" FontWeight="Bold"/>
            </HierarchicalDataTemplate>
            <DataTemplate DataType="{x:Type local:FileItem}">
                <TextBlock Text="{Binding Info.Name}" />
            </DataTemplate>
        </TreeView.Resources>
    </TreeView>

Of course you need to update your filling function:

    public void GetFileCount(string sPath, FolderItem actualFolder)
    {
        if (Directory.Exists(sPath))
        {
            foreach (string fileName in Directory.GetFiles(sPath))
            {
                FileItem newFile = new FileItem();
                newFile.Info = new FileInfo(fileName);
                actualFolder.Elems.Add(newFile);
            }

            foreach (string subFolder in Directory.GetDirectories(sPath))
            {
                FolderItem newSubFolder = new FolderItem();
                newSubFolder.Info = new DirectoryInfo(subFolder);
                actualFolder.Elems.Add(newSubFolder);

                GetFileCount(subFolder, newSubFolder);
            }
        }
    }