Applying animated ScaleTransform in code problem

Question

I am trying to find out why the code below does not seem to work. It does not give an error - it simply doesn't scale. It actually does seem to work if I change it as to my second code sample. Anyone got any idea?

Thanks

public static void StartMouseEnterAnimation(Button button)
    {
        Storyboard storyboard = new Storyboard();

        ScaleTransform scale = new ScaleTransform(1.0, 1.0, 1, 1);
        button.RenderTransformOrigin = new Point(0.5, 0.5);
        button.RenderTransform = scale;

        DoubleAnimation growAnimation = new DoubleAnimation();
        growAnimation.Duration = TimeSpan.FromMilliseconds(300);
        growAnimation.From = 1;
        growAnimation.To = 1.8;
        storyboard.Children.Add(growAnimation);

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

        storyboard.Begin();
    }

--- The following DOES work but I had to create a TransformGroup and reference this through a more complicated PropertyChain...

public static void StartMouseEnterAnimation(Button button)
    {    
        Storyboard storyboard = new Storyboard();            
        ScaleTransform scale = new ScaleTransform(1.0, 1.0, 1, 1);
        button.RenderTransformOrigin = new Point(0.5, 0.5);
        TransformGroup myTransGroup = new TransformGroup();
        myTransGroup.Children.Add(scale);
        button.RenderTransform = myTransGroup;

        DoubleAnimation growAnimation = new DoubleAnimation();
        growAnimation.Duration = TimeSpan.FromMilliseconds(100);
        //growAnimation.From = 1;
        growAnimation.To = 1.1;
        storyboard.Children.Add(growAnimation);

        DependencyProperty[] propertyChain = new DependencyProperty[]
        {
            Button.RenderTransformProperty, 
            TransformGroup.ChildrenProperty,
            ScaleTransform.ScaleXProperty
        };
        string thePath = "(0).(1)[0].(2)";
        PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
        Storyboard.SetTargetProperty(growAnimation, myPropertyPath);
        Storyboard.SetTarget(growAnimation, button);

        storyboard.Begin();
   }

Answer 1

I was able to get it to work by tweaking your first code sample like so:

public static void StartMouseEnterAnimation(Button button) {
    Storyboard storyboard = new Storyboard();

    ScaleTransform scale = new ScaleTransform(1.0, 1.0);
    button.RenderTransformOrigin = new Point(0.5, 0.5);
    button.RenderTransform = scale;

    DoubleAnimation growAnimation = new DoubleAnimation();
    growAnimation.Duration = TimeSpan.FromMilliseconds(300);
    growAnimation.From = 1;
    growAnimation.To = 1.8;
    storyboard.Children.Add(growAnimation);

    Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.ScaleX"));
    Storyboard.SetTarget(growAnimation, button);

    storyboard.Begin();
}

Instead of new PropertyPath(ScaleTransform.ScaleXProperty)), I used new PropertyPath("RenderTransform.ScaleX")), and I set the target of the storyboard to the button (not the scaleTransform itself).

Hope that helps!

Answer 2

Here is an example of how to animate in two different directions on a ScaleTransform, when you have a transform group. The path string shows which part is being animated. Also, because Canvas is freezable, you have to RegisterName. (I don't know what this means, but it is required)

        var storyBoard = new Storyboard();
        var group = new TransformGroup();
        var scale = new ScaleTransform(Zoom, Zoom);
        group.Children.Add(scale);
        group.Children.Add(new TranslateTransform(_translateX,_translateY));
        MainCanvas.RenderTransform = group;

        RegisterName("MainCanvas",MainCanvas);

        var growAnimation = new DoubleAnimation();
        growAnimation.Duration = TimeSpan.FromMilliseconds(1000);
        growAnimation.From = _oldZoom;
        growAnimation.To = Zoom;
        storyBoard.Children.Add(growAnimation);

        var growAnimation2 = new DoubleAnimation();
        growAnimation2.Duration = TimeSpan.FromMilliseconds(1000);
        growAnimation2.From = _oldZoom;
        growAnimation2.To = Zoom;

        storyBoard.Children.Add(growAnimation2);

        string thePath = "(0).(1)[0].(2)"; // Not used - just to show the syntax


        Storyboard.SetTargetProperty(growAnimation, new PropertyPath("RenderTransform.Children[0].ScaleX"));
        Storyboard.SetTargetProperty(growAnimation2, new PropertyPath("RenderTransform.Children[0].ScaleY"));
        Storyboard.SetTargetName(growAnimation, "MainCanvas");
        Storyboard.SetTargetName(growAnimation2,"MainCanvas");
        storyBoard.Begin(this);