Condividi tramite

Procedura: Specificare il FillBehavior per una sequenza temporale che ha raggiunto la fine del periodo attivo

  • Articolo

In questo esempio viene illustrato come specificare il FillBehavior per il Timeline inattivo di una proprietà animata.

Esempio

La proprietà FillBehavior di un Timeline determina cosa accade al valore di una proprietà animata quando non viene animata, ovvero quando il Timeline è inattivo, ma il relativo Timeline padre si trova all'interno del periodo attivo o di blocco. Ad esempio, una proprietà animata rimane al valore finale dopo la fine dell'animazione o ripristina il valore che aveva prima dell'avvio dell'animazione?

Nel seguente esempio viene utilizzato un DoubleAnimation per animare il Width di due rettangoli. Ogni rettangolo usa un oggetto Timeline diverso.

Uno Timeline ha un FillBehavior impostato su Stop, che fa sì che la larghezza del rettangolo venga ripristinata al proprio valore non animato quando il Timeline termina. L'altro Timeline ha un FillBehavior di HoldEnd, facendo sì che la larghezza rimanga al suo valore finale quando termina il 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>

Per l'esempio completo, vedere raccolta di esempi di animazione .

Vedere anche