Cómo: Animar la opacidad de un elemento o pincel

Actualización: noviembre 2007

Para que un elemento de marco aparezca y se desvanezca mediante un fundido, puede animar su propiedad Opacity, o bien puede animar la propiedad Opacity del objeto o los objetos Brush utilizados para pintarlo. Al animar la opacidad del elemento, éste aparece y se desvanece mediante un fundido; sin embargo, animar el pincel utilizado para pintar el elemento permite seleccionar mejor qué parte del elemento se desvanece. Por ejemplo, podría animar la opacidad de un pincel utilizada para pintar el fondo de un botón. Esto haría que el fondo del botón apareciese y se desvaneciese mediante un fundido, pero el texto permanecería totalmente opaco.

En el ejemplo siguiente, se animan dos botones para que aparezcan y se desvanezcan mediante un fundido. La opacidad del primer control Button se anima desde 1.0 hasta 0.0 durante un valor de Duration de cinco segundos. El segundo botón también se anima, pero lo que se anima es la opacidad del objeto SolidColorBrush utilizado para pintar su propiedad Background, en lugar de la opacidad del botón completo. Al ejecutar el ejemplo, el primer botón aparece y desaparece completamente, mientras que en el segundo botón lo único que aparece y desaparece es su fondo. Su texto y borde permanecen totalmente opacos.

Ejemplo

<!-- OpacityAnimationExample.xaml
     This example shows how to animate the opacity of objects, 
     making them fade in and out of view. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Opacity Animation Example" Background="White">
  <StackPanel Margin="20">

    <!-- Clicking this button animates its opacity. -->
    <Button Name="opacityAnimatedButton">
      A Button
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="opacityAnimatedButton"
                Storyboard.TargetProperty="(Button.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  /> 
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

    <!-- Clicking this button animates the opacity of the brush
         used to paint its background. -->
    <Button>
      A Button
      <Button.Background>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
      </Button.Background>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="(Brush.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  />  
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>         
    </Button>
  </StackPanel>
</Page>

Se ha omitido código en este ejemplo. El ejemplo completo también muestra cómo animar la opacidad de un objeto Color dentro de LinearGradientBrush. Para obtener el ejemplo completo, vea Ejemplo Animating the Opacity of an Element.