Comment : animer dans un style

Cet exemple indique comment animer des propriétés dans un style. Lors de l'animation dans un style, seul l'élément d'infrastructure pour lequel le style est défini peut être directement ciblé. Pour cibler un objet Freezable, vous devez procéder par pointillage à partir d'une propriété de l'élément mis en forme avec des styles.

Dans l'exemple suivant, plusieurs animations sont définies dans un style et appliquées à Button. Lorsque l'utilisateur déplace le curseur de la souris sur le bouton, ce dernier passe d'opaque à partiellement transparent, et vice versa, à plusieurs reprises. Lorsque l'utilisateur éloigne le curseur de la souris du bouton, ce dernier devient totalement opaque. Lorsque l'utilisateur clique sur le bouton, sa couleur d'arrière-plan passe d'orange à blanc, et vice versa. Du fait que le SolidColorBrush utilisé pour peindre le bouton ne peut pas être directement ciblé, l'utilisateur y accède par pointillage au bas de la propriété Background du bouton.

Exemple

<!-- StyleStoryboardsExample.xaml
     This example shows how to create storyboards in a style. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

Lors d'une animation dans un style, notez qu'il est possible de cibler des objets qui n'existent pas. Par exemple, supposez que votre style utilise SolidColorBrush pour définir la propriété d'arrière-plan d'un bouton, mais à un stade donné, le style est remplacé et l'arrière-plan du bouton est défini avec LinearGradientBrush. Lors de la tentative d'animation, SolidColorBrush ne renverra pas d'exception ; l'animation échouera automatiquement tout simplement.

Pour plus d'informations sur la syntaxe de ciblage de la table de montage séquentiel, consultez Vue d'ensemble des storyboards. Pour plus d'informations sur l'animation, consultez Vue d'ensemble de l'animation. Pour plus d'informations sur les styles, consultez Application d'un style et création de modèles.