Animation of adding / removing elements in TreeView - WPF

Question

I know that similar questions were asked regarding the animation of items in ItemsControl, so if a valid answer was sent, it would be great if I could be directed in the right direction.

I have a TreeView data tree where the hierarchy will be at only one level. It can have X number of root nodes with X number of children. However, it is as deep as it happens. The problem I am facing is the best way to add / move / delete items in a data collection.

The TreeView ItemContainerStyle is set to a custom ControlTemplate to provide a MouseOver and Selected style. Then I use the HierarchialDataTemplate to further place the various types of elements associated with it.

I found many examples demonstrating how to animate the Element Extension, but not so much in terms of animation when an element is added / moved / deleted. One example found here shows pretty much what I need, but includes many links to code and a library that I would, in other words, consider to outsiders. I am not opposed to including my own versions of similar functionality. I just hope that I can hook up event triggers or an equivalent to achieve the same goal.

I did not post any sample code because I am really open to any solution and have not written anything that “does not work” and needs to be fixed. I am more or less looking for opinions on where to start. The type of animation used is also irrelevant, because as long as I know how to fully animate adding / moving / deleting, I can change and modify the code according to my preferences and the final effects.

Answer 1

Since I think you are asking: "How do I approach this problem?" I can give you some suggestions.

You have two main problems:

• the mechanics of the effect you are trying to achieve.
• wiring that affects the architecture of your program.

For the first problem, I would recommend prototyping your effects with a simple application other than MVVM. In particular, you can use the VisualStateManager ideas on the link that you linked to, and Animation concepts that you are already familiar with, and good old-fashioned code, without complex libraries, to get the effect of inserting, moving, and deleting a tree. Remember that you will try to get rid of all the code later and that it is only for prototyping. Basically you port this link to the code and delete everything that it uses.

Once you get the effect that you are trying to achieve, you now have an old MVVM problem related to the fact that it works with your “loose-joint” look model. WPF makes data binding properties straightforward, so MVVM is MVVM worldwide for data. But for operations, there are many obstacles to clearly connecting events to operations, and each MVVM infrastructure seems to do it differently. MVVMLight has an EventToCommand and System.Windows.Interactivity has a CallMethodAction , and it goes on and on.

So, to integrate your effect with your choice of MVVM, use this structure mechanism to connect events to operations, whatever that is. However, you can always use a little code to work with your view or send events directly to your view model if you cannot find another way to make the glue work. It depends on you.