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

  • 아티클

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

다음 스토리보드 작업을 EventTrigger 개체와 함께 사용하여 스토리보드를 제어합니다.

예제

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

참고

코드를 사용하여 스토리보드를 제어하는 예제를 보려면 대화형 메서드를 사용하여 이미 시작된 스토리보드 제어를 참조하세요.

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

추가 예제는 애니메이션 예제 갤러리를 참조하세요.

참고 항목