Como: Especificar o FillBehavior para uma Timeline que atingiu o Final de Período Ativo
Este exemplo mostra como especificar o FillBehavior para o Timeline inativo de uma propriedade animada.
Exemplo
A propriedade FillBehavior de um Timeline determina o que acontece ao valor de uma propriedade animada quando ela não está sendo animada, isto é, quando o Timeline está inativo mas o Timeline pai está dentro do seu período ativo ou de espera. Por exemplo, uma propriedade animada permanece em seu valor final depois que a animação termina ou ela volta para o valor que tinha antes da animação ter começado?
O seguinte exemplo usa um DoubleAnimation para animar o Width de dois retângulos. Cada retângulo usa um objeto Timeline diferente.
Um Timeline possui um FillBehavior que é definido como Stop, que faz com que a largura do retângulo volte ao seu valor não animado quando o Timeline termina. O outro Timeline tem um FillBehavior de HoldEnd, que faz com que a largura se mantenha no valor final quando o Timeline termina.
<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>
For the complete sample, see Galeria de exemplo de animação.