Hur man animerar i en stil

Det här exemplet visar hur du animerar egenskaper i en stil. När du animerar inom en stil kan endast det ramverkselement som stilen är definierad för riktas direkt. Om du vill rikta in dig på ett frysbart objekt måste du utgå från en egenskap hos det formaterade elementet.

I följande exempel definieras flera animeringar i en stil och tillämpas på en Button. När användaren flyttar musen över knappen tonas den bort från ogenomskinlig till delvis genomskinlig och tillbaka igen, upprepade gånger. När användaren flyttar musen från knappen blir den helt ogenomskinlig. När knappen klickas ändras bakgrundsfärgen från orange till vit och tillbaka igen. Eftersom den SolidColorBrush som används för att måla knappen inte kan riktas direkt, nås den genom att punkta ner från knappens Background-egenskap.

Exempel

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

Observera att när du animerar i en stil är det möjligt att rikta objekt som inte finns. Anta till exempel att formatet använder en SolidColorBrush för att ange en knapps bakgrundsegenskap, men någon gång åsidosättas formatet och knappens bakgrund anges med en LinearGradientBrush. Att försöka animera SolidColorBrush utlöser inget undantag. animeringen misslyckas helt enkelt tyst.

Mer information om syntax för storyboard-mål finns i översikten Storyboards. Mer information om animering finns i animeringsöversikten . För mer information om stilar, se Styling och Templating.