Condividi tramite

Procedura: Impostare una proprietà dopo averla animata con uno storyboard

  • Articolo

In alcuni casi, potrebbe sembrare che non sia possibile modificare il valore di una proprietà dopo l'animazione.

Animare il colore di un SolidColorBrush

Nell'esempio seguente viene usato un Storyboard per animare il colore di un SolidColorBrush. Lo storyboard viene attivato quando si fa clic sul pulsante. L'evento Completed viene gestito in modo che il programma venga informato quando ColorAnimation viene completato.

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

Modificare il colore del pennello

Al termine della ColorAnimation, il programma tenta di modificare il colore del pennello in blu.

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 operazione: il pennello rimane giallo, ovvero il valore fornito dal ColorAnimation che ha animato il pennello. Il valore della proprietà sottostante (il valore di base) viene effettivamente modificato in blu. Tuttavia, il valore effettivo o corrente rimane giallo perché il ColorAnimation sta ancora sovrascrivendo il valore di base. Se vuoi che il valore di base diventi di nuovo il valore effettivo, devi impedire all'animazione di influenzare la proprietà. Esistono tre modi per eseguire questa operazione con le animazioni storyboard:

  • Impostare la proprietà FillBehavior dell'animazione su Stop

  • Rimuovere l'intero storyboard.

  • Rimuovere l'animazione dalla singola proprietà.

Impostare la proprietà FillBehavior dell'animazione su Stop

Impostando FillBehavior su Stop, si indica all'animazione di interrompere l'impatto sulla proprietà di destinazione dopo che raggiunge la fine del periodo attivo.

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

Utilizzando un trigger RemoveStoryboard o il metodo Storyboard.Remove, comunichi alle animazioni storyboard di cessare di influenzare le loro proprietà di destinazione. La differenza tra questo approccio e l'impostazione della proprietà FillBehavior è che è possibile rimuovere lo storyboard in qualsiasi momento, mentre la proprietà FillBehavior ha un effetto solo quando l'animazione raggiunge la fine del periodo attivo.

<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 da una singola proprietà

Un'altra tecnica per impedire a un'animazione di influire su una proprietà consiste nell'usare il metodo BeginAnimation(DependencyProperty, AnimationTimeline) dell'oggetto animato. Specificare la proprietà da animare come il primo parametro e null come il secondo.

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

Vedere anche