Come animare in uno stile

In questo esempio viene illustrato come animare le proprietà all'interno di uno stile. Quando si anima all'interno di uno stile, è possibile specificare direttamente solo l'elemento framework per il quale viene definito lo stile. Per impostare come destinazione un oggetto congelabile, è necessario discendere attraverso una proprietà dell'elemento stilizzato.

Nell'esempio seguente diverse animazioni vengono definite all'interno di uno stile e applicate a un oggetto Button. Quando l'utente sposta il mouse sul pulsante, si dissolve da opaco a parzialmente traslucente e indietro, ripetutamente. Quando l'utente sposta il mouse fuori dal pulsante, diventa completamente opaco. Quando si fa clic sul pulsante, il colore di sfondo cambia da arancione a bianco e indietro. Poiché l'oggetto SolidColorBrush usato per disegnare il pulsante non può essere indirizzato direttamente, è accessibile puntando verso il basso dalla proprietà del Background pulsante.

Esempio

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

Si noti che quando si anima all'interno di uno stile, è possibile impostare come destinazione gli oggetti che non esistono. Supponiamo, ad esempio, che lo stile usi un SolidColorBrush per impostare la proprietà di sfondo di un pulsante, ma a un certo punto lo stile venga sovrascritto e lo sfondo del pulsante venga impostato con un LinearGradientBrush. Il tentativo di animare l'oggetto SolidColorBrush non genererà un'eccezione. L'animazione avrà semplicemente esito negativo in modo invisibile all'utente.

Per ulteriori informazioni sulla sintassi di destinazione dello storyboard, vedere l'Panoramica degli storyboard. Per altre informazioni sull'animazione, vedere cenni preliminari sull'animazione . Per altre informazioni sugli stili, vedere Stilizzazione e Templating.