How do I trigger specific parts of a storyboard in WPF?

Question

I have several grids in my window. I have created a storyboard that moves them left by x pixels when a button is clicked. I want to make it so that when the button is clicked again those grids move another x pixels, however I'm unable to find out how to do this as it's not a common task on tutorials.

I have tried creating a second storyboard to do this, however that won't work as then the grids will be back at their starting positions.

One solution might be to create a third set of keyframes after the first two sets, and somehow pause the animation when it gets there, and resumes it again when the button is clicked, however I'm not sure how to pause a storyboard when it reaches a keyframe. This would also make reversing the grids difficult (using this approach http://social.msdn.microsoft.com/forums/en-US/wpf/thread/ac54de71-f750-4940-91a2-231810308727/ ), as I'd like to make another button make the grids go the other way.

Answer 1

I think the answer to this question in WPF is that you can't. WPF (AFAIK) does not allow you to repetitively TranslateTransform an object. You would need to keep track of where it is, and manage the positions of each which is messy.

I found this control which is what I was looking for: http://bot.codeplex.com/ (the Zap Scrollbar)