Share via


Comment : utiliser des déclencheurs d'événements pour contrôler une table de montage séquentiel après son démarrage

Mise à jour : novembre 2007

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 une table de montage séquentiel 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 des exemples supplémentaires, consultez Galerie d'exemples d'animation.

Voir aussi

Tâches

Comment : contrôler une table de montage séquentiel après son démarrage

Concepts

Vue d'ensemble de l'animation

Vue d'ensemble des tables de montage séquentiel

Référence

ResumeStoryboard

SetStoryboardSpeedRatio

SkipStoryboardToFill

PauseStoryboard

StopStoryboard

SeekStoryboard