방법: Storyboard를 시작한 후 이벤트 트리거를 사용하여 제어

업데이트: 2007년 11월

이 예제에서는 Storyboard를 시작한 후 제어하는 방법을 보여 줍니다. XAML을 사용하여 Storyboard를 시작하려면 애니메이션 효과를 줄 개체와 속성에 애니메이션을 배포한 다음 Storyboard를 시작하는 BeginStoryboard를 사용해야 합니다. Name 속성을 지정하여 BeginStoryboard에 이름을 제공하면 제어 가능한 Storyboard로 만들 수 있습니다. 그러면 Storyboard를 시작한 후 대화형으로 제어할 수 있습니다.

Storyboard를 제어하려면 EventTrigger 개체와 함께 다음 Storyboard 작업을 사용합니다.

• PauseStoryboard: Storyboard를 일시 중지합니다.

• ResumeStoryboard: 일시 중지한 Storyboard를 다시 시작합니다.

• SetStoryboardSpeedRatio: Storyboard 속도를 변경합니다.

• SkipStoryboardToFill: Storyboard를 해당 전체 기간(있는 경우)의 끝으로 진행합니다.

• StopStoryboard: Storyboard를 중지합니다.

• RemoveStoryboard: Storyboard를 제거하여 리소스를 해제합니다.

예제

다음 예제에서는 제어 가능한 Storyboard 작업을 사용하여 대화형으로 Storyboard를 제어합니다.

참고: 코드를 사용한 Storyboard 제어 예제를 보려면 방법: 이미 시작된 Storyboard 제어를 참조하십시오.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

다른 예제를 보려면 애니메이션 예제 갤러리를 참조하십시오.

참고 항목

작업

방법: 이미 시작된 Storyboard 제어

개념

애니메이션 개요

Storyboard 개요

참조

ResumeStoryboard

SetStoryboardSpeedRatio

SkipStoryboardToFill

PauseStoryboard

StopStoryboard

SeekStoryboard