Gewusst wie: 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 einer Formatvorlage definiert und auf eine Button angewendet. Wenn der Benutzer die Maus über die Schaltfläche bewegt, wechselt diese von undurchsichtig bis teilweise durchsichtig und zurück. Wenn der Benutzer die Maus von der Schaltfläche wegbewegt, wird sie vollständig undurchsichtig. Wenn er auf die Schaltfläche klickt, ändert sich die Hintergrundfarbe von Orange in Weiß und wieder zurück. Da die zum Zeichnen der Schaltfläche verwendete Schaltfläche SolidColorBrush nicht direkt anvisiert werden kann, wird darauf zugegriffen, indem sie aus der Eigenschaft Background der Schaltfläche notiert wird.

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 einer Formatvorlage die Ausrichtung auf Objekte möglich ist, die nicht vorhanden sind. Beispiel: Ihre Formatvorlage verwendet eine SolidColorBrush zum Festlegen der Hintergrundeigenschaften einer Schaltfläche, die Formatvorlage wird aber irgendwann überschrieben und für den Hintergrund der Schaltfläche wird eine 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.