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

Aggiornamento: novembre 2007

Per applicare una dissolvenza in entrata e in uscita a un elemento del framework, è possibile animare la relativa proprietà Opacity o la proprietà Opacity di Brush (o pennelli) utilizzato per disegnarlo. L‘animazione dell'opacità dell'elemento consente di applicare ad esso e ai relativi elementi figlio una dissolvenza in entrata e in uscita, ma l’animazione del pennello utilizzato per disegnare l'elemento consente di selezionare con maggior precisione la parte dell’elemento a cui applicare la dissolvenza. Ad esempio, è possibile animare l’opacità di un pennello utilizzato per disegnare lo sfondo di un pulsante. In questo modo verrebbe applicata una dissolvenza in entrata e in uscita allo sfondo del pulsante, lasciando il testo completamente opaco.

Nota

L’animazione di Opacity di Brush offre vantaggi a livello di prestazioni rispetto all’animazione della proprietà Opacity di un elemento.

Nell'esempio riportato di seguito, vengono animati due pulsanti in modo da poter applicare loro una dissolvenza in entrata e in uscita. L'opacità del primo oggetto Button viene animata da 1.0 a 0.0 su una Duration di cinque secondi. Anche il secondo pulsante viene animato, ma viene animata l'opacità dell’oggetto SolidColorBrush utilizzato per disegnare Background anziché l’opacità dell’intero pulsante. Quando l'esempio viene eseguito, al primo pulsante viene applicata una dissolvenza in entrata e in uscita completa, mentre per il secondo pulsante la dissolvenza in entrata e in uscita viene applicata solo allo sfondo. 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="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>

Er questo esempio, il codice è stato omesso. Nell’esempio completo viene anche illustrato come animare l'opacità di Color all'interno di LinearGradientBrush. Per l'esempio completo, vedere Esempio di animazione dell'opacità di un elemento.