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

  • Artikel

In diesem Beispiel wird gezeigt, wie Sie das FillBehavior für die inaktive Timeline einer animierten Eigenschaft angeben.

Beispiel

Die FillBehavior-Eigenschaft einer Timeline bestimmt, was mit dem Wert einer animierten Eigenschaft geschieht, wenn es nicht animiert wird, d. h., wenn die Timeline inaktiv ist, aber ihre übergeordnete Timeline aktiv oder unterbrochen ist. Bleibt eine animierte Eigenschaft z. B. nach Ende der Animation an ihrem Endwert stehen, oder wird sie wieder auf den Wert zurückgesetzt, den sie vor dem Start der Animation hatte?

Das folgende Beispiel verwendet eine DoubleAnimation, um die Width von zwei Rechtecken zu animieren. Jedes Rechteck verwendet ein anderes Timeline-Objekt.

Ein Timeline-Objekt hat ein FillBehavior, das auf Stop festgelegt ist, wodurch die Breite des Rechtecks wieder auf den nicht animierten Wert zurückgesetzt wird, wenn die Timeline endet. Dsa andere Timeline-Objekt hat ein FillBehavior von HoldEnd, das dazu führt, dass die Breite nach Ablauf der Timeline auf dem Endwert bleibt.

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

Das vollständige Beispiel finden Sie im Katalog mit Animationsbeispielen.

Weitere Informationen