停止 WPF 动画，故事板从 xaml 开始，但在代码隐藏中停止？

Question

我在 xaml 文件中创建了一个动画故事板。该故事板从 Button.Click 开始。但为了停止动画，我试图在后面的代码中停止我的自定义事件的故事板。 代码没有抛出任何异常，但是当我的事件被触发时，动画仍然继续。

我认为问题出在 Stop 方法上。停止需要与开始动画相同的对象来停止它。但这里的故事板是在 WPF xaml 中开始的，我在后面的代码中停止它。

任何解决方案，如何在代码后面获取 Xaml 对象或任何替代解决方案？

XAML 代码：

<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>

背后代码：

    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;
    }

Answer 1

将故事板定义为静态资源，

<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>

并从后端代码中引用它，如下所示：

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

从按钮的“单击”事件启动动画（我不知道您是否在 xaml 中定义，但如果你做到了）

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


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

Answer 2

我很感谢蒂莫西提出了好主意。在这里我发布我的工作代码

   /*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; 
   } 

Answer 3

我通过使用 Storyboard 类的 Stop() 方法解决了这个问题，这样

myStoryBoard.Stop(this.LayoutRoot);

您就不必在资源中声明 Storyboard。