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

Articolo
08/11/2011

In alcuni casi, potrebbe sembrare che non sia possibile modificare il valore di una proprietà dopo che è stata animata.

Esempio

Nell'esempio seguente viene utilizzato un oggetto Storyboard per aggiungere un'animazione al 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 riceva una notifica quando l'oggetto 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>

Una volta completato l'oggetto ColorAnimation, il programma tenta di cambiare il colore del pennello nel colore blu.

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

Il codice precedente non sembra eseguire alcuna azione: il pennello rimane giallo, vale a dire il valore fornito dall'oggetto ColorAnimation che ha animato il pennello. Il valore della proprietà sottostante (valore di base) è realmente passato a blu. Tuttavia, il valore effettivo o corrente rimane giallo in quanto l'oggetto ColorAnimation sta ancora eseguendo l'override del valore di base. Se si desidera che il valore di base divenga nuovamente il valore effettivo, è necessario interrompere l'effetto dell'animazione sulla 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 la proprietà FillBehavior su Stop, si indica all'animazione di interrompere l'effetto sulla proprietà di destinazione una volta raggiunta 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 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;
}

Rimuovere l'intero storyboard

Se si utilizza un trigger RemoveStoryboard o il metodo Storyboard.Remove, si indica alle animazioni dello storyboard di interrompere l'effetto sulle proprietà di destinazione. La differenza tra questo approccio e l'impostazione della proprietà FillBehavior consiste nel fatto che lo storyboard può essere rimosso in qualsiasi momento, mentre la proprietà FillBehavior ha 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 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;
}

Rimuovere un'animazione da una singola proprietà

Un'altra tecnica per interrompere l'effetto di un'animazione su una proprietà consiste nell'utilizzare il metodo BeginAnimation(DependencyProperty, AnimationTimeline) dell'oggetto animato. Specificare la proprietà a cui si sta aggiungendo un'animazione come primo parametro e null come 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 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;
}

Questa tecnica funziona anche per le animazioni non storyboard.