Guide pratique pour animer 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 style.

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 disparaît de l’opaque au retour partiellement translucide et à nouveau, à plusieurs reprises. 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 bouton utilisé pour peindre le bouton ne peut pas être ciblé directement, il est accessible en faisant glisser vers le bas à partir de la propriété du Background 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 propriété d’arrière-plan d’un bouton, mais à un moment donné, le style est remplacé et l’arrière-plan du bouton est défini avec un LinearGradientBrush. Essayer d’animer l’objet SolidColorBrush ne lève pas d’exception ; l’animation échoue simplement en mode silencieux.

Pour plus d’informations sur la syntaxe de ciblage de storyboard, consultez la vue d’ensemble des storyboards. Pour plus d’informations sur les animations, consultez l’article Vue d’ensemble de l’animation. Pour plus d’informations sur les styles, consultez le style et la création de modèles.