HOW TO:針對已達到使用中週期結尾的時刻表指定 FillBehavior
更新:2007 年 11 月
這個範例說明如何為動畫屬性的非現用 Timeline 指定 FillBehavior。
範例
Timeline 的 FillBehavior 屬性會判斷當動畫屬性沒有建立動畫時,屬性的值會產生什麼變化,也就是說,當 Timeline 為非作用中而它的父代 Timeline 卻是在作用中或保留期間。例如,動畫屬性在動畫結束後,是否仍保留結尾值,還是回復動畫開始前的值?
下列範例會使用 DoubleAnimation 以建立兩個矩形的 Width 動畫。每一個矩形都會使用不同的 Timeline 物件。
其中一個 Timeline 的 FillBehavior 設定為 Stop,會在 Timeline 停止時,使矩形的寬度回復成非動畫值。另一個 Timeline 的 FillBehavior 則是設定為 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>
如需完整範例,請參閱動畫範例圖庫。