Procedura: utilizzare i trigger di evento per controllare uno storyboard dopo il relativo avvio
Aggiornamento: novembre 2007
In questo esempio viene illustrato come controllare un oggetto Storyboard dopo l'avvio. Per avviare un oggetto Storyboard mediante XAML, utilizzare l'oggetto BeginStoryboard che distribuisce le animazioni agli oggetti e alle proprietà che vengono animati, quindi avvia lo storyboard. Se si assegna un nome all'oggetto BeginStoryboard specificandone la proprietà Name, si crea uno storyboard controllabile. È quindi possibile controllare in modo interattivo lo storyboard dopo l'avvio.
Utilizzare le azioni di storyboard seguenti con gli oggetti EventTrigger per controllare uno storyboard.
PauseStoryboard: sospende lo storyboard.
ResumeStoryboard: riprende uno storyboard sospeso.
SetStoryboardSpeedRatio: modifica la velocità dello storyboard.
SkipStoryboardToFill: sposta uno storyboard alla fine del periodo di riempimento, se presente.
StopStoryboard: interrompe lo storyboard.
RemoveStoryboard: rimuove lo storyboard, liberando risorse.
Esempio
Nell'esempio riportato di seguito vengono utilizzate azioni di storyboard controllabili per controllare in modo interattivo uno storyboard.
Nota: per un esempio di controllo di uno storyboard tramite codice, vedere Procedura: controllare uno storyboard in seguito al relativo avvio.
<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>
Per ulteriori esempi, vedere Raccolta di esempi di animazioni.
Vedere anche
Attività
Procedura: controllare uno storyboard in seguito al relativo avvio
Concetti
Cenni preliminari sull'animazione
Cenni preliminari sugli storyboard