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

Para que un elemento de marco se desvanezca y salga de la vista, puede animar su Opacity propiedad o puede animar la Opacity propiedad de los Brush (o pinceles) usados para pintarlo. Animar la opacidad del elemento hace que el elemento y sus elementos secundarios se desvanezcan y desaparezcan de la vista, pero animar el pincel usado para pintar el elemento le permite ser más selectivo respecto a qué parte del elemento se desvanece. Por ejemplo, podría animar la opacidad de un pincel usado para pintar el fondo de un botón. Esto hará que el fondo del botón se desvanezca y salga de la vista, mientras deja su texto totalmente opaco.

Nota:

Animar el Opacity de un Brush proporciona ventajas de rendimiento sobre animar la propiedad Opacity de un elemento.

En el ejemplo siguiente, se animan dos botones para que se desvanezcan y salgan de la vista. La opacidad del primer Button se anima desde 1.0 hasta 0.0 durante un período de cinco segundos. El segundo botón también está animado, pero la opacidad del SolidColorBrush utilizado para pintar su Background se anima en lugar de la opacidad de todo el botón. Cuando se ejecuta el ejemplo, el primer botón se atenua completamente dentro y fuera de la vista, mientras que solo el fondo del segundo botón se atenua dentro y fuera de la vista. 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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://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>

El código se ha omitido en este ejemplo. En el ejemplo completo también se muestra cómo animar la opacidad de un Color dentro de un LinearGradientBrush. Para obtener el ejemplo completo, vea animando la opacidad de un ejemplo de elemento.