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

Articolo
10/18/2023

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

Animare il colore di un oggetto SolidColorBrush

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

<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

ColorAnimation Al termine, 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 dall'oggetto 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é è ColorAnimation ancora sottoposto a override del 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à dell'animazione FillBehavior 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 relativa 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

Usando un RemoveStoryboard trigger o il Storyboard.Remove metodo, devi indicare alle animazioni storyboard di interrompere l'impatto sulle proprietà di destinazione. La differenza tra questo approccio e l'impostazione della FillBehavior proprietà è che è possibile rimuovere lo storyboard in qualsiasi momento, mentre la FillBehavior proprietà 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 BeginAnimation(DependencyProperty, AnimationTimeline) metodo dell'oggetto animato. Specificare la proprietà animata come primo parametro e null come seconda.

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

Condividi tramite