Animating the Addition / Removal of items within a TreeView - WPF

Question

I know similar questions have been asked in relation to animating items within an ItemsControl so if an acceptable answer has been posted then it would be great if I could be pointed in the right direction.

I have a databound TreeView where the hierarchy will only ever be one level deep. It could have X number of root nodes with X number of children. However that's as deep as it gets. The problem I'm facing is how is the best way to animate the add/move/remove of items in the databound collection.

The TreeView's ItemContainerStyle is set to a custom ControlTemplate, to provide MouseOver and Selected styling. Then I use a HierarchialDataTemplate to further layout the different types of Item's being bound to it.

I have found many examples demonstrating how to animate the Expanding of items but not a whole lot in terms of animating when an item is added / moved / removed. One example found here shows pretty much what I'm after but incorporates a lot of code and library references that I would in other words consider extraneous. I'm not against incorporating my own versions of similar functionality. I'm just hoping I can hook into event triggers or equivalent to accomplish the same goal.

I haven't posted any example code because I'm really open to any solution and haven't written anything that "does't work" and needs fixing. I am more or less looking for opinions on where to start. The type of animation being applied is also irrelevant because as long as I know how to animate the add/move/remove at all, then I can modify and change the code to suit my preferences and overall final effects.

Answer 1

Since I think you are asking "how should I approach this problem?" I can give you some suggestions.

You have two basic problems at hand:

• the mechanics of the effect you are trying to achieve
• wiring that effect into your program's architecture

For the first problem I would recommend prototyping your effects using a simple non-MVVM application. In particular you can use the VisualStateManager ideas from the link you referenced and Animation concepts you are already familiar with and good old fashioned code-behind with no complicated libraries to get the tree insertion, motion, and removal effects working. Remember that you are going to try to get rid of all the code-behind later and that this is only for prototyping. Basically you are porting that link to code-behind and removing whatever cruft it uses.

Once you get the effect you are trying to achieve, now you have the age old MVVM problem of making it work with your view-model with "loose coupling". WPF makes databinding properties straightforward so MVVM is MVVM all the world around for data. But for operations there are many, many hurdles to connecting events to operations cleanly and every MVVM framework seems to do it differently. MVVMLight has EventToCommand and System.Windows.Interactivity has CallMethodAction and it goes on and on.

So to integrate your effect with your MVVM framework of choice, use that framework's mechanism to connect events to operations, whatever that is. However, you can always use a little bit of code-behind to work with your view or dispatch events directly to your view model if you can't find another way to make the glue work. It's up to you.