Cómo: Utilizar desencadenadores de eventos para controlar un guión gráfico después de su inicio
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 ejemplos adicionales, vea Animation Example Gallery.
Vea también
Tareas
Cómo: Controlar un guión gráfico una vez iniciado