HierarchicalDataTemplate with Treeview in MVVM

Question

I'm relatively new to MVVM and WPF. I'm attempting to fill a TreeView control with a directory and it's files / subdirectories (in effect the contents of a zip file that I have unpacked)

Following along after this SO question, I have the following class:

namespace IFR_Full.Model
{
    public class Item
    {
        public string Name { get; set; }
        public string Path { get; set; }
    }

    public class FileItem : Item
    {
    }

    public class DirectoryItem : Item
    {
        public List<Item> Items { get; set; }

        public DirectoryItem()
        {
            Items = new List<Item>();
        }
    }

    public class TVItemProvider
    {
        public List<Item> GetItems(string path)
        {
            var items = new List<Item>();
            var dirInfo = new DirectoryInfo(path);

            foreach (var directory in dirInfo.GetDirectories())
            {
                var item = new DirectoryItem
                    {
                        Name = directory.Name,
                        Path = directory.FullName,
                        Items = GetItems(directory.FullName)
                    };
                items.Add(item);
            }

            foreach (var file in dirInfo.GetFiles())
            {
                var item = new FileItem
                {
                    Name = file.Name,
                    Path = file.FullName
                };
                items.Add(item);
            }
            return items;
        }
    }
}

In my ViewModel class I have these properties:

TVItemProvider TVIP = new TVItemProvider();

private List<Item> _tvitems;
public List<Item> TVItems
{
    get { return _tvitems; }
}

which is created in this method:

private void LoadIDMLTreeView(string path)
{
    _tvitems = TVIP.GetItems(path);
}

I set the header and DataContext of my MainWindow like this:

...
xmlns:ViewModel="clr-namespace:IFR_Full"
xmlns:Model ="clr-namespace:IFR_Full.Model"
...

<Window.DataContext>
    <ViewModel:ExcelImportViewModel/>
</Window.DataContext>

and set my treeview xaml code like this:

<TreeView ItemsSource="{Binding}" Name="IDMLView" Margin="10,171.74,10,8" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type Model:DirectoryItem}" ItemsSource="{Binding Path=TVItems}">
            <TextBlock Text="{Binding Path=Name}" ToolTip="{Binding Path=Path}" />                  
        </HierarchicalDataTemplate> 
        <DataTemplate DataType="{x:Type Model:FileItem}">
     <TextBlock Text="{Binding Path=Name}" ToolTip="{Binding Path=Path}" />
    </DataTemplate>             
 </TreeView.Resources>
</TreeView>

When I run the program in debug mode I can see that TVItems contains the appropriate items (Directories and files), but my TreeView control is blank.

I imagine that the issue is with the bindings?

HichemSeeSharp · Accepted Answer · 2012-08-28T22:35:06.730

Change <TreeView ItemsSource="{Binding}" ... to <TreeView ItemsSource="{Binding TVItems}" ...
Also , Change to <HierarchicalDataTemplate DataType="{x:Type local:DirectoryItem}" ItemsSource="{Binding Items}" >

Your class has to be like this :

 public class TVItemProvider
    {

        List<object> items = new List<object>();
          DirectoryInfo dirInfo;
          public List<object> GetItems(string path)
        {
            dirInfo = new DirectoryInfo(path);
            foreach (var directory in dirInfo.GetDirectories())
            {
                var item = new DirectoryItem
                {
                    Name = directory.Name,
                    Path = directory.FullName,
                    Items = new TVItemProvider().GetItems(directory.FullName)
                };
                items.Add(item);
            }

            foreach (var file in dirInfo.GetFiles())
            {
                var item = new FileItem
                {
                    Name = file.Name,
                    Path = file.FullName
                };

                items.Add(item);
            }
            return items;
        }

}

Finally change the type of your lists to List<object> (all of them)
Hope it would help

When I make this change the treeview fills with only the top-level items. I am expecting a tree structure: the DirectoryItems have FileItem subs. — DeeDub84, Aug 28 '12 at 20:04
Excellent HichemC! That worked... now I need to study the answer to understand what you did! — DeeDub84, Aug 28 '12 at 22:05

HierarchicalDataTemplate with Treeview in MVVM

1 Answers1