Animating rectangle position in code using storyboard

Question

I am making c#/xaml puzzle game on Windows Phone 8. I have a grid with rows and columns where there is rectangle in each grid. (I have added these rectangles on runtime)

I already have a code that will move a rectangle into another column or row if I tap on it.

I am trying to make this transition a smooth animation using storyboard.

Here is a code that does not work but shows what I want to do.

    private void AnimateRectangle(Rectangle rectangle, int sourceColumn, int sourceRow, int targetColumn, int targetRow)
    {
        Storyboard s = new Storyboard();
        DoubleAnimation doubleAniColumn = new DoubleAnimation();
        doubleAniColumn.From = sourceColumn;
        doubleAniColumn.To = targetColumn;
        doubleAniColumn.Duration = new Duration(TimeSpan.FromMilliseconds(500));
        Storyboard.SetTarget(doubleAniColumn, rectangle);
        Storyboard.SetTargetProperty(doubleAniColumn, new PropertyPath("(Grid.SetColumn)"));

        DoubleAnimation doubleAniRow = new DoubleAnimation();
        doubleAniRow.From = sourceRow;
        doubleAniRow.To = targetRow;
        doubleAniRow.Duration = new Duration(TimeSpan.FromMilliseconds(500));
        Storyboard.SetTarget(doubleAniRow, rectangle);
        Storyboard.SetTargetProperty(doubleAniRow, new PropertyPath("(Grid.SetRow)"));

        s.Children.Add(doubleAniColumn);
        s.Children.Add(doubleAniRow);

        s.Begin();
    }

Any help would be greatly appreciated.

Answer 1

Well, you cannot animate Grid.Row property since 0.5 doesn't make sense. It is either row 0 or row 1.

What you could do here is animate its position and once completed change row and column. Like this:

private void AnimateRectangle(Rectangle rectangle, int sourceColumn, int sourceRow, int targetColumn, int targetRow)
{
rectangle.RenderTransform = new CompositeTransform();

    Storyboard s = new Storyboard();
    DoubleAnimation doubleAniColumn = new DoubleAnimation();
    doubleAniColumn.From = 0;
    doubleAniColumn.To = ...; // calculate correct offset here
    doubleAniColumn.Duration = new Duration(TimeSpan.FromMilliseconds(500));
    Storyboard.SetTarget(doubleAniColumn, rectangle);
    Storyboard.SetTargetProperty(doubleAniColumn, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateY)"));

    DoubleAnimation doubleAniRow = new DoubleAnimation();
    doubleAniRow.From = 0;
    doubleAniRow.To = ...; // calculate correct offset here
    doubleAniRow.Duration = new Duration(TimeSpan.FromMilliseconds(500));
    Storyboard.SetTarget(doubleAniRow, rectangle);
    Storyboard.SetTargetProperty(doubleAniRow, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));

    s.Children.Add(doubleAniColumn);
    s.Children.Add(doubleAniRow);

    EventHandler eventHandler = null;
    eventHandler = (sender, o) =>
    {
        s.Completed -= eventHandler;
        Grid.SetRow(rectangle, targetRow);
        Grid.SetColumn(rectangle, targetColumn);
        rectangle.RenderTransform = new CompositeTransform();
    };
    s.Completed += eventHandler;
    s.Begin();
}

I wrote this code from the top of my head so don't mind if something doesn't compile at first.