views:

992

answers:

0

I am try to add a flip animation to a user control I built. The user control is simple it has a 87x87 image front and back and some properties. It is suppose to represent a tile in a game I am working on for fun. I am trying to animate a flipping affect of the user picking the tile from the deck. I feel I need to do this through code instead of xaml for two reasons: 1. There is another transform after the tile is flip to rotate the tile (currently working) 2. After the tile is flipped I want to unhook the event.

The issue that I am getting is only the last animation runs after the method has exited. I think I need a Storyboard but all the examples I looked at confused me in two ways:

How do I change the image mid story board, and what do I set the targetProperty to be I have been working off these two blogs.

http://www.codeguru.com/csharp/csharp/cs_misc/userinterface/article.php/c12221 http://blogs.msdn.com/tess/archive/2009/03/16/silverlight-wpf-flipimage-animation.aspx

    public void FlipFront()
    {
            DoubleAnimation flipfront = new DoubleAnimation(0, 90, new Duration(new     TimeSpan(0, 0, 1)));
        SkewTransform skew = new SkewTransform();
        this.RenderTransform = skew;
        skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront);         


    }

    public void FlipBack()
    {

        ImageSourceConverter source = new ImageSourceConverter();
        this.ImageFace.Source = new BitmapImage(new Uri("Back.jpg", UriKind.Relative));

        DoubleAnimation flipfront = new DoubleAnimation(90, 0, new Duration(new TimeSpan(0, 0, 1)));
        SkewTransform skew = new SkewTransform();
        this.RenderTransform = skew;
        skew.BeginAnimation(SkewTransform.AngleYProperty, flipfront); 
    }

    public void Flip()
    {
        FlipFront();
        FlipBack();
    }

I broke flip into two separate methods because I though it would help fix the issue I am experiencing.