CODEWITHSUNDEEP
c#wpfxaml
Eayanton
Eayanton

Reputation: 3

Stop and start animation in WPF

I can't get my animation to start and stop, with code behind (c #) I have tried MyStoryboard.stop() and change duration for the animation and it stops, but only when I change content and go back. When I start it again my animations run at strange speeds and again only if I change content

when I change content there is a new speed and if I keep doing it, it bugs

Xaml:

<Image Grid.Row="0" MaxHeight="50" Source="..\Images\Propeller.png" 
   RenderTransformOrigin=".5,.5">
    <Image.RenderTransform>
         <RotateTransform x:Name="MyAnimation" Angle="0" />
    </Image.RenderTransform>
    <Image.Triggers>
        <EventTrigger RoutedEvent="Loaded">
             <BeginStoryboard>
                  <Storyboard x:Name="MyStoryboard">
                          <DoubleAnimation x:Name="Prope11" 
                            Storyboard.TargetName="MyAnimation"                     
                                 To="360" 
                                 Duration="0:0:0.6"
                                 RepeatBehavior="Forever"
                                 FillBehavior="Stop" />
                    </Storyboard>
              </BeginStoryboard>
         </EventTrigger>
     </Image.Triggers>
 </Image>

Code behind:

  TimeSpan ts = TimeSpan.FromMilliseconds(600);
  MyStoryboard.Stop();
  Prope11.Duration = ts;
  MyStoryboard.Bigin();

Upvotes: 0

Views: 2491

Answers (1)

Sats
Sats

Reputation: 1973

You had not assigned the TargetName Property of the Storyboard to start the animation.

Well, there are two problems in your xaml to make the animation start.

1) Storyboard.TargetName="MyAnimation", Target name must be controls name. In your case, you have provided but you have given or assigned it to RotateTransform, which comes under the Image control, but not the image.

 <Image    x:Name="ImageControl" Grid.Row="0" MaxHeight="50" Source="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"
   RenderTransformOrigin=".5,.5"   >

and in DoubleAnimation provide TargetName as the Image control's name

Storyboard.TargetName="ImageControl"

2) Another problem is you have not provided the Target Property on which your double animation is dependent.

Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"

Your stop code didn't work because, it was not started. Adding this below xaml will solve your problem.

Change in the speed is because you have given 600, for 6 Seconds it must be 6000 and not 600.

This is the change i have done. On Mouse Down event I have given to Stop StoryBoard.

     <Image.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard x:Name="BeginImageRotateAni" >
                <Storyboard x:Name="MyStoryboard">
                    <DoubleAnimation x:Name="Prope11" 
                    Storyboard.TargetName="ImageControl"         
                      Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
                         To="360" 
                         Duration="0:0:6"
                         RepeatBehavior="Forever"
                         FillBehavior="Stop"
                           >
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseDown">
            <EventTrigger.Actions>
                <StopStoryboard BeginStoryboardName="BeginImageRotateAni"/>

            </EventTrigger.Actions>
        </EventTrigger>
    </Image.Triggers>

and subscribed for MouseDownEvent in Constructor

  ImageControl.MouseDown += ImageControl_MouseDown;

and write the below code inside the event.

    bool IsAnimationstarted = true;

private void ImageControl_MouseDown(object sender, MouseButtonEventArgs e)
{
    if (IsAnimationstarted)
    {
        MyStoryboard.Stop();
        IsAnimationstarted = false;
    }
    else
    {
        TimeSpan ts = TimeSpan.FromMilliseconds(6000);
        Prope11.Duration = ts;
        MyStoryboard.Begin();
        IsAnimationstarted = true;
    }
}
}

Alternate solution:- by creating the animation in the resource and then utilizing it in the codebehind.

<Window.Resources>
    <Storyboard x:Name="MyStoryboard" x:Key="Animation1" >
        <DoubleAnimation x:Name="Prope11" 
                        Storyboard.TargetName="ImageControl"         
                          Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
                             To="360" 
                             Duration="0:0:6"
                             RepeatBehavior="Forever"
                             FillBehavior="Stop"
                               >
        </DoubleAnimation>
    </Storyboard>
</Window.Resources>

In Code Behind:-

bool IsAnimationstarted = true;

private void ImageControl_MouseDown(object sender, MouseButtonEventArgs e)
{
    Storyboard board = (Storyboard)this.FindResource("Animation1");
    if (IsAnimationstarted)
    {
        IsAnimationstarted = false;
        board.Begin();
    }
    else
    {
        IsAnimationstarted = true;
        board.Pause();
    }
}

I don't know why are changing the speed or not sure about your intention. What I have done here is when the user clicks on the image control, it will start the animation and pause again clicked and this goes on.

Upvotes: 1

Related Questions