方法: ストーリーボードでアニメーション化した後にプロパティを設定する

[アーティクル]
12/18/2024

場合によっては、アニメーション化された後にプロパティの値を変更できないように見えることがあります。

SolidColorBrush の色をアニメーション化する

次の例では、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 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 によって提供される値です。基になるプロパティ値 (基本値) は、実際には青に変更されます。ただし、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 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

ストーリーボード全体を削除する

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

個々のプロパティからアニメーションを削除する

アニメーションがプロパティに影響しないようにするもう 1 つの手法は、アニメーション化されているオブジェクトの 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 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

この手法は、ストーリーボード以外のアニメーションでも機能します。

次の方法で共有