DoubleAnimation in ScaleTransform

Question

I'm trying, as an exhibition, to use a DoubleAnimation on the ScaleX and ScaleY properties of a ScaleTransform. I have a rectangle (144x144) which I want to make rectangular over five seconds.

My XAML:

<Window x:Class="ScaleTransformTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300" Loaded="Window_Loaded">
    <Grid>
        <Rectangle Name="rect1" Width="144" Height="144" Fill="Aqua">
            <Rectangle.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</Window>

My C#:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    ScaleTransform scaly = new ScaleTransform(1, 1);
    rect1.RenderTransform = scaly;

    Duration mytime = new Duration(TimeSpan.FromSeconds(5));
    Storyboard sb = new Storyboard();

    DoubleAnimation danim1 = new DoubleAnimation(1, 1.5, mytime);
    DoubleAnimation danim2 = new DoubleAnimation(1, 0.5, mytime);
    sb.Children.Add(danim1);
    sb.Children.Add(danim2);

    Storyboard.SetTarget(danim1, scaly);
    Storyboard.SetTargetProperty(danim1, new PropertyPath(ScaleTransform.ScaleXProperty));
    Storyboard.SetTarget(danim2, scaly);
    Storyboard.SetTargetProperty(danim2, new PropertyPath(ScaleTransform.ScaleYProperty));

    sb.Begin();
}

Unfortunately, when I run this program, it does nothing. The rectangle stays at 144x144. If I do away with the animation, and just

ScaleTransform scaly = new ScaleTransform(1.5, 0.5);
rect1.RenderTransform = scaly;

it will elongate it instantly, no problem. There is a problem elsewhere. Any suggestions? I have read the discussion at http://www.eggheadcafe.com/software/aspnet/29220878/how-to-animate-tofrom-an.aspx in which someone seems to have gotten a pure-XAML version working, but the code is not shown there.

EDIT: At http://stackoverflow.com/questions/2131797/applying-animated-scaletransform-in-code-problem it seems someone had a very similar problem, I am fine with using his method that worked, but what the heck is that string thePath = "(0).(1)[0].(2)"; all about? What are those numbers representing?

Answer 1

Here's the deal, this is a quote from MSDN's Storyboards Overview entry, in the section titled 'Where Can You Use a Storyboard?':

A Storyboard can be used to animate dependency properties of animatable classes (for more information about what makes a class animatable, see the Animation Overview). However, because storyboarding is a framework-level feature, the object must belong to the NameScope of a FrameworkElement or a FrameworkContentElement.

This got me thinking that the ScaleTransform object does not belong to the NameScope of any FrameworkElement. Even though the Rectangle is a FrameworkElement, since the ScaleTransform is not part of its logical children, but rather a value assigned to some other property (in this case the RenderTransform property).

To get around that you need to specify your target object and PropertyPath differently, thus:

Storyboard.SetTarget(danim1, rect1);
Storyboard.SetTargetProperty(danim1, 
    new PropertyPath("RenderTransform.(ScaleTransform.ScaleX)"));

Tried it and it works, even though I don't fully understand the quote from MSDN myself :-)