Cómo: Utilizar desencadenadores de eventos para controlar un guión gráfico después de su inicio
Actualización: noviembre 2007
En este ejemplo se muestra cómo controlar un objeto Storyboard después de iniciarse. Para iniciar un objeto Storyboard mediante XAML, utilice BeginStoryboard, que distribuye las animaciones a los objetos y las propiedades que se animan y, a continuación, inicia el guión gráfico. Si asigna un nombre a BeginStoryboard especificando su propiedad Name, lo convierte en un guión gráfico controlable. A continuación, podrá controlar interactivamente el guión gráfico una vez iniciado.
Utilice las acciones de guión gráfico siguientes junto con objetos EventTrigger para controlar un guión gráfico.
PauseStoryboard: pone en pausa el guión gráfico.
ResumeStoryboard: reanuda un guión gráfico que se ha puesto en pausa.
SetStoryboardSpeedRatio: cambia la velocidad del guión gráfico.
SkipStoryboardToFill: avanza un guión gráfico hasta el final de su período de relleno, si lo tiene.
StopStoryboard: detiene el guión gráfico.
RemoveStoryboard: quita el guión gráfico para liberar recursos.
Ejemplo
En el ejemplo siguiente se utilizan acciones para controlar interactivamente un guión gráfico.
Nota: para ver un ejemplo de control de un guión gráfico mediante código, vea Cómo: Controlar un guión gráfico una vez iniciado.
<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>
Para obtener otros ejemplos, vea la Ejemplo Animation Example Gallery.
Vea también
Tareas
Cómo: Controlar un guión gráfico una vez iniciado
Conceptos
Información general sobre animaciones
Información general sobre objetos Storyboard