Procedura: impostare una proprietà dopo averla animata con uno storyboardHow to: Set a Property After Animating It with a Storyboard

In alcuni casi, potrebbe sembrare che non è possibile modificare il valore di una proprietà dopo che è stato animato.In some cases, it might appear that you can't change the value of a property after it has been animated.

EsempioExample

Nell'esempio seguente, un Storyboard viene utilizzato per animare il colore di un SolidColorBrush.In the following example, a Storyboard is used to animate the color of a SolidColorBrush. Quando si fa clic sul pulsante, viene attivato lo storyboard.The storyboard is triggered when the button is clicked. Il Completed evento viene gestito in modo che il programma riceve una notifica quando il ColorAnimation viene completata.The Completed event is handled so that the program is notified when the ColorAnimation completes.

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

EsempioExample

Dopo il ColorAnimation viene completato, il programma tenta di modificare il colore del pennello in blu.After the ColorAnimation completes, the program attempts to change the brush's color to blue.

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

Il codice precedente non sembra eseguire alcuna azione: il pennello rimane giallo, che corrisponde al valore fornito per il ColorAnimation che animato il pennello.The previous code doesn't appear to do anything: the brush remains yellow, which is the value supplied by the ColorAnimation that animated the brush. Il valore della proprietà sottostante (il valore di base) viene effettivamente modificato in blu.The underlying property value (the base value) is actually changed to blue. Tuttavia, il valore effettivo o corrente rimane giallo perché il ColorAnimation sta ancora eseguendo l'override del valore di base.However, the effective, or current, value remains yellow because the ColorAnimation is still overriding the base value. Se si desidera il valore di base per diventare di nuovo il valore effettivo, è necessario interrompere l'animazione dall'influenzare la proprietà.If you want the base value to become the effective value again, you must stop the animation from influencing the property. Esistono tre modi per eseguire questa operazione con le animazioni storyboard:There are three ways to do this with storyboard animations:

  • Impostare l'animazione FillBehavior proprietà StopSet the animation's FillBehavior property to Stop

  • Rimuovere l'intero Storyboard.Remove the entire Storyboard.

  • Rimuovere l'animazione della proprietà singole.Remove the animation from the individual property.

Impostare la proprietà dell'animazione FillBehavior StopSet the animation's FillBehavior property to Stop

Impostando FillBehavior a Stop, si indica all'animazione di interrompere l'effetto sulla proprietà di destinazione dopo aver raggiunto la fine del periodo attivo.By setting FillBehavior to Stop, you tell the animation to stop affecting its target property after it reaches the end of its active period.

<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

Rimuovere l'intero storyboardRemove the entire storyboard

Utilizzando un RemoveStoryboard trigger o Storyboard.Remove (metodo), si indicano le animazioni storyboard di interrompere l'effetto sulle proprietà di destinazione.By using a RemoveStoryboard trigger or the Storyboard.Remove method, you tell the storyboard animations to stop affecting their target properties. La differenza tra questo approccio e l'impostazione di FillBehavior è di proprietà che è possibile rimuovere lo storyboard in qualsiasi momento, mentre il FillBehavior proprietà ha effetto solo quando l'animazione raggiunge la fine del periodo attivo.The difference between this approach and setting the FillBehavior property is that you can remove the storyboard at anytime, while the FillBehavior property only has an effect when the animation reaches the end of its active period.

<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

Rimuovere un'animazione a una singola proprietàRemove an animation from an individual property

Un'altra tecnica per arrestare un effetto di animazione su una proprietà consiste nell'usare il BeginAnimation(DependencyProperty, AnimationTimeline) metodo dell'oggetto viene aggiunta un'animazione.Another technique to stop an animation from affecting a property is to use the BeginAnimation(DependencyProperty, AnimationTimeline) method of the object being animated. Specificare la proprietà viene aggiunta un'animazione come primo parametro e null come il secondo.Specify the property being animated as the first parameter and null as the second.

<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

Questa tecnica funziona anche per le animazioni non storyboard.This technique also works for non-storyboard animations.

Vedere ancheSee Also

FillBehavior
Storyboard.Remove
RemoveStoryboard
Cenni preliminari sull'animazioneAnimation Overview
Cenni preliminari sulle tecniche di animazione delle proprietàProperty Animation Techniques Overview