Add, rename, remove item in treeview with MVVM WPF

Question

I refer excellent tutorial of Josh Smith to work with treeview.

https://www.codeproject.com/Articles/26288/Simplifying-the-WPF-TreeView-by-Using-the-ViewMode

I try to modified with this code to add, remove, rename item to this treeview but I don't know why it not update

Rename item command

#region RenameCommand

/// <summary>
/// Returns the command used to execute a search in the family tree.
/// </summary>
public ICommand RenameCommand
{
    get { return _renameCommand; }
}

private class RenameFamilyTreeCommand : ICommand
{
    readonly FamilyTreeViewModel _familyTree;

    public RenameFamilyTreeCommand(FamilyTreeViewModel familyTree)
    {
        _familyTree = familyTree;
    }

    public bool CanExecute(object parameter)
    {
        return true;
    }

    event EventHandler ICommand.CanExecuteChanged
    {
        // I intentionally left these empty because
        // this command never raises the event, and
        // not using the WeakEvent pattern here can
        // cause memory leaks.  WeakEvent pattern is
        // not simple to implement, so why bother.
        add { }
        remove { }
    }

    public void Execute(object parameter)
    {
        //MessageBox.Show("Rename command");



        _familyTree._rootPerson.Children[0].Children[0].Header = "Hello";

        if (_familyTree._rootPerson.Children[0] == null)
            return;

        // Ensure that this person is in view.
        if (_familyTree._rootPerson.Children[0].Parent != null)
            _familyTree._rootPerson.Children[0].Parent.IsExpanded = true;

        _familyTree._rootPerson.Children[0].IsSelected = true;
    }
}

#endregion // RenameCommand

Add item command

#region AddCommand

    /// <summary>
    /// Returns the command used to execute a search in the family tree.
    /// </summary>
    public ICommand AddCommand
    {
        get { return _addCommand; }
    }

    private class AddFamilyTreeCommand : ICommand
    {
        public FamilyTreeViewModel _familyTree;

        public AddFamilyTreeCommand(FamilyTreeViewModel familyTree)
        {
            _familyTree = familyTree;
        }

        public bool CanExecute(object parameter)
        {
            return true;
        }

        event EventHandler ICommand.CanExecuteChanged
        {
            // I intentionally left these empty because
            // this command never raises the event, and
            // not using the WeakEvent pattern here can
            // cause memory leaks.  WeakEvent pattern is
            // not simple to implement, so why bother.
            add { }
            remove { }
        }

        public void Execute(object parameter)
        {
            Person newPerson = new Person();
            newPerson.Header = "New Person";
            newPerson.Name = "1.1.1.75";
            PersonViewModel newPersonViewModel = new PersonViewModel(newPerson);
            ////_rootPerson.Children.Add(newPersonViewModel);


            //_rootPerson.Children.Add(newPersonViewModel);

            //if (newPersonViewModel.Parent != null)
            //    newPersonViewModel.Parent.IsExpanded = true;

            //newPersonViewModel.IsSelected = true;

            _familyTree._rootPerson.Children[0].Children.Add(newPersonViewModel);

            if (_familyTree._rootPerson.Children[0] == null)
                return;

            // Ensure that this person is in view.
            if (_familyTree._rootPerson.Children[0].Parent != null)
                _familyTree._rootPerson.Children[0].Parent.IsExpanded = true;

            _familyTree._rootPerson.Children[0].IsSelected = true;


        }
    }

#endregion // AddCommand

Add command working fine but it's seem to be GUI not update. Rename command is not working but GUI is updated. I don't know reason why, And it's hard to access person class (use parent, person, children,..)

Is there anyone successfully update add, rename, remove command to Josh Smith project.

p/s: I debug by messagebox.show and see binding command for add and rename are working well, But the problem is I don't know what exactly to use Add, remove, rename person in Josh Smith project

Answer 1

Adding items is not reflected in the UI, because the source collection Person.Children doesn't implement INotifyCollectionChanged. Whenever you need dynamic collections, where add, remove or move operations should update the binding target, you should use the ObservableCollection<T>, which implements INotifyCollectionChanged.

Similar applies to the Person.Name property. If you want a property's change to be reflected to the UI, then your view model must implement INotifyPropertyChanged and raise the INotifyPropertyChanged.PropertyChanged event whenever the binding source (the view model property) has changed.

Generally, when a class serves as a binding source for data binding, then this class must implement INotifyPropertyChanged (if this interface is not implemented, then the performance of data binding becomes very bad).
When the modification of a property should update the UI (binding.target) by invoking the data binding, then the modified property must raise the INotifyPropertyChanged.PropertyChanged event.
When the modification of a collection should update the UI (binding target) by invoking the data binding, then the modified collection must implement INotifyCollectionChanged and raise the INotifyCollectionChanged.CollectionChanged event. ObservableCollection provides a default implementation of INotifyCollectionChanged.

The following example follows the above rules. The changes made to the Person class should fix your issues. Changes to the data model will now be reflected in the TreeView:

public class Person : INotifyPropertyChanged
{
    private ObservableCollection<Person> _children = new ObservableCollection<Person>();
    public ObservableCollection<Person> Children
    {
        get { return _children; }
    }

    private string name
    public string Name 
    {
        get => this.name;
        set 
        { 
            this.name = value; 
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
      this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}