Como: Animate the Opacity of an Element or Brush

Para fazer um elemento de framework esmaecimento e reaparecendo na visualização, você pode animar sua propriedade Opacity ou você pode animar a propriedade Opacity de Brush (ou pincéis) usado para pintá-lo. Animando a opacidade do elemento facilita com que seus filhos esmaeçam e reapareçam no modo de exibição, mas animando o pincel usado para pintar o elemento permite a você ser mais seletivo sobre qual parte do elemento desaparece. Por exemplo, você poderia animar a opacidade de um pincel usado para pintar o plano de fundo de um botão. Isso faria com que o plano de fundo do botão esmaecesse e reaparecesse na exibição, deixando o texto completamente opaco.

Observação:
Animando o Opacity de um Brush oferece vantagens de desempenho em animar o Opacity propriedade de um elemento.

No exemplo a seguir, dois botões são animados de modo que eles esmaeçam e reapareçam da exibição. A opacidade do primeiro Button é animada de 1.0 a 0.0 sobre um Duration de cinco segundos. O segundo botão também é animado, mas a opacidade de SolidColorBrush usado para pintar sua Background será animada em vez da opacidade do botão inteiro. Quando o exemplo é executado, o primeiro botão desaparece completamente e reaparece de exibição, enquanto somente o plano de fundo do segundo botão desapareça e reaparece da exibição. Seu texto e borda permanecem totalmente opacos.

Exemplo

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

Código foi omitido neste exemplo. O exemplo completo também mostra como animar a opacidade de um Color em um LinearGradientBrush. Para o exemplo completo, consulte Animar a opacidade de um exemplo de elemento.