Partager via


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

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 obtenir l'exemple complet, consultez Galerie d'exemples d'animation.

Voir aussi

Référence

DoubleAnimation

Width

Timeline

FillBehavior

Stop

HoldEnd

Concepts

Vue d'ensemble de l'animation

Autres ressources

Animation et minutage

Rubriques "Comment" relatives à l'animation et au minutage