Cómo: Especificar el comportamiento de relleno de una escala de tiempo que ha llegado al final de su período de actividad

  • Artículo

En este ejemplo se muestra cómo especificar FillBehavior para el Timeline inactivo de una propiedad animada.

Ejemplo

La propiedad FillBehavior de un Timeline determina lo que sucede con el valor de una propiedad animada cuando no se está animando, es decir, cuando el Timeline está inactivo, pero su Timeline primario está dentro de su período activo o de suspensión. Por ejemplo, ¿una propiedad animada permanece en su valor final después de que finalice la animación, o vuelve al valor que tenía antes de que se iniciara la animación?

En el ejemplo siguiente se usa un DoubleAnimation para animar los Width de dos rectángulos. Cada rectángulo usa un objeto diferente Timeline.

Un Timeline tiene un FillBehavior que se establece en Stop, lo que hace que el ancho del rectángulo vuelva a su valor no animado cuando finaliza Timeline. El otro Timeline tiene un FillBehavior de HoldEnd, que hace que el ancho permanezca en su valor final cuando finaliza Timeline.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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>

Para consultar el ejemplo completo, consulte Galería de ejemplos de animación.

Vea también