方法: ストーリーボードを使用してアニメーション化した後にプロパティを設定するHow to: Set a Property After Animating It with a Storyboard

場合によっては、表示にアニメーション化した後、プロパティの値を変更できないことがあります。In some cases, it might appear that you can't change the value of a property after it has been animated.

Example

次の例では、Storyboardの色をアニメーション化するために使用、SolidColorBrushします。In the following example, a Storyboard is used to animate the color of a SolidColorBrush. ストーリー ボードは、ボタンがクリックされたときにトリガーされます。The storyboard is triggered when the button is clicked. Completedプログラムが通知されるように、イベントが処理されるときに、ColorAnimationが完了するとします。The Completed event is handled so that the program is notified when the ColorAnimation completes.

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

Example

後に、ColorAnimationが完了したら、プログラム、ブラシの色を青に変更しよう。After the ColorAnimation completes, the program attempts to change the brush's color to blue.

private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{

    // Does not appear to have any effect:
    // the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue;
}
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

何もする前のコードが表示されない: によって提供される、ブラシは黄色、これは、値、ColorAnimationブラシをアニメーション化します。The previous code doesn't appear to do anything: the brush remains yellow, which is the value supplied by the ColorAnimation that animated the brush. 基になるプロパティの値 (基本値) は実際に青に変更します。The underlying property value (the base value) is actually changed to blue. ただし、有効な場合、または、現在の値は黄色ため、ColorAnimationは基本の値をまだオーバーライドします。However, the effective, or current, value remains yellow because the ColorAnimation is still overriding the base value. 基本の値をもう一度有効な値をする場合は、プロパティへの影響からアニメーションを停止する必要があります。If you want the base value to become the effective value again, you must stop the animation from influencing the property. ストーリー ボード アニメーションでそれを行う 3 つの方法はあります。There are three ways to do this with storyboard animations:

  • アニメーションのFillBehaviorプロパティを StopSet the animation's FillBehavior property to Stop

  • ストーリー ボード全体を削除します。Remove the entire Storyboard.

  • 個々 のプロパティからアニメーションを削除します。Remove the animation from the individual property.

Stop に設定されて、アニメーションの FillBehavior プロパティSet the animation's FillBehavior property to Stop

設定してFillBehaviorStop、アクティブな期間の末尾に達した後、ターゲット プロパティに影響することを停止するアニメーションに指示します。By setting FillBehavior to Stop, you tell the animation to stop affecting its target property after it reaches the end of its active period.

<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 void setButton2BackgroundBrushColor(object sender, EventArgs e)
{

    // This appears to work:
    // the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue;
}
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

ストーリー ボード全体を削除します。Remove the entire storyboard

使用して、RemoveStoryboardトリガーまたはStoryboard.Removeメソッド、そのターゲット プロパティの影響を与えることを停止するストーリー ボード アニメーションがわかります。By using a RemoveStoryboard trigger or the Storyboard.Remove method, you tell the storyboard animations to stop affecting their target properties. この方法と設定の違い、FillBehaviorプロパティは、ストーリー ボードを削除することができますにいつでも、while、FillBehaviorプロパティは、アニメーションがアクティブな期間の末尾に達したときにのみ効果が。The difference between this approach and setting the FillBehavior property is that you can remove the storyboard at anytime, while the FillBehavior property only has an effect when the animation reaches the end of its active period.

<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 void setButton3BackgroundBrushColor(object sender, EventArgs e)
       {

            // This appears to work:
           // the brush changes to blue.
           MyStoryboard.Remove(Button3);
           Button3BackgroundBrush.Color = Colors.Blue;
       }    
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

個々 のプロパティからアニメーションを削除します。Remove an animation from an individual property

プロパティに影響を与えるからアニメーションを停止する別の手法は、使用する、BeginAnimation(DependencyProperty, AnimationTimeline)アニメーション化されているオブジェクトのメソッド。Another technique to stop an animation from affecting a property is to use the BeginAnimation(DependencyProperty, AnimationTimeline) method of the object being animated. 最初のパラメーターとしてアニメーション化されているプロパティを指定し、 null 2 つ目として。Specify the property being animated as the first parameter and null as the second.

<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 void setButton4BackgroundBrushColor(object sender, EventArgs e)
       {

            // This appears to work:
           // the brush changes to blue.
           Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
           Button4BackgroundBrush.Color = Colors.Blue;
       }    
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

この手法は、非ストーリー ボード アニメーションに対しても機能します。This technique also works for non-storyboard animations.

関連項目See also