Nasıl yapılır: Etkin Döneminin Sonuna Gelen Zaman Çizelgesi için FillBehavior Belirtme

Bu örnek, FillBehavior animasyonlu bir özelliğin etkin değil için nasıl kullanılacağını gösterir Timeline .

Örnek

FillBehaviorÖğesinin özelliği, hareketli Timeline olmayan bir özelliğin değerine ne olduğunu belirler, diğer bir deyişle, Timeline etkin değil ancak üst öğesi Timeline etkin veya tutma dönemi içindedir. Örneğin, animasyon bittikten sonra animasyonlu bir özellik kendi bitiş değerinde kalır veya animasyon başlamadan önce sahip olan değere geri dönsün mü?

Aşağıdaki örnek, DoubleAnimation iki dikdörtgenin animasyonunu hareketlendirmek için bir kullanır Width . Her dikdörtgen farklı bir Timeline nesne kullanır.

Biri, TimelineFillBehavior olarak ayarlanmış bir öğesine sahiptir Stop ve bu, dikdörtgenin genişliğinin sona erdiğinde animasyon dışı değerine geri döndürülmesine neden olur Timeline . Diğeri, TimelineFillBehaviorHoldEnd sona erdiğinde, genişliğinin bitiş değerinde kalmasına neden olur 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>

Tüm örnek için bkz. animasyon örnek Galerisi.

Ayrıca bkz.