Procedura: aggiungere un'animazione in uno stile

Aggiornamento: novembre 2007

In questo esempio viene illustrato come aggiungere un'animazione alle proprietà all'interno di uno stile. Quando si aggiunge un'animazione all'interno di uno stile, solo l'elemento framework per il quale viene definito lo stile può essere utilizzato direttamente come destinazione. Per utilizzare come destinazione un oggetto Freezable è necessario partire da una proprietà dell'elemento con stile.

Nell'esempio seguente, vengono definite diverse animazioni all'interno di un stile e vengono applicate a un Button. Quando l'utente sposta il mouse sul pulsante, questo cambia da opaco a semitrasparente e nuovamente a opaco più volte, ripetutamente. Quando l'utente sposta il mouse lontano dal pulsante, questo diventa completamente opaco. Quando si fa clic sul pulsante, il colore di sfondo cambia da arancione a bianco e di nuovo ad arancione. Poiché l'oggetto SolidColorBrush utilizzato per disegnare il pulsante non può essere utilizzato direttamente come destinazione, l'accesso a questo oggetto viene eseguito partendo dalla proprietà Background del pulsante.

Esempio

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

Notare che quando si aggiunge un'animazione all'interno di uno stile, è possibile utilizzare come destinazione oggetti che non esistono. Si supponga, ad esempio che lo stile utilizzi un oggetto SolidColorBrush per impostare la proprietà dello sfondo di un pulsante, ma che a un certo punto viene eseguito l'override dello stile e lo sfondo del pulsante viene impostato con un oggetto LinearGradientBrush. Il tentativo di aggiungere un'animazione all'oggetto SolidColorBrush non genererà un'eccezione; l'animazione avrà semplicemente un esito negativo.

Per ulteriori informazioni sulla sintassi di destinazione per storyboard, vedere Cenni preliminari sugli storyboard. Per ulteriori informazioni sull'animazione, vedere Cenni preliminari sull'animazione. Per ulteriori informazioni sugli stili, vedere Applicazione di stili e modelli.