Cómo: Establecer una propiedad después de animarla con un guión gráfico

Artículo
08/10/2011

En algunos casos, puede parecer que no es posible cambiar el valor de una propiedad después de animarla.

Ejemplo

En el ejemplo siguiente, se utiliza un objeto Storyboard para animar el color de SolidColorBrush. El guión gráfico se activa al hacer clic en el botón. El evento Completed se controla para que se notifique al programa cuando se completa 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>

Después de completarse ColorAnimation, el programa intenta cambiar el color del pincel a azul.

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

Parece que el código anterior no surte efecto alguno: el pincel sigue siendo amarillo, que es el valor proporcionado por el objeto ColorAnimation que animó el pincel. El valor de la propiedad subyacente (el valor base) sí se cambia a azul. Sin embargo, el valor efectivo, o actual, sigue siendo amarillo porque ColorAnimation continúa invalidando el valor base. Si desea que el valor base pase a ser de nuevo el valor efectivo, debe conseguir que la animación deje de influir en la propiedad. Hay tres maneras de hacer esto con las animaciones de guión gráfico:

Establecer la propiedad FillBehavior de la animación en Stop
Quitar el guión gráfico completo.
Quitar la animación de la propiedad individual.

Establecer la propiedad FillBehavior de la animación en Stop

Al establecer FillBehavior en Stop, le está indicando a la animación que deje de afectar a su propiedad de destino una vez finalice su período activo.

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

Quitar el guión gráfico completo

Al utilizar un desencadenador de RemoveStoryboard o el método Storyboard.Remove, está indicando a las animaciones de guión gráfico que dejen de afectar a las propiedades de destino. La diferencia entre este enfoque y establecer la propiedad FillBehavior es que el guión gráfico se puede quitar en cualquier momento, mientras que la propiedad FillBehavior sólo surte efecto cuando la animación llega al final de su período activo.

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

Quitar una animación de una propiedad individual

Otra técnica para conseguir que una animación deje de afectar a una propiedad es utilizar el método BeginAnimation(DependencyProperty, AnimationTimeline) del objeto animado. Especifique la propiedad animada como primer parámetro y null, como segundo.

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

Esta técnica también funciona para animaciones que no son de guión gráfico.