Gewusst wie: Festlegen von FillBehavior für ein Timeline-Objekt, das das Ende des aktiven Zeitraums erreicht hat

Aktualisiert: November 2007

In diesem Beispiel wird gezeigt, wie FillBehavior für das inaktive Timeline-Objekt einer animierten Eigenschaft festgelegt wird.

Beispiel

Die FillBehavior-Eigenschaft eines Timeline-Objekts bestimmt, was mit dem Wert einer animierten Eigenschaft geschieht, wenn sie nicht animiert, d. h. wenn das Timeline-Objekt inaktiv ist, das übergeordnete Timeline-Objekt sich jedoch in einer aktiven oder angehaltenen Phase befindet. Behält z. B. eine animierte Eigenschaft nach dem Ende der Animation ihren Endwert oder wird ihr Wert auf den Wert vor Beginn der Animation zurückgesetzt?

Im folgenden Beispiel wird DoubleAnimation verwendet, um die Width-Eigenschaft von zwei Rechtecken zu animieren. Jedes Rechteck verwendet ein anderes Timeline-Objekt.

Ein Timeline-Objekt verfügt über eine FillBehavior-Eigenschaft mit der Einstellung Stop. Dies führt dazu, dass die Breite des Rechtecks am Ende von Timeline auf den Wert zurückgesetzt wird, den sie vor der Animation hatte. Das andere Timeline-Objekt verfügt über die FillBehavior-Eigenschaft HoldEnd. Daher behält die Breite den Endwert bei, wenn Timeline endet.

<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>

Das vollständige Beispiel finden Sie unter Beispielsammlung zu Animationen.

Siehe auch

Konzepte

Übersicht über Animationen

Referenz

DoubleAnimation

Width

Timeline

FillBehavior

Stop

HoldEnd

Weitere Ressourcen

Animation und zeitliche Steuerung

Gewusst-wie-Themen zu Animation und Zeitsteuerung

Beispiele für Animationen und zeitliche Steuerung