Animate ScaleTransform of a Grid inside a UserControl programmatically in WPF

Question

I'm having a problem porting some animation methods from WinRT to WPF.

I have a Grid inside a UserControl, and I basically want to scale the grid up while reducing its opacity, and then scale it back with its opacity returning to normal.

This is a part of the XAML of the UserControl:

<Grid x:Name="myGrid">
        <Grid.RenderTransform>
            <ScaleTransform x:Name="scaleTransform"/>
        </Grid.RenderTransform>
        <!--Stuff here-->
</Grid>

And I get those objects in code with these two properties in the .cs file of the UserControl:

public Grid MyGrid
{
    get
    {
        return myGrid;
    }
}

public ScaleTransform GridScaleTransform
{
    get
    {
        return scaleTransform;
    }
}

Now, I have a static class with the methods I use to manage the animations.

I need to create a Storyboard with the opacity and scale animations and then return it, so that I can add some handlers to its Closed event and then start it.

This is the static method that isn't properly working:

private static Storyboard createGridAnimation(MyUserControl element, double fromScale, double toScale, bool animIn = false)
{
    Storyboard storyboard = new Storyboard();

    //Add the opacity animation only if the animation is the one that scales up the grid
    if (animIn)
    {
        DoubleAnimationUsingKeyFrames opacityAnim= new DoubleAnimationUsingKeyFrames();
        opacityAnim.Duration = new Duration(TimeSpan.FromMilliseconds(200));
        //Some keyframes here...
        Storyboard.SetTarget(opacityAnim, element.MyGrid);
        Storyboard.SetTargetProperty(opacityAnim, new PropertyPath(UIElement.OpacityProperty));
        storyboard.Children.Add(opacityAnim);
    }            

    //Scale X
    DoubleAnimation scaleXAnimation = new DoubleAnimation() { From = fromScale, To = 2.0, AutoReverse = false };
    scaleXAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100));
    Storyboard.SetTarget(scaleXAnimation, element.GridScaleTransform);
    Storyboard.SetTargetProperty(scaleXAnimation, new PropertyPath(ScaleTransform.ScaleXProperty));

    //Scale Y
    DoubleAnimation scaleYAnimation = new DoubleAnimation() { From = fromScale, To = 2.0, AutoReverse = false };
    scaleXAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(100));
    Storyboard.SetTarget(scaleYAnimation, elemento.GridScaleTransform);
    Storyboard.SetTargetProperty(scaleYAnimation, new PropertyPath(ScaleTransform.ScaleYProperty));

    storyboard.Children.Add(scaleXAnimation);
    storyboard.Children.Add(scaleYAnimation);
    return storyboard;
}

The problem is that the only animation that works is the opacity animation, the two scaleTransform doubleAnimations simply don't start. I read that I could try using the SetTargetName property, but since I'm inside a static method and I only have the reference to the target UIElement, it didn't work (at least, I didn't manage to make it work that way).

What's wrong with this code?

Thanks!

Sergio

Answer 1

Try using the Grid as the target element:

Storyboard.SetTarget(scaleXAnimation, element.MyGrid);
Storyboard.SetTargetProperty(scaleXAnimation,
    new PropertyPath("RenderTransform.ScaleX"));

Storyboard.SetTarget(scaleYAnimation, element.MyGrid);
Storyboard.SetTargetProperty(scaleYAnimation,
    new PropertyPath("RenderTransform.ScaleY"));