Trouble Animating Transforms in GroupTransform

Question

I have an image of a fish in a WPF project (VB.net code behind), and I'm attempting to animate it swimming back and forth using two transforms.

For some reason, while if I only animate the ScaleTransform (with ScaleTransform alone, and no TransformGroup), the animation works fine, the TranslateTransform animation does not. Additionally, the ScaleTransform does not work when inside the TransformGroup.

Here is the code I'm using. What am I doing wrong?

<Image Height="90" HorizontalAlignment="Left" Name="Fish1" Stretch="Fill" VerticalAlignment="Top" Width="260" Source="/VBP-WORD4WORD;component/Images/IMG-FISH1.png" Canvas.Left="24" Canvas.Top="67" Margin="-28,70,0,0">
    <Image.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1"/>
            <TranslateTransform X="0"/>
        </TransformGroup>
    </Image.RenderTransform>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Image.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Duration="0:0:30" Storyboard.TargetProperty="RenderTransform.(TransformGroup.TranslateTransform.X)" RepeatBehavior="Forever">
                            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="407"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="680"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="265"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="0"/>
                        </DoubleAnimationUsingKeyFrames>
                        <DoubleAnimationUsingKeyFrames Duration="0:0:30" Storyboard.TargetProperty="RenderTransform.(TransformGroup.ScaleTransform.ScaleX)" RepeatBehavior="Forever">
                            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="-1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="-1"/>
                            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="1"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Image.Triggers>
</Image>

H.B. · Accepted Answer · 2011-11-23T13:35:34.540

Those property paths are all wrong, but i would vote for just avoiding the whole trouble of only using those paths by utilizing Storyboard.TargetName; this works:

<!-- ... -->
<TransformGroup>
    <ScaleTransform  x:Name="scaleTransform" ScaleX="1"/>
    <TranslateTransform x:Name="translateTransform" X="0"/>
</TransformGroup>
  <!-- ... -->
    <Storyboard>
        <DoubleAnimationUsingKeyFrames Duration="0:0:30"
                                       Storyboard.TargetProperty="ScaleX"
                                       Storyboard.TargetName="scaleTransform"
                                       RepeatBehavior="Forever">
            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="1"/>
            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="-1"/>
            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="-1"/>
            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Duration="0:0:30"
                                       Storyboard.TargetProperty="X"
                                       Storyboard.TargetName="translateTransform"
                                       RepeatBehavior="Forever">
            <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
            <LinearDoubleKeyFrame KeyTime="0:0:14.9" Value="407"/>
            <LinearDoubleKeyFrame KeyTime="0:0:15" Value="680"/>
            <LinearDoubleKeyFrame KeyTime="0:0:29.9" Value="265"/>
            <LinearDoubleKeyFrame KeyTime="0:0:30" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>

If you really want to do it using Storyboard.TargetProperty only, these would be the correct paths as i found out just now:

Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX"
Storyboard.TargetProperty="RenderTransform.Children[1].X"

Which does make perfect sense if you think about it.

It worked for me, you must have done something different, like using `Name` instead of `x:Name` or not adjusting the property path correctly (i switched the order of the two animations to be the same as the order in the TransformGroup by the way) — H.B., Apr 02 '11 at 02:08
Ah, the x:Name would be the reason. Either way, its working now. Up vote for providing two awesome solutions. :3 — CodeMouse92, Apr 02 '11 at 02:38
+1 :D I come here with the same problem. This answer help me a lot to understand how TransformGroup works. Thaks. — Jonathan, Nov 23 '11 at 13:19
@Jonathan: Wow, a StackOverflow question that is useful to more than one person, what an unusual occurence! :) — H.B., Nov 23 '11 at 13:38
I think the first method doesn't work for defining the Storyboard in Resources — Markus Weber, Apr 01 '16 at 09:59

Trouble Animating Transforms in GroupTransform

1 Answers1

Linked