Comment : utiliser des déclencheurs d'événements pour contrôler un storyboard après son démarrage
Cet exemple montre comment contrôler un Storyboard après son démarrage. Pour démarrer un Storyboard avec XAML, utilisez BeginStoryboard qui distribue les animations aux objets et aux propriétés qu'ils animent, puis démarre le storyboard. Si vous donnez un nom à BeginStoryboard en spécifiant sa propriété Name, vous en faites un storyboard contrôlable. Vous pouvez ensuite contrôler interactivement le storyboard après son démarrage.
Utilisez les actions de storyboard suivantes avec des objets EventTrigger pour contrôler un storyboard.
PauseStoryboard : suspend le storyboard.
ResumeStoryboard : reprend un storyboard suspendu.
SetStoryboardSpeedRatio : modifie la vitesse du storyboard.
SkipStoryboardToFill : fait avancer un storyboard à la fin de sa période de remplissage, le cas échéant.
StopStoryboard : arrête le storyboard.
RemoveStoryboard : supprime le storyboard, en libérant des ressources.
Exemple
L'exemple suivant utilise des actions de storyboard contrôlable pour contrôler interactivement un storyboard.
**Remarque : **pour obtenir un exemple de contrôle d'un storyboard à l'aide de code, consultez Comment : contrôler un storyboard après son démarrage.
<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>
Pour obtenir des exemples supplémentaires, consultez Galerie d'exemples d'animation.
Voir aussi
Tâches
Comment : contrôler un storyboard après son démarrage