CODEWITHSUNDEEP
c#wpfxaml
PawanS
PawanS

Reputation: 7193

Stop WPF animation, storyboard begin in xaml but stopping it in codebehind?

I created an animation storyboard in xaml file. That story board begins on Button.Click. But to stop the animation I am trying to stop storyboard on my custom event in code behind. The code is not throwing any exception but When my event got fired the animation still goes continue.

I think the issue is with the Stop method. Stop required the same object that begins the animation to stop it. But here the storyboard is begin in WPF xaml and I am stopping it in code behind.

Any Solution, how to get Xaml object in code behind or Any alternative solution for this??

XAML CODE:

<Canvas.Triggers>
            <EventTrigger RoutedEvent="Button.Click" SourceName="ScanButton">
                <EventTrigger.Actions>
                    <BeginStoryboard >
                        <Storyboard  Name="MovingServer" Storyboard.TargetName="ImageMove" RepeatBehavior="Forever" >
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:2" From="30" To="300" BeginTime="0:0:0" />
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5" From="300" To="300" BeginTime="0:0:5" />
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:2" From="300" To="600" BeginTime="0:0:7" />
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="1" To="0" BeginTime="0:0:7" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger.Actions>
            </EventTrigger>

Code Behind:

    private void EventPublisher_OnScanningFinish(object sender, EventArgs args)
    {
        Dispatcher.Invoke(DispatcherPriority.Normal, (Action)delegate() { this.StopScanningAnimation(); });
    }

    private void StopScanningAnimation()
    {

        ServerView.StoryBoardServerScrolling.Stop(this); //---------- Not Working

        //this.ServerView.Server1Static.Visibility = System.Windows.Visibility.Hidden;
        //this.ServerView.Server2Static.Visibility = System.Windows.Visibility.Hidden;
        //this.ServerView.Server3Scrolling.Visibility = System.Windows.Visibility.Hidden;
        //this.ServerView.SearchingGlass.Visibility = System.Windows.Visibility.Hidden;
    }

Upvotes: 8

Views: 22904

Answers (3)

Selalu_Ingin_Belajar
Selalu_Ingin_Belajar

Reputation: 375

I solve the problem with using the Stop() method of Storyboard class like this

myStoryBoard.Stop(this.LayoutRoot);

with this solution you don't have to declare Storyboard at the resource.

Upvotes: 3

PawanS
PawanS

Reputation: 7193

I am thankful for Timothy for giving nice Idea. Here I am posting my working code

   /*create this resources as global to that perticular xaml. Need not to be put it in App.xaml
     MyControl could be Window or Page or UserControl */

       <MyControl.Resources>
        <Storyboard x:Key="MovingServer" Storyboard.TargetName="MyImage" RepeatBehavior="Forever" >
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:2" From="30" To="300" BeginTime="0:0:0" />
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5" From="300" To="300" BeginTime="0:0:5" />
            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:2" From="300" To="600" BeginTime="0:0:7" />
            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="1" To="0" BeginTime="0:0:7" />
        </Storyboard>
    </MyControl.Resources>

/* <!-- Now use those animation resources, the place where you want. You can use it as static resource and begin stop animation from code behind OR use it as trigger event --> */

/*    <!-- Static resources--> */
    <Canvas>
        <Image Canvas.Left="0" Canvas.Top="-2" Height="32" Name="MyImage" Width="32" Source="/CCTrayHelper;component/Images/ServerIcon.png" Visibility="Hidden"/>
     <Canvas.Resources>
        <BeginStoryboard x:Key="serverAnimate" Storyboard="{StaticResource MovingServer}" />
     </Canvas.Resources>
    </Canvas>
    <Button x:Name="ScanButton" onClick="Scanbutton_Click" />

/* ****************************************************************** */



  /*  Code behind to start/stop animation*/

//Get the resource value first on current object, so that when you start/stop the animation, it work only on current object
  Storyboard sbImageAnimate = (Storyboard)this.ServerView.FindResource("MovingServer");

//Start the animation on Button Click 
 protected void Scanbutton_Click(object Sender, EventArgs e)
  {   
   this.MyImage.Visibility = System.Windows.Visibility.Visible; 
   sbImageAnimate.Begin();
  } 

 //Stop animation on my own even. You can use it on any event
 private void EventPublisher_OnFinish(object sender, EventArgs args) 
 {   
      Dispatcher.Invoke(DispatcherPriority.Normal, (Action)delegate() { this.StopScanningAnimation(); });  
 }

 private void StopScanningAnimation()  
   {
   sbImageAnimate.Stop();
   this.MyImage.Visibility = System.Windows.Visibility.Hidden; 
   }

Upvotes: 3

Timothy Groote
Timothy Groote

Reputation: 8652

Define the storyboard as a static resource, 

<MyControl.Resources>
                        <Storyboard Key="MovingServer" Storyboard.TargetName="ImageMove" RepeatBehavior="Forever" >
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:2" From="30" To="300" BeginTime="0:0:0" />
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5" From="300" To="300" BeginTime="0:0:5" />
                            <DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:2" From="300" To="600" BeginTime="0:0:7" />
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="1" To="0" BeginTime="0:0:7" />
                        </Storyboard>
</MyControl.Resources>

and reference it from your backend code as follows :

StoryBoard board = (StoryBoard)this.FindResource("MovingServer");
board.stop();

start the animation from the 'click' event of the button (i don't know if you defined in xaml, but here's how it would be done if you did)

<Button x:Name="ScanButton" onClick="Scanbutton_Click"></button>


protected void Scanbutton_Click(object Sender, EventArgs e)
{
    StoryBoard board = (StoryBoard)this.FindResource("MovingServer");
    board.start();
}

Upvotes: 8

Related Questions