WPF add / edit / delete tree nodes in MVVM style

Question

I am new to MVVM and WPF. I did some research and read an article by Josh Smith about MVVM and this , and this .

I think I have no problem creating a treeview in WPF. The point is in my application, the left panel is a tree structure, on the right panel some properties of the selected node tree will be displayed, which the user can click on the button to edit the properties and save them in the data source (and potentially affect the treeview element). In addition, the user will be able to add / remove a child element node / grandchild node.

I can not find any article / example to implement this using MVVM.

Currently, I think that in the view models for the child node and grandchild node, I will add a public property that points to Usercontrol. The right panel will attach the selected Usercontrol element to the tree. The fact is that when a user adds a node / grand child node child, the right panel will be used so that the user can fill in the information and save it. I am not sure if this will affect the binding.

And other problems, such as editing the properties of a node tree, mean copying all the child node information from node to a new node and removing the old node from the tree and adding the new node to the tree?

Can someone point me to any good articles about such an implementation or give an approximate idea of ​​the problem that I should take note of etc.

Thank you very much. Angela

Answer 1

Much depends on your setup, but here is the path I used before.

Note that you may need the event type of the ChildPropertyChanged event (I made this name) to create bubbles for tree changes at the root of the tree.

To add node

I created a ViewModel that contains:

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

In view:

• Bind TreeView to tree data collections.
• Bind selected TreeView to CurrentNode
• Bind new node data controls to NewNode properties
• Snap button to AddCommand

In AddCommand:

• Add NewNode to CurrentNode and reinitialize the NewNode property.

To edit node

In ViewModel

• add command: UpdateCommand
• add command: EditCommand

In view

• bind some controls to CurrentNode properties (OneWay binding)
• bind button to EditCommand
• bind button to UpdateCommand

In EditCommand:

• make editing and updating controls visible (I use the State property for binding, see Screen below).

In UpdateCommand:

• write values ​​of edit controls to SelectedNode
• hide editing controls (I use the State property for binding, see Extra below)

To remove node

In viewmodel

• add DeleteCommand

In DeleteCommand:

• remove CurrentNode from collection

Additional

I found it very useful to implement IEditableObject in the ViewModel Node.

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