Convert C# animation code to storyboard

Question

I have the following method which works. I'd like to put it in a utility method that returns a Storyboard. Every attempt I have made at converting this to a Storyboard has failed, and I've spent a lot of time researching. I'm ready to give up unless someone comes to my rescue.

Here's the code I want to convert:

public override void Begin(FrameworkElement element, int duration)
{
    var transform = new ScaleTransform();
    element.LayoutTransform = transform;

    var animation = new DoubleAnimation
                        {
                            From = 1,
                            To = 0,
                            Duration = TimeSpan.FromMilliseconds(duration),
                            FillBehavior = FillBehavior.Stop,
                            EasingFunction = new QuinticEase { EasingMode = EasingMode.EaseIn }
                        };

    transform.BeginAnimation(ScaleTransform.ScaleXProperty, animation);
    transform.BeginAnimation(ScaleTransform.ScaleYProperty, animation);
}

So, instead of the two BeginAnimation() calls, I want to return a Storyboard so all I have to do is call storyboard.Begin(). I know this shouldn't be that hard to do, but I'm just not getting it.

Thanks.

EDIT: In response to HB's suggestions, I tried the following code, which still does not work:

private static Storyboard CreateAnimationStoryboard(FrameworkElement element, int duration)
{
    var sb = new Storyboard();
    var scale = new ScaleTransform(1, 1);
    element.RenderTransform = scale;
    element.RegisterName("scale", scale);

    var animation = new DoubleAnimation
    {
        From = 1,
        To = 0,
        Duration = TimeSpan.FromMilliseconds(duration),
        FillBehavior = FillBehavior.Stop,
        EasingFunction = new QuinticEase { EasingMode = EasingMode.EaseIn }
    };
    sb.Children.Add(animation);

    Storyboard.SetTarget(animation, scale);
    Storyboard.SetTargetProperty(animation, new PropertyPath(ScaleTransform.ScaleXProperty));

    return sb;
}

I know I only animated the X axis - just want to get something to work first.

Answer 1

You'll need two animations and then set the attached Storyboard properties to animated the right property on the right object using SetTargetProperty and SetTargetName .

Due to how storyboards work you also need to set a namescope ( NameScope.SetNameScope ), register the name of the transform, and call StoryBoard.Begin with the containing element overload .

eg

NameScope.SetNameScope(element, new NameScope());

var transform = new ScaleTransform();
var transformName = "transform";
element.RegisterName(transformName, transform);
element.RenderTransform = transform;

var xAnimation = new DoubleAnimation(2, TimeSpan.FromSeconds(1));
var yAnimation = xAnimation.Clone();

var storyboard = new Storyboard()
{
    Children = { xAnimation, yAnimation }
};

Storyboard.SetTargetProperty(xAnimation, new PropertyPath("(ScaleTransform.ScaleX)"));
Storyboard.SetTargetProperty(yAnimation, new PropertyPath("(ScaleTransform.ScaleY)"));

Storyboard.SetTargetName(xAnimation, transformName);
Storyboard.SetTargetName(yAnimation, transformName);

storyboard.Begin(element);

Answer 2

I suggest using Expression Blend and start recording from there, it should create your storyboards in XAML. Rather than hard coding it with C# and trying to translate it 1 by 1 to storyboard thus it can be a prone error.