Gewusst wie: Festlegen einer Eigenschaft nach einer Storyboard-Animation

  • Artikel

Möglicherweise kommt es vor, dass Sie den Wert einer einmal animierten Eigenschaft, auch nachdem die Animation beendet wurde, nicht verändern können.

Animieren der Farbe von SolidColorBrush

Im folgenden Beispiel wird eine Storyboard verwendet, um die Farbe einer SolidColorBrush zu animieren. Das Storyboard wird ausgelöst, wenn auf die Schaltfläche geklickt wird. Das Completed-reignis wird behandelt, damit das Programm benachrichtigt wird, wenn ColorAnimation abgeschlossen ist.

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

Ändern der Pinselfarbe

Nach Abschluss der ColorAnimation versucht das Programm, die Farbe des Pinsels in Blau zu ändern.

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

Der vorherige Code scheint nichts zu tun: Der Pinsel bleibt gelb, was der Wert von ColorAnimation ist, der den Pinsel animiert hat. Der zugrunde liegende Eigenschaftswert (der Basiswert) wird tatsächlich in Blau geändert. Der effektive oder aktuelle Wert bleibt jedoch gelb, da ColorAnimation weiterhin den Basiswert überschreibt. Wenn der Basiswert wieder zum effektiven Wert werden soll, müssen Sie die Animation daran hindern, die Eigenschaft zu beeinflussen. Es gibt drei Möglichkeiten, dies mit Storyboardanimationen zu tun:

  • Festlegen der Eigenschaft FillBehavior der Animation auf Stop

  • Entfernen Sie das gesamte Storyboard.

  • Entfernen Sie die Animation aus der einzelnen Eigenschaft.

Festlegen der FillBehavior-Eigenschaft der Animation auf "Stop"

Durch Festlegen von FillBehavior auf Stop, teilen Sie der Animation mit, dass die Auswirkung auf die Zieleigenschaft beendet wird, nachdem sie das Ende des aktiven Zeitraums erreicht hat.

<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

Entfernen des gesamten Storyboards

Mithilfe eines RemoveStoryboard-Triggers oder der Storyboard.Remove-Methode erzählen Sie die Storyboardanimationen, um die Auswirkungen auf ihre Zieleigenschaften zu beenden. Der Unterschied zwischen diesem Ansatz und dem Festlegen der FillBehavior-Eigenschaft besteht darin, dass Sie das Storyboard jederzeit entfernen können, während die FillBehavior-Eigenschaft nur wirksam ist, wenn die Animation das Ende des aktiven Zeitraums erreicht.

<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

Entfernen einer Animation aus einer einzelnen Eigenschaft

Eine weitere Technik, um eine Animation daran zu hindern, eine Eigenschaft zu beeinflussen, besteht darin, die BeginAnimation(DependencyProperty, AnimationTimeline)-Methode des animierten Objekts zu verwenden. Geben Sie die zu animierende Eigenschaft als ersten Parameter und null als zweiten an.

<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

Diese Technik funktioniert auch für Nicht-Storyboardanimationen.

Weitere Informationen