Procedimiento Usar desencadenadores de eventos para controlar un guión gráfico después de su inicioHow to: Use Event Triggers to Control a Storyboard After It Starts

En este ejemplo se muestra cómo controlar Storyboard una después de iniciarse.This example shows how to control a Storyboard after it starts. Para iniciar Storyboard XAMLXAMLmediante, use BeginStoryboard, que distribuye las animaciones a los objetos y propiedades que se animan y, a continuación, inicia el guión gráfico.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. Si asigna BeginStoryboard un nombre mediante la especificación de su Name propiedad, lo convierte en un guión gráfico controlable.If you give BeginStoryboard a name by specifying its Name property, you make it a controllable storyboard. Después, puede controlar interactivamente el guión gráfico una vez que se inicia.You can then interactively control the storyboard after it starts.

Use las siguientes acciones de guion gráfico EventTrigger junto con objetos para controlar un guion gráfico.Use the following storyboard actions together with EventTrigger objects to control a storyboard.

EjemploExample

En el ejemplo siguiente se usan acciones de guion gráfico controlables para controlar interactivamente un guión gráfico.The following example uses controllable storyboard actions to interactively control a storyboard.

Nota

Para ver un ejemplo de cómo controlar un guión gráfico mediante código, vea controlar un guión gráfico después de comenzar a usar sus métodos interactivos.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>

Para obtener más ejemplos, vea la Galería de ejemplo de animación.For additional examples, see the Animation Example Gallery.

Vea tambiénSee also