Partager via


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.

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

Référence

ResumeStoryboard

SetStoryboardSpeedRatio

SkipStoryboardToFill

PauseStoryboard

StopStoryboard

SeekStoryboard

Concepts

Vue d'ensemble de l'animation

Vue d'ensemble des storyboards