Freigeben über

Vorgehensweise: Festlegen einer Eigenschaft nach dem Animieren mit einem Storyboard

In einigen Fällen kann es vorkommen, dass Sie den Wert einer Eigenschaft nicht ändern können, nachdem sie animiert wurde.

Die Farbe eines SolidColorBrush animieren

Im folgenden Beispiel wird ein Storyboard verwendet, um die Farbe eines SolidColorBrush zu animieren. Das Storyboard wird ausgelöst, wenn auf die Schaltfläche geklickt wird. Das Completed Ereignis wird behandelt, damit das Programm benachrichtigt wird, wenn das ColorAnimation Ereignis 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 des ColorAnimation Vorgangs 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 bewirken: Der Pinsel bleibt gelb, was der Wert ist, der von ColorAnimation geliefert wird, das 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 Basiswert weiterhin durch den ColorAnimation überschrieben wird. Wenn Sie möchten, dass der Basiswert wieder der effektive Wert wird, müssen Sie die Animation daran hindern, die Eigenschaft zu beeinflussen. Es gibt drei Möglichkeiten, dies mit Storyboardanimationen zu tun:

  • Festlegen der Eigenschaft der Animation FillBehavior auf Stop

  • Entfernen Sie das gesamte Storyboard.

  • Entfernen Sie die Animation aus der einzelnen Eigenschaft.

Festlegen der FillBehavior-Eigenschaft der Animation auf "Stop"

Indem Sie FillBehavior auf Stop setzen, bringen Sie die Animation dazu, ihre Auswirkungen auf die Zieleigenschaft zu beenden, nachdem sie das Ende ihrer aktiven Periode 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

Das gesamte Storyboard entfernen

Mithilfe eines Triggers RemoveStoryboard oder der Storyboard.Remove Methode teilen Sie den Storyboardanimationen mit, dass sie keine Auswirkungen mehr auf ihre Zieleigenschaften haben. 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 einen Effekt hat, 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 die Eigenschaft an, die als erster Parameter und null als zweite animiert wird.

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

Siehe auch

  • Last updated on