Procedura: animare l'opacità di un elemento o un pennello

Per rendere un elemento framework dissolvenza all'interno e all'esterno della visualizzazione, è possibile animare la relativa Opacity proprietà oppure animare la Opacity proprietà dei Brush pennelli utilizzati per disegnare. L'animazione dell'opacità dell'elemento lo rende e i relativi elementi figlio sfumato e fuori visualizzazione, ma animando il pennello utilizzato per disegnare l'elemento, è possibile essere più selettivi su quale parte dell'elemento svanisce. Ad esempio, è possibile animare l'opacità di un pennello usato per disegnare lo sfondo di un pulsante. In questo modo lo sfondo del pulsante si dissolve in entrata e in uscita dalla visualizzazione, lasciando il testo completamente opaco.

Nota

L'animazione Opacity di di un oggetto Brush offre vantaggi in termini di prestazioni rispetto all'animazione della Opacity proprietà di un elemento.

Nell'esempio seguente vengono animati due pulsanti in modo da dissolvere e uscire dalla visualizzazione. L'Opacità del primo Button viene animata da 1.0 a 0.0 più Duration di cinque secondi. Il secondo pulsante è anche animato, ma l'opacità di SolidColorBrush usata per disegnare il relativo Background oggetto è animato anziché l'opacità dell'intero pulsante. Quando viene eseguito l'esempio, il primo pulsante si dissolve completamente all'interno e all'esterno della visualizzazione, mentre solo lo sfondo del secondo pulsante si dissolve in e fuori visualizzazione. Il testo e il bordo rimangono completamente opachi.

Esempio

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

Il codice è stato omesso da questo esempio. L'esempio completo mostra anche come animare l'opacità di un Color oggetto all'interno di un oggetto LinearGradientBrush. Per l'esempio completo, vedere Animazione dell'Opacità di un esempio di elemento.