Gewusst wie: Festlegen einer Eigenschaft nach einer Storyboard-Animation

Artikel
08/10/2011

In einigen Fällen kann es so aussehen, als ob Sie den Wert einer Eigenschaft nicht ändern können, nachdem sie animiert wurde.

Beispiel

Im folgenden Beispiel wird ein Storyboard verwendet, um die Farbe für SolidColorBrush zu 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 der ColorAnimation-Vorgang 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>

Nachdem der ColorAnimation-Vorgang abgeschlossen wurde, versucht das Programm, die Farbe des Pinsels in Blau zu ändern.

        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

private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{

    // Does not appear to have any effect:
    // the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue;
}

Es erscheint, als ob der vorherige Code keine Auswirkung hat: Der Pinsel bleibt gelb, also auf dem Wert, der von ColorAnimation als Animation des Pinsels angegeben wurde. Tatsächlich wird jedoch der zugrunde liegende Eigenschaftswert (der Basiswert) in Blau geändert. Der aktive bzw. der aktuelle Wert bleibt jedoch der Wert für Gelb, weil ColorAnimation den Basiswert noch überschreibt. Wenn Sie möchten, dass der Basiswert wieder zum aktiven Wert wird, müssen Sie es rückgängig machen, dass die sich die Animation auf die Eigenschaft auswirkt. Es gibt drei Möglichkeiten, dies bei Storyboard-Animationen zu erreichen:

Legen Sie die FillBehavior-Eigenschaft der Animation auf den Wert Stop fest.
Entfernen Sie das gesamte Storyboard.
Entfernen Sie die Animation aus der jeweiligen Eigenschaft.

Festlegen der FillBehavior-Eigenschaft der Animation auf "Stop"

Indem Sie FillBehavior auf Stop setzen, weisen Sie die Animation an, nicht mehr auf die Zieleigenschaft zu wirken, nachdem das Ende des Aktivitätszeitraums erreicht wurde.

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

private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{

    // This appears to work:
    // the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue;
}

Entfernen des gesamten Storyboards

Indem Sie einen RemoveStoryboard-Trigger oder die Storyboard.Remove-Methode verwenden, weisen Sie die Storyboard-Animationen an, nicht mehr auf ihre Zieleigenschaften zu wirken. Der Unterschied zwischen diesem Ansatz und dem Festlegen der FillBehavior-Eigenschaft besteht darin, dass Sie das Storyboard jederzeit entfernen können, während sich die FillBehavior-Eigenschaft nur auswirkt, nachdem die Animation das Ende ihres Aktivitätszeitraums erreicht hat.

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

private void setButton3BackgroundBrushColor(object sender, EventArgs e)
{

     // This appears to work:
    // the brush changes to blue.
    MyStoryboard.Remove(Button3);
    Button3BackgroundBrush.Color = Colors.Blue;
}

Entfernen einer Animation aus einer einzelnen Eigenschaft

Ein anderes Verfahren zum Beenden der Auswirkung einer Animation auf eine Eigenschaft ist die Verwendung der BeginAnimation(DependencyProperty, AnimationTimeline)-Methode des Objekts, das animiert wird. Geben Sie die animierte Eigenschaft als ersten Parameter und null als zweiten Parameter 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 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

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

Dieses Verfahren funktioniert auch für Animationen ohne Storyboard.