Partager via


Comment : spécifier le FillBehavior pour une chronologie ayant atteint la fin de sa période active

Mise à jour : novembre 2007

Cet exemple montre comment spécifier le FillBehavior pour la Timeline inactive d'une propriété animée.

Exemple

La propriété FillBehavior d'un Timeline détermine ce qui arrive à la valeur d'une propriété animée lorsqu'elle n'est pas animée, c'est-à-dire lorsque le Timeline est inactif mais que son Timeline parent est en période active ou bloquée. Par exemple, est-ce qu'une propriété animée conserve sa valeur finale après la fin de l'animation ou est-ce que la valeur qu'elle avait avant le démarrage de l'animation est rétablie ?

L'exemple suivant utilise un DoubleAnimation pour animer la Width de deux rectangles. Chaque rectangle utilise un objet Timeline différent.

Un Timeline possède un FillBehavior qui a la valeur Stop ; de ce fait, la valeur non animée de la largeur du rectangle est rétablie lorsque le Timeline est terminée. L'autre Timeline possède un FillBehavior dont la valeur est HoldEnd, ce qui permet à la largeur de conserver sa valeur finale lorsque le Timeline est terminé.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel Margin="20">
    <Border Background="#99FFFFFF">
      <TextBlock Margin="20">
              This example shows how the FillBehavior property determines how an animation behaves
              after it reaches the end of its duration.
      </TextBlock>
    </Border>

    <TextBlock>FillBehavior="Deactivate"</TextBlock>
    <Rectangle Name="deactiveAnimationRectangle" Width="20" Height="20" Fill="#AA3333FF" HorizontalAlignment="Left" >
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- The animated rectangle's width reverts back to its non-animated value
                   after the animation ends. -->
              <DoubleAnimation 
                Storyboard.TargetName="deactiveAnimationRectangle" 
                Storyboard.TargetProperty="Width" 
                From="100" To="400" Duration="0:0:2" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>

    <TextBlock Margin="0,20,0,0">FillBehavior="HoldEnd" </TextBlock>
    <Rectangle Name="holdEndAnimationRectangle" Width="20" Height="20" Fill="#AA3333FF" HorizontalAlignment="Left" >
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- The animated rectangle's width remains at its end value after the 
                   animation ends. -->
              <DoubleAnimation Storyboard.TargetName="holdEndAnimationRectangle" 
                Storyboard.TargetProperty="Width"  
                From="100" To="400" Duration="0:0:2" FillBehavior="HoldEnd" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

Pour l'exemple complet, consultez Galerie d'exemples d'animation.

Voir aussi

Concepts

Vue d'ensemble de l'animation

Référence

DoubleAnimation

Width

Timeline

FillBehavior

Stop

HoldEnd

Autres ressources

Animation et minutage

Rubriques Comment relatives à l'animation et au minutage

Exemples d'animation et de minutage