Vorgehensweise: Animieren in einem Stil

In diesem Beispiel wird die Verwendung eines zur Animation von Eigenschaften innerhalb einer Formatvorlage gezeigt. Beim Animieren innerhalb einer Formatvorlage kann nur das Frameworkelement, für das die Formatvorlage definiert ist, direkt anvisiert werden. Zur Ausrichtung auf ein Freezable-Objekt müssen Sie die Informationen aus einer Eigenschaft des formatierten Elements notieren.

Im folgenden Beispiel werden mehrere Animationen innerhalb eines Stils definiert und auf ein Button-Element angewendet. Wenn der Benutzer die Maus über die Schaltfläche bewegt, wechselt diese immer wieder von undurchsichtig zu teilweise durchscheinend und zurück. Wenn der Benutzer den Mauszeiger von der Schaltfläche wegbewegt, wird diese vollständig undurchsichtig. Wenn auf die Schaltfläche geklickt wird, ändert sich die Hintergrundfarbe von Orange in Weiß und wieder zurück. Da das zum Zeichnen der Schaltfläche verwendete SolidColorBrush-Element nicht direkt angesteuert werden kann, wird über die Background-Eigenschaft der Schaltfläche darauf zugegriffen.

Beispiel

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

Beachten Sie, dass beim Animieren innerhalb eines Stils Objekte, die nicht vorhanden sind, als Ziel verwendet werden können. Beispiel: Ihr Stil verwendet ein SolidColorBrush-Element zum Festlegen der Hintergrundeigenschaft einer Schaltfläche, der Stil wird aber irgendwann überschrieben, und für den Hintergrund der Schaltfläche wird LinearGradientBrush festgelegt. Durch den Versuch der Animation der SolidColorBrush wird keine Ausnahme ausgeworfen. Die Animation schlägt einfach im Hintergrund fehl.

Weitere Informationen zur Syntax des Storyboards finden Sie in der Storyboards-Übersicht. Weitere Informationen zur Animation finden Sie unter Übersicht über Animationen. Weitere Informationen zu Formatvorlagen finden Sie unter Erstellen von Formaten und Vorlagen.