如何：在腳本開始後使用事件觸發程式進行控制

此範例示範如何在啟動之後控制 Storyboard 。 若要使用 XAML 啟動 Storyboard ，請使用 BeginStoryboard ，它會將動畫散發至物件和屬性，然後啟動分鏡腳本。 如果您藉由指定其 Name 屬性來指定 BeginStoryboard 名稱，您可以將它設為可控制的分鏡腳本。 然後，您可以在腳本啟動時以互動方式控制分鏡腳本。

搭配物件使用 EventTrigger 下列分鏡腳本動作來控制分鏡腳本。

• PauseStoryboard：暫停分鏡腳本。

• ResumeStoryboard：繼續暫停的分鏡腳本。

• SetStoryboardSpeedRatio：變更分鏡腳本速度。

• SkipStoryboardToFill：如果腳本有一個，則會將分鏡腳本推進到其填滿期間結尾。

• StopStoryboard：停止分鏡腳本。

• RemoveStoryboard：移除分鏡腳本，釋放資源。

範例

下列範例會使用可控制的分鏡腳本動作，以互動方式控制分鏡腳本。

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

如需其他範例，請參閱 動畫範例庫 。

另請參閱

• ResumeStoryboard
• SetStoryboardSpeedRatio
• SkipStoryboardToFill
• PauseStoryboard
• StopStoryboard
• SeekStoryboard
• 在分鏡腳本開始後，使用其互動方法來進行控制
• 動畫概觀
• 分鏡腳本概觀