How to reset control after ScaleTransform animation

Question

I am working on a Windows 10 universal application targeting PC. I want to run an animation repeatedly (not in a "RepeatBehaviour" loop, but run it again after something else happens), but I am struggling with resetting the animated control AFTER animation completes.

One of the animations in a storyboard is TranslateTransform. After it completes, I can re-position the control using Canvas.SetLeft and Canvas.SetTop in code. However, after I "disappear" a control using ScaleTransform animation the control remains invisible and I cannot make it visible again. Changing control Height and Width does nothing.

Using AutoReverse in XAML does resolve the issue, but I do not want this to be visible to the user. The control is supposed to "disappear". I want to reset the control in code before the next run, behind the scenes.

My Storyboard and the Border control which I am animating are shown below. This works fine the first time. The image flies across the screen with some rotation and then disappears. Second time the image is invisible until the scale transform runs again.

I tried adding another ScaleTransform animation before the first key frame, to scale from 0 to 1 quickly (I tried duration of "0" or "0.1") but that breaks the whole thing for some reason.

I wonder if RenderTransformOrigin has something to do with this, but am unsure how to use it with TransformGroup. So it is set to (0.5,0.5) to center the rotation.

Any help would be appreciated.

 <Storyboard x:Name="myStoryboard">
        <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="myImage"
                        Storyboard.TargetProperty="(Canvas.Top)"
                        EnableDependentAnimation="False">
                        <SplineDoubleKeyFrame x:Name="MyTopSpline"   KeyTime="0:0:1.9"/>
                    </DoubleAnimationUsingKeyFrames>

                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="myImage"
                        Storyboard.TargetProperty="(Canvas.Left)"
                        EnableDependentAnimation="False"">
                        <SplineDoubleKeyFrame x:Name="MyLeftSpline" KeyTime="0:0:1.9"/>
                    </DoubleAnimationUsingKeyFrames>

                    <DoubleAnimation Storyboard.TargetName="myImage" 
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" 
                             From="0" To="360" BeginTime="0:0:1.0" Duration="0:0:1.9" />

                    <DoubleAnimation Storyboard.TargetName="myImage"
                                      Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)" 
                             From="1" To="0" BeginTime="0:0:1.9" Duration="0:0:0.9" />
                    <DoubleAnimation Storyboard.TargetName="myImage"
                                      Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)" 
                             From="1" To="0" BeginTime="0:0:1.9" Duration="0:0:0.9"  />


</Storyboard>

  <Border Name="myImage"  Height="244" Width="244" Canvas.Left="200" Canvas.Top="100" Visibility="Collapsed" 
RenderTransformOrigin=".5,.5">
        <Border.RenderTransform>
            <TransformGroup>
                    <RotateTransform Angle="0" />
                    <ScaleTransform ScaleX="1" ScaleY="1" />
                </TransformGroup>
         </Border.RenderTransform>
</Border>

Answer 1

Adding this line of code to StoryBoard completed event resolved the issue:

MyStoryboard.Stop();