Siverlight animation issue

Question

Hello everyone,

Suppose I have the following XAML snippets, my confusion is what is the meaning of the value for Storyboard.TargetProperty? i.e. the meaning of "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)".

  <DoubleAnimationUsingKeyFrames Storyboard.TargetName="p1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" BeginTime="00:00:00">
   <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
   <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="1"/>
   <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
  </DoubleAnimationUsingKeyFrames>

...

  <Path Height="2.75" Width="2.75" Data="M2.75,1.375 C2.75,2.1343915 2.1343915,2.75 1.375,2.75 C0.61560845,2.75 0,2.1343915 0,1.375 C0,0.61560845 0.61560845,0 1.375,0 C2.1343915,0 2.75,0.61560845 2.75,1.375 z" Fill="#FF9F9B9B" Stretch="Fill" Stroke="#FF000000" StrokeThickness="0" Canvas.Left="7" Canvas.Top="14" x:Name="p1">
   <Path.RenderTransform>
    <TransformGroup>
     <ScaleTransform/>
     <SkewTransform/>
     <RotateTransform/>
     <TranslateTransform/>
    </TransformGroup>
   </Path.RenderTransform>
  </Path>

thanks in advance, George

Answer 1

The Storyboard.TargetProperty specifies a particular property to change over time.

If you were writing it yourself, you could say something like:

            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myRectange"
 Storyboard.TargetProperty="Width" BeginTime="00:00:00">
                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.2500000" Value="1"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>

and simplify things quite a bit. In the above example, you're changing the "Width" property of your rectangle over time. Blend, in its infinite WYSIWYG fashion, makes the targeting a little more complicated.

In your example, a transform is applied to the rectangle, and you're changing that transform over time.

Clarification: Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" is a PropertyPath. It specifies the property that will be changed over time. In this example, we're targeting the Rectangle's->RenderTransforms->first child (the ScaleTransform)->Scale X property. That's how we say what's going to change. The keyframes specify how that value changes over time.

Something to keep in mind: A transform is a static change. Apply a ScaleX of 2, and the thing doubles in the X dimension. But nothing changes over time (nothing moves on the screen). For that, you need an animation to change the transform over time.

hth, Erik