方法: アクティブな期間の末尾に到達したタイムラインの FillBehavior を指定する
この例では、アニメーション化対象のプロパティの非アクティブな Timeline の FillBehavior を指定する方法を示します。
例
Timeline の FillBehavior プロパティは、アニメーション化対象のプロパティの値がアニメーション化されていないとき、つまり、Timeline は非アクティブであるが、その親 Timeline がアクティブな期間つまり保持期間内のときに、その値がどのように処理されるかを決定します。 たとえば、アニメーション化対象のプロパティが、アニメーションの終了後にその終了値のままになるか、アニメーションが開始される前の値に戻るかなどです。
次の例では、DoubleAnimation を使用して、2 つの四角形の Width をアニメーション化します。 それぞれの四角形は、別個の Timeline オブジェクトを使用します。
一方の Timeline の FillBehavior は Stop に設定されています。これにより、Timeline の終了時に四角形の幅がアニメーション化されていない値に戻ります。 もう一方の Timeline の FillBehavior は HoldEnd であり、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>
サンプル全体については、「アニメーション サンプル ギャラリー」をご覧ください。
関連項目
GitHub で Microsoft と共同作業する
このコンテンツのソースは GitHub にあります。そこで、issue や pull request を作成および確認することもできます。 詳細については、共同作成者ガイドを参照してください。
.NET Desktop feedback