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