Animate wpf control in a for loop

Question

I am trying to implement an animation where I move my control from one row to another using for loop.

    private void AnimateStoryBoard(int number)
    {
        Storyboard _currentStoryBoard = new Storyboard();

       //Row Animation
        Int32Animation newrowanimation = new Int32Animation();
        newrowanimation.From = number;
        newrowanimation.To = number+1;
        newrowanimation.Duration = new TimeSpan(0, 0, 0, 0, 500);

        Storyboard.SetTargetProperty(newrowanimation, new PropertyPath("(Grid.Row)"));

        _currentStoryBoard.Children.Add(newrowanimation);

        Storyboard.SetTarget(newrowanimation, myrectangle);

        _currentStoryBoard.Begin();
    }

and I am calling it using

        for (int i = 0; i < 10; i++)
        {
            AnimateStoryBoard(i);
        }

Now when I run this I want the animation to go from 1 to 2 then 2 to 3 then 3 to 4...9-10. However the animation directly skips to 9 and then 10.

Also how can I do this in XAML?,and please note that the number 10 here is just an example.The number has to come from code-behind and it will keep changing.

Answer 1

As Alexander Clare mentioned in the comments, you have to setup several animations in a storyboard. Your solution using a loop does not work because your method won't return while running the loop and thus the UI Thread won't be able to render the changes that the storyboard / animations caused.

One solution would be a single Storyboard instance with a variable number of animations in it (one animation per row). Use the BeginTime property to stagger the animations. I would suggest that you use a value from 40ms to 100ms between these animations (I wouldn't go below 20ms).

In code, this would look something like this:

private void AnimateStoryboard(int number)
{
    // Create the storyboard that will be played
    var storyboard = new Storyboard();

    // Create the animation objects for each row change and add them to the storyboard
    var currentBeginTime = TimeSpan.Zero;
    for (var i = 0; i < number; i++)
    {
        var animation = new Int32Animation();
        // Set all the properties that you set on your animation objects before, and additionally use BeginTime
        animation.BeginTime = currentBeginTime;
        storyboard.Children.Add(animation);

        // Update the currentBeginTime to achieve the staggering effect
        currentBeginTime += TimeSpan.FromMilliseconds(50);
    }

    // Finally, start the Storyboard to run all animations
    storyboard.Begin();

}

Answer 2

IMHO there is no need to reinvent the wheel: key frame animation are meant also for this purpose.

So, for creating the animation that you need, you can use something like:

Storyboard storyBoard = new Storyboard();
int gridRowLimit = 5; // here you can set how many rows your grid has

Int32AnimationUsingKeyFrames intKeyFrame = new Int32AnimationUsingKeyFrames();
intKeyFrame.Duration = new TimeSpan(0, 0, 0, 0, gridRowLimit * 500);

for (int i = 1; i < gridRowLimit; i++)
{
    intKeyFrame.KeyFrames.Add(new DiscreteInt32KeyFrame(i));
}

Storyboard.SetTargetProperty(intKeyFrame, new PropertyPath("(Grid.Row)"));
Storyboard.SetTarget(intKeyFrame, yourControl);

storyBoard.Children.Add(intKeyFrame);
storyBoard.Begin();

I hope it helps.