Comment animer dans un style

Cet exemple montre comment animer des propriétés dans un style. Lors de l’animation dans un style, seul l’élément framework pour lequel le style est défini peut être ciblé directement. Pour cibler un objet Freezable, vous devez « pointer vers le bas » à partir d’une propriété de l’élément avec des styles.

Dans l’exemple suivant, plusieurs animations sont définies dans un style et appliquées à un Button. Lorsque l’utilisateur déplace la souris sur le bouton, il passe de l’opaque au partiellement translucide, puis revient à l’état opaque, de façon répétée. Lorsque l’utilisateur déplace la souris hors du bouton, elle devient complètement opaque. Lorsque le bouton est cliqué, sa couleur d’arrière-plan passe d’orange à blanc et de retour. Étant donné que le SolidColorBrush utilisé pour peindre le bouton ne peut pas être ciblé directement, il est accessible en bas à partir de la propriété Background du bouton.

Exemple

<!-- StyleStoryboardsExample.xaml
     This example shows how to create storyboards in a style. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Storyboards in Styles Example" Background="White">
  <Page.Resources>
  
    <!-- Defines a Button style. -->
    <Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
      <Setter Property="Button.Background">
        <Setter.Value>
          <SolidColorBrush Color="Orange" />
        </Setter.Value>
      </Setter>
      <Style.Triggers>
      
        <!-- Animates the button's opacity on mouse over. -->
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  From="1.0" To="0.5" Duration="0:0:0.5" AutoReverse="True"
                  RepeatBehavior="Forever" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  
        
        <!-- Returns the button's opacity to 1 when the mouse leaves. -->
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  To="1" Duration="0:0:0.1" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>   
        
        <!-- Changes the button's color when clicked. 
             Notice that the animation can't target the
             SolidColorBrush used to paint the button's background
             directly. The brush must be accessed through the button's
             Background property. -->
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                  From="Orange" To="White" Duration="0:0:0.1" AutoReverse="True" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  
      </Style.Triggers>
    </Style>
  </Page.Resources>
  
  <StackPanel Margin="20">
    <Button Style="{StaticResource MyButtonStyle}">Click Me</Button>
  </StackPanel>
</Page>

Notez que lors de l’animation dans un style, il est possible de cibler des objets qui n’existent pas. Par exemple, supposons que votre style utilise une SolidColorBrush pour définir la propriété d’arrière-plan d’un bouton, mais à un moment donné, le style est substitué et l’arrière-plan du bouton est défini avec un LinearGradientBrush. Essayer d’animer le SolidColorBrush ne lève pas d’exception ; l’animation échouera simplement sans message d’erreur.

Pour plus d’informations sur la syntaxe de ciblage de plan conceptuel, consultez la Vue d'ensemble des plans conceptuels. Pour plus d’informations sur l’animation, consultez la vue d’ensemble de l’animation . Pour plus d’informations sur les styles, consultez Application d’un style et création de modèles.