WPF: How to animate a list of components?

Question

Let's say I have a list of visual objects (CustomControls). They could be inside a StackPanel or be items on a ListView, I think the container is part of the answer to this question.

Visually, you can think of these objects as items on a queue. Every time I pop an object from the bottom of this queue, I'd like to animate the whole queue with the popped object going out of the view frame and the new one (imagine that the viewing frame only displays a subset) sliding in with the rest of the elements.

What's the best approach to create this animation and what's the best container for it?

Answer 1

Have a look at Kevin Moore's AnimatingTilePanel. When elements are added to or removed from the panel, the rest of the items are animated to move out of the way or occupy the left over space. You would want to do something similar except based on StackPanel logic.

You want to approach the problem in two parts though. The second would presumably be much easier.

1. Create a panel (not a control) that animates its children the way you want.
2. Create a ListBox template that specifies an ItemsPanelTemplate that uses your new panel instead of the default stack panel.

In the end, the idea is that you don't need to create a custom ListBox control at all. Your interactions with the ListBox (which would be through its Items property or preferably a bound collection) would be done exactly the same as if there were no animation at all. You would rely upon the custom Panel class to do the work of providing the animation.

UPDATE
I also found this sample, AnimatedLayoutPanel which is very similar but there's a nice Silverlight-based showcase.