Gewusst wie: Animieren in einem Stil

Dieses Beispiel zeigt, wie Sie Eigenschaften in einem Stil animieren. Beim Animieren in einem Stil kann nur das Frameworkelement, für das der Stil definiert ist, direkt als Ziel aufgerufen werden. Um ein Freezable-Objekt als Ziel aufzurufen, müssen Sie ausgehend von einer Eigenschaft des formatierten Elements schrittweise darauf zugreifen.

Im folgenden Beispiel werden mehrere Animationen in einem Stil definiert und einem Button zugewiesen. Wenn der Benutzer die Maus über die Schaltfläche bewegt, ändert sich die Durchlässigkeit wiederholt von deckend in teilweise transparent und zurück. Wenn der Benutzer die Maus von der Schaltfläche wegbewegt, wird die volle Deckkraft wiederhergestellt. Wenn auf die Schaltfläche geklickt wird, ändert sich die Hintergrundfarbe von Orange in Weiß und wieder zurück. Da der für die Farbgebung der Schaltfläche verwendete SolidColorBrush nicht direkt als Ziel aufgerufen werden kann, wird ausgehend von der Background-Eigenschaft der Schaltfläche schrittweise darauf zugegriffen.

Beispiel

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

Beachten Sie, dass beim Animieren in Stilen die Möglichkeit besteht, Objekte als Ziel aufzurufen, die nicht vorhanden sind. Nehmen Sie an, der Stil verwendet einen SolidColorBrush, um die Background-Eigenschaft einer Schaltfläche festzulegen, an einem Punkt wird der Stil jedoch überschrieben, und der Hintergrund der Schaltfläche wird mit einem LinearGradientBrush festgelegt. Wenn Sie versuchen, den SolidColorBrush zu animieren, wird keine Ausnahme ausgelöst, die Animation schlägt ohne Benachrichtigung fehl.

Weitere Informationen über Syntax zum Aufrufen von Zielen bei Storyboards finden Sie unter Übersicht über Storyboards. Weitere Informationen zur Animation finden Sie unter Übersicht über Animationen. Weitere Informationen zu Stilen finden Sie unter Erstellen von Formaten und Vorlagen.