方法: 開始後のストーリーボードをイベント トリガーを使用して制御するHow to: Use Event Triggers to Control a Storyboard After It Starts

この例では、制御、Storyboard開始後にします。This example shows how to control a Storyboard after it starts. 開始する、Storyboardを使用してXAMLXAMLを使用して、BeginStoryboardオブジェクトとプロパティをアニメーション化して、ストーリー ボードを起動しにアニメーションを配布します。To start a Storyboard by using XAMLXAML, use BeginStoryboard, which distributes the animations to the objects and properties they animate and then starts the storyboard. 付ける場合BeginStoryboard名前を指定してそのNameプロパティをできるようにする制御可能なストーリー ボード。If you give BeginStoryboard a name by specifying its Name property, you make it a controllable storyboard. ことができます対話的に制御、ストーリー ボードが開始されます。You can then interactively control the storyboard after it starts.

と共に次のストーリー ボード アクションを使用して、EventTriggerストーリー ボードを制御するオブジェクト。Use the following storyboard actions together with EventTrigger objects to control a storyboard.

Example

次の例では、制御可能なストーリー ボード アクションを使用して、ストーリー ボードを対話的に制御します。The following example uses controllable storyboard actions to interactively control a storyboard.

注: コードを使用してストーリー ボードを制御するための例を表示するには、次を参照してください。 、ストーリー ボードの後に開始の対話型メソッドを使用して制御します。Note: To see an example of controlling a storyboard by using code, see Control a Storyboard After It Starts Using Its Interactive Methods.

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

その他の例では、次を参照してください。、アニメーション サンプル ギャラリーします。For additional examples, see the Animation Example Gallery.

関連項目See also