Live Chat Icon For mobile
Live Chat Icon

How do I control a Storyboard animation once it starts?

Platform: WPF| Category: Animation

In code behind:

The following article from MSDN describes how to Pause, Resume, Stop, etc. on a running animation:

http://msdn.microsoft.com/en-us/library/ms741997.aspx

In XAML:

The following example uses controllable storyboard actions to interactively control a storyboard.

[XAML]

<Page xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
  xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
  WindowTitle='Controlling a Storyboard' >
  <StackPanel Margin='20' >

    <!-- This rectangle is animated. -->
    <Rectangle Name='myRectangle'
      Width='100' Height='20' Margin='12,0,0,5' Fill='#AA3333FF' HorizontalAlignment='Left' />

    <!-- This StackPanel contains all the Buttons. -->
    <StackPanel Orientation='Horizontal' Margin='0,30,0,0'>

      <Button Name='BeginButton'>Begin</Button>
      <Button Name='PauseButton'>Pause</Button>
      <Button Name='ResumeButton'>Resume</Button>
      <Button Name='SeekButton'>Seek</Button>
      <Button Name='SkipToFillButton'>Skip To Fill</Button>
      <Button Name='SetSpeedRatioButton'>Triple Speed</Button>
      <Button Name='StopButton'>Stop</Button>

      <StackPanel.Triggers>

        <!-- Begin the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='BeginButton'>
          <BeginStoryboard Name='MyBeginStoryboard'>
            <Storyboard >
              <DoubleAnimation 
                Storyboard.TargetName='myRectangle' 
                Storyboard.TargetProperty='Width' 
                Duration='0:0:5' From='100' To='500' />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

        <!-- Pause the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='PauseButton'>
          <PauseStoryboard BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>

        <!-- Resume the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='ResumeButton'>
          <ResumeStoryboard BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>

         <!-- Seek one second into the storyboard’s active period. -->
         <EventTrigger RoutedEvent='Button.Click' SourceName='SeekButton'>
           <SeekStoryboard 
            BeginStoryboardName='MyBeginStoryboard' 
            Offset='0:0:1' Origin='BeginTime' />
        </EventTrigger>   

        <!-- Skip to Fill -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='SkipToFillButton'>
          <SkipStoryboardToFill BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>

        <!-- Stop the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='StopButton'>
          <StopStoryboard BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>

        <!-- Triple the speed of the Storyboard -->
        <EventTrigger RoutedEvent='Button.Click' SourceName='SetSpeedRatioButton'>
          <SetStoryboardSpeedRatio SpeedRatio='3' BeginStoryboardName='MyBeginStoryboard' />
        </EventTrigger>
      </StackPanel.Triggers>
    </StackPanel>
  </StackPanel>
</Page>

Share with

Share on twitter
Share on facebook
Share on linkedin

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.