WPF add/edit/delete treeview nodes in MVVM style

4
votes

I am new to MVVM and WPF treeview. I have done some research and have read the Josh Smith article on MVVM, and this, and this.

I think I have no problem creating the treeview in WPF. The thing is on my app, the left panel is the tree view, the right panel will display some properties of the selected tree view node, which user can click a button to edit the properties and save it to the data source (and potentially will affect the treeview item). In addition, user would be able to add/delete child node/grandchild node.

I can't seem to find any article/example to implement this using MVVM.

I am currently thinking that in the view models for the child node and grandchild node, I shall add a public property which points to a Usercontrol. The right panel will bind to the treeview's selected item's Usercontrol. The thing is, when user adds a child node/grand child node, the right panel will be used to let user fill in information and save. I am not sure whether it will affect the binding.

And other issues like editing the properties of a tree node will mean to copy all the child node info of the node to the new node and delete the old node from the tree and add the new node to the tree?

Can someone point me to any good articles on a similar implementation or give a rough idea on the issue that I should take note etc?

Thank you very much. Angela

1
wpfmvvmtreeview

1 Answers

2
votes

A lot depends on your setup but here is a way I have used before.

Note that you might need a ChildPropertyChanged event type of thing (I made that name up) to bubble up changes in the tree to the root of the tree.

To add a node

I created a ViewModel that contains:

  • a property for the tree data collection (probably a reference to the root node)
  • a property called NewNode.
  • a property called CurrentNode
  • a command that adds the NewNode to the CurrentNode: AddCommand

In the View:

  1. Bind the TreeView to the tree data collection
  2. Bind the SelectedItem of the TreeView to the CurrentNode
  3. Bind the controls with the data for the new node to the NewNode properties
  4. Bind a button to the AddCommand

In the AddCommand:

  1. Add the NewNode to the CurrentNode and re-initialize the NewNode property.

To edit a node

In the ViewModel

  • add a command: UpdateCommand
  • add a command: EditCommand

In the View

  • bind some edit controls to the CurrentNode's properties (OneWay binding)
  • bind a button to the EditCommand
  • bind a button to the UpdateCommand

In the EditCommand:

  • make the edit controls and update button visible (I use a State property to bind to, see Extra below)

In the UpdateCommand:

  • write the values of the edit controls to the SelectedNode
  • hide the edit controls (I use a State property to bind to, see Extra below)

To delete a node

In the Viewmodel

  • add a DeleteCommand

In the DeleteCommand:

  • remove the CurrentNode from the collection

Extra

I have found it very useful to implement IEditableObject on the ViewModel of a Node.

Using the methods of this interface you can add a cancel button to reverse the EditCommand. By adding a State property to the ViewModel of a Node (New, Modified, Deleted) you can track changes, know what updates to send to the model/database and you can bind the View to it to show/hide elements.