Databinding with TreeView in WPF

Question

I am working with data binding and tree views and I am not able to get my TreeView to populate in my WPF. I think I am relatively close, just a small tweak somewhere, but I can't seem to find it.

Here's my Project class:

public class Project
{
    public Project(string Name, bool isFolder, Project ParentFolder)
    {
        this.Name = Name;
        this.isFolder = isFolder;
        Children = new List();

        if (ParentFolder == null)
        {
            Path = Name;
        }
        else
        {
            Path = ParentFolder.Path + " > " + Name;
        }
    }
    public string Path { get; private set; }
    public string Name { get; set; }
    public bool isFolder { get; set; }
    public List Children { get; set; }

    public IEnumerable ChildFolders
    {
        get
        {
            return Children.Where(p => p.isFolder);
        }
    }

    public object Icon
    {
        get
        {
            if (isFolder)
            {
                return 0; // return folder icon
            }
            else
            {
                return 1; // return project icon
            }
        }
    }

    public IEnumerable SearchRecursively(string SearchString)
    {
        return GetAllChildren.Where(p => p.Name.Contains(SearchString));
    }

    private List GetAllChildren
    {
        get
        {
            List allChildren = new List();
            foreach(Project child in Children)
            {
                allChildren.AddRange(child.GetAllChildren);
            }
            return allChildren;
        }
    }
}

}

Here is my MaiWindow.xaml.cs class that I will be using to make test data:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.BuildData();
        }

        private void BuildData()
        {
           List parents = new List();
            Project parentOne = new Project("Apple", true, null);
            Project parentTwo = new Project("Samsung", true, null);
            Project parentThree = new Project("Google", true, null);
            parents.Add(parentOne); parents.Add(parentTwo); parents.Add(parentThree);

            Project appleMacBook = new Project("Mac", false, parentOne);
            Project appleIpad = new Project("iPad", false, parentOne);
            Project appleiPhone = new Project("iPhone", false, parentOne);

            Project samsungGalaxy = new Project("Galaxy", false, parentTwo);
            Project samsungNote = new Project("Note", false, parentTwo);

            Project googlePixel = new Project("Pixel", false, parentThree);
            Project googleChromecast = new Project("Chromecast", false, parentThree);

            parents[0].Children.Add(appleMacBook); parents[0].Children.Add(appleIpad); parents[0].Children.Add(appleiPhone);
            parents[1].Children.Add(samsungGalaxy); parents[1].Children.Add(samsungNote);
            parents[2].Children.Add(googlePixel); parents[2].Children.Add(googleChromecast); 

        }
    }
}

And here is my XAML where I am trying to display the TreeView. Right now, it is just blank. I would appreciate any tips.

Edit:

Here's the Property class:

 public string Name
    {
        get
        {
            return name;
        }
        set
        {
            name = value;
            OnPropertyChanged("Name");
        }
    }
    private string name { get; set; }
    public event PropertyChangedEventHandler PropertyChanged;

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

XAML:

So, this doesn't seem to be firing the change event. I know this because Path is set as Name + ">". When I change the Name, Path is not reflecting the change. It only shows what my previous value for Name was, if that makes sense.

if (ParentFolder == null)
        {
            Path = Name;
        }
        else
        {
            Path = ParentFolder.Path + " > " + Name;
        }

Edit:

public Project(string Name, bool isFolder, Project ParentFolder)
    {
        this.Name = Name;
        this.isFolder = isFolder;
        Children = new List();
        this.ParentFolder = ParentFolder;
    }
    public string Path
    {
        get
        {
            return this.ParentFolder + " > " + this.Name;
        }
        set
        {
            this.Path = Path;
        }
    }

XAML:

The Path updates too but when it I see it it will display the path of the project rather than the fired change of name. It changes in real-time but doesn't save the String value..only registers that a change has happened.

Heres my Property Change too.

public event PropertyChangedEventHandler PropertyChanged;

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

15ee8f99-57ff-4f92-890c-b56153 · Accepted Answer

You have a few problems here.

ItemsSource="{Binding parents}"

Here's parents:

private void BuildData()
{
    List parents = new List();

You're asking XAML to examine all the methods in the codebehind class, looking for local variables named parents. This isn't a reasonable request.

There are a few requirements if you want to bind to parents: It must be...

A public...
Property (not a field -- it needs a get block)...
Of whatever object is your TreeView's DataContext.

None of those are true.

Two more things -- not required, but a very good idea:

Make it ObservableCollection rather than List, so that it will notify the UI of added or removed items.
The class that owns it should be a viewmodel class, not your window/usercontrol. When we say "viewmodel", we mean it implements INotifyPropertyChanged and raises PropertyChanged when its property values change. Again, this is about keeping the UI informed of changes.

Keeping the UI informed is what bindings are all about: They listen for changes in the viewmodel and update the UI.

So you need a main viewmodel that looks like this:

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    //  C#6
    /*
    protected virtual void OnPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string propName = null) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
    */

    protected virtual void OnPropertyChanged(string propName)
    {
        var handler = PropertyChanged;
        if (handler != null) {
            handler(this, new PropertyChangedEventArgs(propName));
        }
    }
}

public class MainViewModel : ViewModelBase
{
    private ObservableCollection _projects;
    public ObservableCollection Projects {
        get { return _projects; }
        set {
             if (value != _projects) {
                 _projects = value;
                 OnPropertyChanged(nameof(Projects));
            }
        }
    }

    public void BuildData() {
        Projects = new ObservableCollection();

        //  do the rest of the stuff
    }
}

And you should rewrite your Project class as a ProjectViewModel derived from ViewModelBase, make it raise PropertyChanged in the same way, and use ObservableCollection for Children.

And in your main window...

public MainWindow()
{
    InitializeComponent();

    var vm = new MainViewModel();
    vm.BuildData();
    DataContext = vm;
}

Your XAML needs a little work, too.

Projects has a capitalized name now
For the item template, you are binding to the property of the child item which provides the tree view item's children. That's the Children property of your Project class.
A datatemplate tells XAML how to present the content of a control. The tree creates a TreeViewItem with a Project as its DataContext, and then uses your HierarchicalDataTemplate to turn that DataContext into some kind of visual content. You don't use the template to create a TreeViewItem; you use it to create the visual stuff in the TreeViewItem.

So here's the new XAML:

There's no reason to get in the habit of DataContext = this;. Once you start that, the next thing you know you'll be doing it in a UserControl and coming here asking why all your bindings to it in the parent XAML are broken. Dependency properties are a bigger hassle than INPC, and you end up with code that ought to be in a viewmodel mixed into your MainWindow code. If you use viewmodelsit's the easiest thing in the world to shuffle your UI around. Maybe you want the original content of your main window to be just one of three tab pages in the main window. Keeping code separated properly makes that kind of thing much simpler.

Databinding with TreeView in WPF

Answers (1)

Related Questions