Anleitung: Festlegen einer Eigenschaft nach dem Animieren mit einem Storyboard

Artikel
12/18/2024

In einigen Fällen kann es scheinen, dass Sie den Wert einer Eigenschaft nach der Animation nicht mehr ändern können.

Die Farbe eines SolidColorBrush animieren

Im folgenden Beispiel wird eine Storyboard verwendet, um die Farbe einer SolidColorBrushzu animieren. Das Storyboard wird ausgelöst, wenn auf die Schaltfläche geklickt wird. Das Completed-Ereignis wird so behandelt, dass das Programm benachrichtigt wird, wenn die ColorAnimation abgeschlossen wird.

<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 auf Blau zu wechseln.

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, das ist der Wert, den das ColorAnimation bereitgestellt hat und der den Pinsel animiert. Der zugrunde liegende Eigenschaftswert (der Basiswert) wird tatsächlich in Blau geändert. Der effektive oder aktuelle Wert bleibt jedoch gelb, da der ColorAnimation weiterhin den ursprünglichen Wert überschreibt. Wenn der Basiswert wieder der effektive Wert wird, müssen Sie damit aufhören, dass die Animation die Eigenschaft beeinflusst. Es gibt drei Möglichkeiten, dies mit Storyboardanimationen zu tun:

Festlegen der FillBehavior-Eigenschaft der Animation auf Stop
Entfernen Sie das gesamte Storyboard.
Entfernen Sie die Animation aus der einzelnen Eigenschaft.

Legen Sie die FillBehavior-Eigenschaft der Animation auf "Stop" fest.

Indem Sie FillBehavior auf Stopfestlegen, 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 signalisieren Sie den Storyboard-Animationen, dass sie die Auswirkungen auf ihre Zieleigenschaften beenden sollen. 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 zu verhindern, dass sich eine Animation auf eine Eigenschaft auswirkt, besteht darin, die BeginAnimation(DependencyProperty, AnimationTimeline) Methode des animierten Objekts zu verwenden. Geben Sie als ersten Parameter die Eigenschaft an, die animiert wird, und null als zweiten Parameter.

<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-Storyboard-Animationen.

Freigeben über