Comment : animer l'opacité d'un élément ou d'un pinceau

Pour faire apparaître et disparaître un élément d'infrastructure en fondu dans une vue, vous pouvez animer sa propriété Opacity ou la propriété Opacity de Brush (ou des pinceaux) servant à le peindre. L'animation de l'opacité de l'élément le fait apparaître et disparaître en fondu dans la vue, ainsi que ses enfants ; toutefois, l'animation du pinceau servant à le peindre vous permet de sélectionner plus précisément la partie à faire apparaître ou disparaître en fondu. Par exemple, vous pouvez animer l'opacité d'un pinceau utilisé pour peindre l'arrière-plan d'un bouton. Cela entraînera l'apparition et la disparition en fondu de l'arrière-plan du bouton dans la vue, tout en laissant son texte complètement opaque.

Remarque
L'animation du Opacity d'un Brush offre des avantages en termes de performances par rapport à l'animation de la propriété Opacity d'un élément.

Dans l'exemple suivant, deux boutons sont animés de sorte à apparaître et disparaître en fondu dans la vue. L'opacité du premier Button est animée de 1.0 à 0.0 sur un Duration de cinq secondes. Le deuxième bouton est également animé, mais l'opacité de SolidColorBrush utilisé pour peindre son Background est animée plutôt que l'opacité du bouton entier. Lors de l'exécution de l'exemple, le premier bouton apparaît et disparaît complètement en fondu dans la vue, alors que seul l'arrière-plan du deuxième bouton apparaît et disparaît en fondu dans la vue. Son texte et sa bordure restent complètement opaques.

Exemple

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

Le code a été omis de cet exemple. L'exemple entier indique également comment animer l'opacité d'un Color dans un LinearGradientBrush. Pour obtenir l'exemple complet, consultez Animation de l'opacité d'un élément, exemple.