Problems with Transform Animations in GroupTransform

Question

I have a fish image in a WPF project (VB.net code behind), and I am trying to animate it by swimming back and forth using two transforms.

For some reason, if I only have ScaleTransform animation (only with ScaleTransform and without TransformGroup), the animation works fine, the TranslateTransform animation does not work. In addition, ScaleTransform does not work when inside a 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> 

Answer 1

These property paths are all wrong, but I would vote to just avoid all the problems just by using these paths using Storyboard.TargetName ; it 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 this only with Storyboard.TargetProperty , these will be the correct paths, as I only found out now:

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

What makes sense if you think about it.