方法 : ストーリーボードを使用してアニメーション化した後にプロパティを設定する
状況によっては、プロパティをアニメーション化した後に、そのプロパティの値を変更できないように見えることがあります。
使用例
次の例では、Storyboard を使用して SolidColorBrush の色をアニメーション化します。 ボタンがクリックされると、ストーリーボードがトリガーされます。 Completed イベントを処理することで、ColorAnimation が完了したときにプログラムが通知を受け取るようにします。
<Button
Content="Animate and Then Set Example 1">
<Button.Background>
<SolidColorBrush x:Name="Button1BackgroundBrush"
Color="Red" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Button1BackgroundBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Yellow" Duration="0:0:5"
FillBehavior="HoldEnd"
Completed="setButton1BackgroundBrushColor" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
ColorAnimation が完了したら、ブラシの色を青に変更します。
Private Sub setButton1BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)
' Does not appear to have any effect:
' the brush remains yellow.
Button1BackgroundBrush.Color = Colors.Blue
End Sub
private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{
// Does not appear to have any effect:
// the brush remains yellow.
Button1BackgroundBrush.Color = Colors.Blue;
}
前のコードは、何も実行しないように見えます。ブラシは黄色のまま、つまりブラシをアニメーション化した ColorAnimation によって設定された値のままになっています。 実際には、基になるプロパティ値 (基本値) は青に変更されています。 しかし、実効値、つまり現在の値が黄色のままであるのは、ColorAnimation が基本値をオーバーライドしたままであるからです。 基本値を再び実効値にするには、アニメーションによるプロパティへの影響を停止する必要があります。 ストーリーボード アニメーションでこのようにするには、次の 3 つの方法があります。
アニメーションの FillBehavior プロパティを Stop に設定する。
ストーリーボード全体を削除する。
個々のプロパティからアニメーションを削除する。
アニメーションの FillBehavior プロパティを Stop に設定する
FillBehavior を Stop に設定することで、アニメーションがアクティブ期間の終わりに到達したらターゲット プロパティに影響を与えなくなるように指定します。
<Button
Content="Animate and Then Set Example 2">
<Button.Background>
<SolidColorBrush x:Name="Button2BackgroundBrush"
Color="Red" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Button2BackgroundBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Yellow" Duration="0:0:5"
FillBehavior="Stop"
Completed="setButton2BackgroundBrushColor" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Private Sub setButton2BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)
' This appears to work:
' the brush changes to blue.
Button2BackgroundBrush.Color = Colors.Blue
End Sub
private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
Button2BackgroundBrush.Color = Colors.Blue;
}
ストーリーボード全体を削除する
RemoveStoryboard トリガーまたは Storyboard.Remove メソッドを使用することで、ストーリーボード アニメーションによるターゲット プロパティへの影響を停止します。 この方法と、FillBehavior プロパティを設定する方法の違いは、ストーリーボードはいつでも削除できるのに対し、FillBehavior プロパティの効果が現れるのはアニメーションがアクティブ期間の終わりに到達したときのみという点です。
<Button
Name="Button3"
Content="Animate and Then Set Example 3">
<Button.Background>
<SolidColorBrush x:Name="Button3BackgroundBrush"
Color="Red" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Name="MyBeginStoryboard">
<Storyboard x:Name="MyStoryboard">
<ColorAnimation
Storyboard.TargetName="Button3BackgroundBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Yellow" Duration="0:0:5"
FillBehavior="HoldEnd"
Completed="setButton3BackgroundBrushColor" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Private Sub setButton3BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)
' This appears to work:
' the brush changes to blue.
MyStoryboard.Remove(Button3)
Button3BackgroundBrush.Color = Colors.Blue
End Sub
private void setButton3BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
MyStoryboard.Remove(Button3);
Button3BackgroundBrush.Color = Colors.Blue;
}
個々のプロパティからアニメーションを削除する
アニメーションによるプロパティへの影響を停止するには、アニメーション化するオブジェクトの BeginAnimation(DependencyProperty, AnimationTimeline) メソッドを使用するという方法もあります。 アニメーション化するプロパティを最初のパラメーターとして指定し、null を 2 番目のパラメーターとして指定します。
<Button
Name="Button4"
Content="Animate and Then Set Example 4">
<Button.Background>
<SolidColorBrush x:Name="Button4BackgroundBrush"
Color="Red" />
</Button.Background>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Button4BackgroundBrush"
Storyboard.TargetProperty="Color"
From="Red" To="Yellow" Duration="0:0:5"
FillBehavior="HoldEnd"
Completed="setButton4BackgroundBrushColor" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
Private Sub setButton4BackgroundBrushColor(ByVal sender As Object, ByVal e As EventArgs)
' This appears to work:
' the brush changes to blue.
Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, Nothing)
Button4BackgroundBrush.Color = Colors.Blue
End Sub
private void setButton4BackgroundBrushColor(object sender, EventArgs e)
{
// This appears to work:
// the brush changes to blue.
Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
Button4BackgroundBrush.Color = Colors.Blue;
}
この方法は、ストーリーボード以外の手法によるアニメーションにも利用できます。