共用方式為


HOW TO:針對已達到使用中週期結尾的時刻表指定 FillBehavior

這個範例說明如何為動畫屬性的非現用 Timeline 指定 FillBehavior

範例

TimelineFillBehavior 屬性會判斷當動畫屬性沒有建立動畫時,屬性的值會產生什麼變化,也就是說,當 Timeline 為非作用中而它的父代 Timeline 卻是在作用中或保留期間。 例如,動畫屬性在動畫結束後,是否仍保留結尾值,還是回復動畫開始前的值?

下列範例會使用 DoubleAnimation 以建立兩個矩形的 Width 動畫。 每一個矩形都會使用不同的 Timeline 物件。

其中一個 TimelineFillBehavior 設定為 Stop,會在 Timeline 停止時,使矩形的寬度回復成非動畫值。 另一個 TimelineFillBehavior 則是設定為 HoldEnd,會在 Timeline 結束時,令寬度保留結束值。

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

如需完整範例,請參閱動畫範例圖庫 (英文)。

請參閱

參考

DoubleAnimation

Width

Timeline

FillBehavior

Stop

HoldEnd

概念

動畫概觀

其他資源

動畫和計時

動畫和計時 HOW TO 主題