Übersicht über StoryboardsStoryboards Overview

In diesem Thema wird gezeigt, wie Sie mit Storyboard Objekte zu organisieren und Anwenden von Animationen.This topic shows how to use Storyboard objects to organize and apply animations. Es wird beschrieben, wie interaktiv bearbeitet Storyboard Objekte und beschreibt die indirekte eigenschaftszielsyntax.It describes how to interactively manipulate Storyboard objects and describes indirect property targeting syntax.

VorraussetzungenPrerequisites

Als Voraussetzung für dieses Thema sollten Sie mit den unterschiedlichen Animationstypen und ihren grundlegenden Funktionen vertraut sein.To understand this topic, you should be familiar with the different animation types and their basic features. Eine Einführung zu Animationen finden Sie unter Übersicht über Animationen.For an introduction to animation, see the Animation Overview. Sie sollten auch wissen, wie angefügte Eigenschaften verwendet werden.You should also know how to use attached properties. Weitere Informationen zu angefügten Eigenschaften finden Sie in der Übersicht über angefügte Eigenschaften.For more information about attached properties, see the Attached Properties Overview.

Was ist ein Storyboard?What Is a Storyboard?

Animationen sind nicht der einzige nützliche Zeitachsentyp.Animations are not the only useful type of timeline. Andere Zeitachsenklassen werden bereitgestellt,um Ihnen beim Organisieren von Sätzen von Zeitachsen zu helfen und Zeitachsen auf Eigenschaften anzuwenden.Other timeline classes are provided to help you organize sets of timelines, and to apply timelines to properties. Containerzeitachsen leiten Sie von der TimelineGroup -Klasse und beinhalten ParallelTimeline und Storyboard.Container timelines derive from the TimelineGroup class, and include ParallelTimeline and Storyboard.

Ein Storyboard ist ein Typ von Containerzeitachse, die Zielinformationen für die Zeitachsen bereitstellt, er enthält.A Storyboard is a type of container timeline that provides targeting information for the timelines it contains. Ein Storyboard kann jeden Datentyp enthalten Timeline, einschließlich anderer Containerzeitachsen und Animationen.A Storyboard can contain any type of Timeline, including other container timelines and animations. Storyboard -Objekte ermöglichen Ihnen, Zeitachsen zu kombinieren, die Auswirkungen auf eine Vielzahl von Objekten und Eigenschaften in einer einzigen Zeitachsenstruktur, erleichtert das Organisieren und Steuerung komplexer Zeitsteuerungsverhalten vereinfachen.Storyboard objects enable you to combine timelines that affect a variety of objects and properties into a single timeline tree, making it easy to organize and control complex timing behaviors. Nehmen wir beispielsweise an, Sie wünschen eine Schaltfläche, die die folgenden drei Aktionen ausführt.For example, suppose you want a button that does these three things.

  • Vergrößern und Ändern der Farbe, wenn der Benutzer die Schaltfläche auswählt.Grow and change color when the user selects the button.

  • Verkleinern und dann wieder die ursprüngliche Größe annehmen, wenn auf sie geklickt wird.Shrink away and then grow back to its original size when clicked.

  • Verkleinern und zu 50 % Deckkraft ausgeblendet werden, wenn sie deaktiviert wird.Shrink and fade to 50 percent opacity when it becomes disabled.

In diesem Fall sind mehrere Sätze von Animationen vorhanden, die auf das gleiche Objekt angewendet werden und die Sie abhängig vom Zustand der Schaltfläche zu unterschiedlichen Zeitpunkten wiedergeben möchten.In this case, you have multiple sets of animations that apply to the same object, and you want to play at different times, dependent on the state of the button. Storyboard -Objekte ermöglichen Ihnen, Animationen zu organisieren und sie in Gruppen auf ein oder mehrere Objekte anwenden.Storyboard objects enable you to organize animations and apply them in groups to one or more objects.

Wo können Sie ein Storyboard verwenden?Where Can You Use a Storyboard?

Ein Storyboard können verwendet werden, um Abhängigkeitseigenschaften von animierbaren Klassen animieren (Weitere Informationen dazu, was eine Klasse animierbar macht, finden Sie unter den Übersicht über Animationen).A Storyboard can be used to animate dependency properties of animatable classes (for more information about what makes a class animatable, see the Animation Overview). Da der Einsatz von Storyboards ein Feature auf Frameworkebene ist, das Objekt muss allerdings gehören zu den NameScope von eine FrameworkElement oder ein FrameworkContentElement.However, because storyboarding is a framework-level feature, the object must belong to the NameScope of a FrameworkElement or a FrameworkContentElement.

Beispielsweise können Sie eine Storyboard die folgenden Schritte ausführen:For example, you could use a Storyboard to do the following:

Jedoch nicht verwendet werden konnte eine Storyboard zum Animieren einer SolidColorBrush , die nicht seinem Namen registriert hat eine FrameworkElement oder FrameworkContentElement, oder wurde nicht verwendet, um eine Eigenschaft eine FrameworkElement oder FrameworkContentElement.However, you could not use a Storyboard to animate a SolidColorBrush that did not register its name with a FrameworkElement or FrameworkContentElement, or was not used to set a property of a FrameworkElement or FrameworkContentElement.

Anwenden von Animationen mit einem StoryboardHow to Apply Animations with a Storyboard

Verwenden einer Storyboard zum Organisieren und Anwenden von Animationen, fügen Sie die Animationen als untergeordnete Zeitachsen dem Storyboard.To use a Storyboard to organize and apply animations, you add the animations as child timelines of the Storyboard. Die Storyboard -Klasse stellt die Storyboard.TargetName und Storyboard.TargetProperty angefügten Eigenschaften.The Storyboard class provides the Storyboard.TargetName and Storyboard.TargetProperty attached properties. Sie können diese Eigenschaften für eine Animation einstellen, um deren Zielobjekt und Eigenschaft festzulegen.You set these properties on an animation to specify its target object and property.

Um Animationen auf ihre Ziele anzuwenden, starten Sie den Storyboard mit einer Triggeraktion oder einer Methode.To apply animations to their targets, you begin the Storyboard using a trigger action or a method. In XAMLXAML, Sie verwenden eine BeginStoryboard Objekt mit einer EventTrigger, Trigger, oder DataTrigger.In XAMLXAML, you use a BeginStoryboard object with an EventTrigger, Trigger, or DataTrigger. Im Code können Sie auch die Begin Methode.In code, you can also use the Begin method.

Die folgende Tabelle zeigt die unterschiedlichen Stellen, in dem jede Storyboard beginnen Technik wird unterstützt: pro Instanz, Stil, Steuerelementvorlage und Datenvorlage.The following table shows the different places where each Storyboard begin technique is supported: per-instance, style, control template, and data template. „Pro Instanz“ bezieht sich auf das Verfahren, eine Animation oder ein Storyboard direkt auf Instanzen eines Objekts und nicht in einem Stil, einer Steuerelementvorlage oder einer Datenvorlage anzuwenden."Per-Instance" refers to the technique of applying an animation or storyboard directly to instances of an object, rather than in a style, control template, or data template.

Storyboard wird gestartet mit...Storyboard is begun using… Pro InstanzPer-instance StilStyle SteuerelementvorlageControl template DatenvorlageData template BeispielExample
BeginStoryboard und ein EventTriggerBeginStoryboard and an EventTrigger JaYes JaYes JaYes JaYes Animieren einer Eigenschaft unter Verwendung eines StoryboardsAnimate a Property by Using a Storyboard
BeginStoryboard und eine Eigenschaft TriggerBeginStoryboard and a property Trigger NeinNo JaYes JaYes JaYes Auslösen einer Animation, wenn sich eine Eigenschaft ändertTrigger an Animation When a Property Value Changes
BeginStoryboard und ein DataTriggerBeginStoryboard and a DataTrigger NeinNo JaYes JaYes JaYes Vorgehensweise: Auslösen einer Animation bei Änderung von DatenHow to: Trigger an Animation When Data Changes
Begin-MethodeBegin method JaYes NeinNo NeinNo NeinNo Animieren einer Eigenschaft unter Verwendung eines StoryboardsAnimate a Property by Using a Storyboard

Im folgenden Beispiel wird eine Storyboard zum Animieren der Width von eine Rectangle Element und die Color von eine SolidColorBrush gezeichnet werden soll, die zum Rectangle.The following example uses a Storyboard to animate the Width of a Rectangle element and the Color of a SolidColorBrush used to paint that Rectangle.

<!-- This example shows how to animate with a storyboard.-->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.Samples.Animation.StoryboardsExample" 
  WindowTitle="Storyboards Example">
  <StackPanel Margin="20">
    
    <Rectangle Name="MyRectangle"
      Width="100"
      Height="100">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
      </Rectangle.Fill>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseEnter">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="MyRectangle"
                Storyboard.TargetProperty="Width"
                From="100" To="200" Duration="0:0:1" />
              
              <ColorAnimation 
                Storyboard.TargetName="MySolidColorBrush"
                Storyboard.TargetProperty="Color"
                From="Blue" To="Red" Duration="0:0:1" />  
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle> 
  </StackPanel>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Data;
using System.Windows.Shapes;
using System.Windows.Input;


namespace Microsoft.Samples.Animation
{
    public class StoryboardsExample : Page
    {      
        public StoryboardsExample()
        {
            this.WindowTitle = "Storyboards Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(20);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "MyRectangle";
            
            // Create a name scope for the page.
            NameScope.SetNameScope(this, new NameScope());            
            
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
            this.RegisterName("MySolidColorBrush", mySolidColorBrush);
            myRectangle.Fill = mySolidColorBrush;
            
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 100;
            myDoubleAnimation.To = 200;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, 
                new PropertyPath(Rectangle.WidthProperty));
            
            ColorAnimation myColorAnimation = new ColorAnimation();
            myColorAnimation.From = Colors.Blue;
            myColorAnimation.To = Colors.Red;
            myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myColorAnimation, "MySolidColorBrush");
            Storyboard.SetTargetProperty(myColorAnimation, 
                new PropertyPath(SolidColorBrush.ColorProperty)); 
            Storyboard myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            myStoryboard.Children.Add(myColorAnimation);

            myRectangle.MouseEnter += delegate(object sender, MouseEventArgs e)
            {
                myStoryboard.Begin(this);
            };
            
            myStackPanel.Children.Add(myRectangle);
            this.Content = myStackPanel;
        } 
    }
}

Die folgenden Abschnitte beschreiben die TargetName und TargetProperty angefügten Eigenschaften ausführlicher.The following sections describe the TargetName and TargetProperty attached properties in more detail.

Frameworkelemente, Frameworkinhaltselemente und Freezable-ObjekteTargeting Framework Elements, Framework Content Elements, and Freezables

Im vorherigen Abschnitt wurde erwähnt, dass eine Animation den Namen des Ziels und die zu animierende Eigenschaft kennen muss, um ihr Ziel zu finden.The previous section mentioned that, for an animation to find its target, it must know the target's name and the property to animate. Angeben der zu animierenden Eigenschaft ist leicht: Legen Sie einfach Storyboard.TargetProperty durch den Namen des zu animierenden Eigenschaft.Specifying the property to animate is straight forward: simply set Storyboard.TargetProperty with the name of the property to animate. Geben Sie den Namen des Objekts, dessen Eigenschaft, die Sie animieren, indem Sie festlegen möchten die Storyboard.TargetName Eigenschaft der Animation.You specify the name of the object whose property you want to animate by setting the Storyboard.TargetName property on the animation.

Für die TargetName -Eigenschaft funktioniert, das Zielobjekt muss einen Namen haben.For the TargetName property to work, the targeted object must have a name. Zuweisen eines Namens zu einer FrameworkElement oder FrameworkContentElement in XAMLXAML unterscheidet sich vom Zuweisen eines Namens zu einer Freezable Objekt.Assigning a name to a FrameworkElement or a FrameworkContentElement in XAMLXAML is different than assigning a name to a Freezable object.

Frameworkelemente sind die Klassen, die von erben die FrameworkElement Klasse.Framework elements are those classes that inherit from the FrameworkElement class. Beispiele von Frameworkelementen sind Window, DockPanel, Button, und Rectangle.Examples of framework elements include Window, DockPanel, Button, and Rectangle. Im Wesentlichen sind alle Fenster, Panels und Steuerelemente Elemente.Essentially all windows, panels, and controls are elements. Frameworkinhaltselemente sind die Klassen, die von erben die FrameworkContentElement Klasse.Framework content elements are those classes that inherit from the FrameworkContentElement class. Beispiele von Frameworkinhaltselementen sind FlowDocument und Paragraph.Examples of framework content elements include FlowDocument and Paragraph. Wenn Sie nicht sicher sind, ob ein Typ ein Frameworkelement oder ein Frameworkinhaltselement ist, überprüfen Sie, ob es über eine Name-Eigenschaft verfügt.If you're not sure whether a type is a framework element or a framework content element, check to see whether it has a Name property. Wenn dies der Fall ist, handelt es sich aller Wahrscheinlichkeit nach um ein Frameworkelement oder ein Frameworkinhaltselement.If it does, it's probably a framework element or a framework content element. Um sicherzugehen, überprüfen Sie den Vererbungshierarchie-Abschnitt seiner Typ-Seite.To be sure, check the Inheritance Hierarchy section of its type page.

Zum Aktivieren des Ziels eines Frameworkelements oder Frameworkinhaltselements in XAMLXAML, legen Sie dessen Name Eigenschaft.To enable the targeting of a framework element or a framework content element in XAMLXAML, you set its Name property. Im Code müssen Sie auch verwenden, die RegisterName Methode, um den Namen des Elements mit dem Element registrieren für die Sie erstellt haben eine NameScope.In code, you also need to use the RegisterName method to register the element's name with the element for which you've created a NameScope.

Das folgende Beispiel stammt aus dem vorherigen Beispiel, weist den Namen MyRectangle eine Rectangle, einen Typ von FrameworkElement.The following example, taken from the preceding example, assigns the name MyRectangle a Rectangle, a type of FrameworkElement.

<Rectangle Name="MyRectangle"
  Width="100"
  Height="100">
Rectangle myRectangle = new Rectangle();
myRectangle.Name = "MyRectangle";

// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope());            

this.RegisterName(myRectangle.Name, myRectangle);

Wenn der Name vergeben wurde, können Sie eine Eigenschaft des Elements animieren.After it has a name, you can animate a property of that element.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle"
  Storyboard.TargetProperty="Width"
  From="100" To="200" Duration="0:0:1" />
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, 
    new PropertyPath(Rectangle.WidthProperty));

Freezable Typen sind die Klassen, die von erben die Freezable Klasse.Freezable types are those classes that inherit from the Freezable class. Beispiele für Freezable enthalten SolidColorBrush, RotateTransform, und GradientStop.Examples of Freezable include SolidColorBrush, RotateTransform, and GradientStop.

Zum Aktivieren des Ziels einer Freezable eine Animation in XAMLXAML, verwenden Sie die X: Name Directive um ihm einen Namen zuzuweisen.To enable the targeting of a Freezable by an animation in XAMLXAML, you use the x:Name Directive to assign it a name. Verwenden Sie im Code die RegisterName Methode, um seinen Namen registrieren für die Sie erstellt haben, mit dem Element ein NameScope.In code, you use the RegisterName method to register its name with the element for which you've created a NameScope.

Im folgenden Beispiel wird der Name einer Freezable Objekt.The following example assigns a name to a Freezable object.

<SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
this.RegisterName("MySolidColorBrush", mySolidColorBrush);

Das Objekt kann dann animiert werden.The object can then be targeted by an animation.

<ColorAnimation 
  Storyboard.TargetName="MySolidColorBrush"
  Storyboard.TargetProperty="Color"
  From="Blue" To="Red" Duration="0:0:1" />  
Storyboard.SetTargetName(myColorAnimation, "MySolidColorBrush");
Storyboard.SetTargetProperty(myColorAnimation, 
    new PropertyPath(SolidColorBrush.ColorProperty)); 

Storyboard -Objekte verwenden Namensbereiche, zum Auflösen der TargetName Eigenschaft.Storyboard objects use name scopes to resolve the TargetName property. Weitere Informationen über WPF-Namescopes finden Sie unter WPF-XAML-Namescopes.For more information about WPF name scopes, see WPF XAML Namescopes. Wenn die TargetName Eigenschaft ausgelassen wird, wird die Animation das Element aus, auf dem sie definiert ist, oder, im Fall von Stilen, das formatierte Element als Ziel.If the TargetName property is omitted, the animation targets the element on which it is defined, or, in the case of styles, the styled element.

In einigen Fällen ein Namen kann nicht zugewiesen werden eine Freezable Objekt.Sometimes a name can't be assigned to a Freezable object. Z. B. wenn ein Freezable wird als Ressource deklariert oder verwendet, um einen Eigenschaftswert in einem Stil, es kann kein Name zugewiesen werden.For example, if a Freezable is declared as a resource or used to set a property value in a style, it can't be given a name. Da es keinen Namen hat, kann es zwar kein direktes, aber ein indirektes Ziel sein.Because it doesn't have a name, it can't be targeted directly—but it can be targeted indirectly. In den folgenden Abschnitten wird beschrieben, wie indirekte Ziele verwendet werden.The following sections describe how to use indirect targeting.

Indirektes ZielIndirect Targeting

Es gibt Situationen eine Freezable kann nicht angewendet werden, direkt für eine Animation, z. B. wenn die Freezable wird als Ressource deklariert oder verwendet, um einen Eigenschaftswert in einem Stil.There are times a Freezable can't be targeted directly by an animation, such as when the Freezable is declared as a resource or used to set a property value in a style. In diesen Fällen, obwohl Sie es als direktes Ziel können keine Sie können weiterhin Animieren der Freezable Objekt.In these cases, even though you can't target it directly, you can still animate the Freezable object. Statt die TargetName Eigenschaft mit dem Namen des der Freezable, erhält sie den Namen des Elements, das Freezable "gehört".Instead of setting the TargetName property with the name of the Freezable, you give it the name of the element to which the Freezable "belongs." Z. B. eine SolidColorBrush zum Festlegen der Fill eines Rechtecks Element gehört, zu diesem Rechteck.For example, a SolidColorBrush used to set the Fill of a rectangle element belongs to that rectangle. Zum Animieren des Pinsels legen Sie die Animation TargetProperty mit einer Kette von Eigenschaften, die an die Eigenschaft des Frameworkelements oder Frameworkinhaltselements beginnt die Freezable wurde verwendet, um festzulegen, und endet mit dem Freezable zu animierende Eigenschaft.To animate the brush, you would set the animation's TargetProperty with a chain of properties that starts at the property of the framework element or framework content element the Freezable was used to set and ends with the Freezable property to animate.

<ColorAnimation 
  Storyboard.TargetName="Rectangle01"
  Storyboard.TargetProperty="Fill.Color"
  From="Blue" To="AliceBlue" Duration="0:0:1" />
DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath);

Beachten Sie, dass, wenn die Freezable ist fixiert ist, wird ein Klon vorgenommen werden, und dieser Klon animiert wird.Note that, if the Freezable is frozen, a clone will be made, and that clone will be animated. Wenn in diesem Fall des Originalobjekts HasAnimatedProperties Eigenschaft weiterhin zurück false, da das Originalobjekt nicht animiert ist.When this happens, the original object's HasAnimatedProperties property continues to return false, because the original object is not actually animated. Weitere Informationen zum Klonen finden Sie unter den Übersicht über Freezable-Objekte.For more information about cloning, see the Freezable Objects Overview.

Beachten Sie außerdem, dass nicht vorhandene Objekte Ziel sein können, wenn indirekte Eigenschaftenziele verwendet werden.Also note that, when using indirect property targeting, it's possible to target objects that don't exist. Sie könnten beispielsweise annehmen, die die Background einer bestimmten Schaltfläche mit festgelegt wurde eine SolidColorBrush und versuchen Sie es zum Animieren der Farbe, wenn tatsächlich eine LinearGradientBrush wurde verwendet, um den Hintergrund der Schaltfläche festlegen.For example, you might assume that the Background of a particular button was set with a SolidColorBrush and try to animate its Color, when in fact a LinearGradientBrush was used to set the button's Background. In diesen Fällen wird keine Ausnahme ausgelöst. die Animation hat keinen sichtbaren Effekt haben, da LinearGradientBrush reagiert nicht auf Änderungen an der Color Eigenschaft.In these cases, no exception is thrown; the animation fails to have a visible effect because LinearGradientBrush does not react to changes to the Color property.

In den folgenden Abschnitten wird die Syntax für indirekte Eigenschaftenziele ausführlicher erklärt.The following sections describe indirect property targeting syntax in more detail.

Verwenden einer Eigenschaft eines Freezable-Objekts in XAML als indirektes ZielIndirectly Targeting a Property of a Freezable in XAML

Eine Eigenschaft eines Freezable-Objekts im Ziel XAMLXAML, verwenden Sie die folgende Syntax.To target a property of a freezable in XAMLXAML, use the following syntax.

ElementPropertyName . FreezablePropertyNameElementPropertyName . FreezablePropertyName

WhereWhere

  • ElementPropertyName ist die Eigenschaft der FrameworkElement die der Freezable wird verwendet, um festzulegen, undElementPropertyName is the property of the FrameworkElement which the Freezable is used to set, and

  • FreezablePropertyName ist die Eigenschaft der Freezable zu animieren.FreezablePropertyName is the property of the Freezable to animate.

Der folgende Code zeigt, wie Sie animieren der Color von einer SolidColorBrush zum Festlegen derThe following code shows how to animate the Color of a SolidColorBrush used to set the

Fill ein Rectangle-Elements.Fill of a rectangle element.

<Rectangle
  Name="Rectangle01"
  Height="100"
  Width="100"
  Fill="{StaticResource MySolidColorBrushResource}">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation 
            Storyboard.TargetName="Rectangle01"
            Storyboard.TargetProperty="Fill.Color"
            From="Blue" To="AliceBlue" Duration="0:0:1" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Manchmal müssen Sie ein in einer Auflistung oder einem Array enthaltenes Freezable-Objekt als Ziel verwenden.Sometimes you need to target a freezable contained in a collection or array.

Um ein in einer Auflistung enthaltenes Freezable-Objekt als Ziel zu verwenden, geben Sie die folgende Pfadsyntax an.To target a freezable contained in a collection, you use the following path syntax.

ElementPropertyName .Children[ CollectionIndex ]. FreezablePropertyNameElementPropertyName .Children[ CollectionIndex ]. FreezablePropertyName

Wo CollectionIndex ist der Index des Objekts im Array oder in der Auflistung.Where CollectionIndex is the index of the object in its array or collection.

Nehmen wir beispielsweise an, dass ein Rechteck ist ein TransformGroup Ressource angewendet werden, um die RenderTransform -Eigenschaft, und Sie möchten eine der Transformationen animieren sie enthält.For example, suppose that a rectangle has a TransformGroup resource applied to its RenderTransform property, and you want to animate one of the transforms it contains.

<TransformGroup x:Key="MyTransformGroupResource"
  x:Shared="False">
  <ScaleTransform />
  <RotateTransform />
</TransformGroup>

Der folgende Code zeigt, wie Sie animieren der Angle Eigenschaft der RotateTransform im vorherigen Beispiel gezeigt.The following code shows how to animate the Angle property of the RotateTransform shown in the previous example.

<Rectangle
  Name="Rectangle02"
  Height="100"
  Width="100"
  Fill="Blue"
  RenderTransform="{StaticResource MyTransformGroupResource}">
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.MouseEnter">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="Rectangle02"
            Storyboard.TargetProperty="RenderTransform.Children[1].Angle"
            From="0" To="360" Duration="0:0:1" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>  

Verwenden einer Eigenschaft eines Freezable-Objekts im Code als indirektes ZielIndirectly Targeting a Property of a Freezable in Code

Erstellen Sie im Code eine PropertyPath Objekt.In code, you create a PropertyPath object. Bei der Erstellung der PropertyPath, Sie geben eine Path und PathParameters.When you create the PropertyPath, you specify a Path and PathParameters.

Erstellung PathParameters, erstellen Sie ein Array vom Typ DependencyProperty , die eine Liste von Abhängigkeitseigenschaften-Bezeichnerfeldern enthält.To create PathParameters, you create an array of type DependencyProperty that contains a list of dependency property identifier fields. Das erste Bezeichnerfeld ist für die Eigenschaft der FrameworkElement oder FrameworkContentElement , die die Freezable dient zum festlegen.The first identifier field is for the property of the FrameworkElement or FrameworkContentElement that the Freezable is used to set. Das nächste Bezeichnerfeld stellt die Eigenschaft dar. die Freezable Ziel.The next identifier field represents the property of the Freezable to target. Betrachten Sie sie als eine Kette von Eigenschaften, die verbindet die Freezable auf die FrameworkElement Objekt.Think of it as a chain of properties that connects the Freezable to the FrameworkElement object.

Folgendes ist ein Beispiel für eine Eigenschaft Abhängigkeitskette, dessen Ziel die Color von eine SolidColorBrush zum Festlegen der der Fill eines Rechteckelements.The following is an example of a dependency property chain that targets the Color of a SolidColorBrush used to set the Fill of a rectangle element.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};

Sie müssen auch angeben einer Path.You also need to specify a Path. Ein Path ist eine String , informiert die Path Interpretation dessen PathParameters.A Path is a String that tells the Path how to interpret its PathParameters. Die folgende Syntax wird verwendet.It uses the following syntax.

( OwnerPropertyArrayIndex ).( FreezablePropertyArrayIndex )( OwnerPropertyArrayIndex ).( FreezablePropertyArrayIndex )

WhereWhere

  • OwnerPropertyArrayIndex ist der Index des der DependencyProperty Array, das den Bezeichner der enthält die FrameworkElement -Eigenschaft des Objekts, das Freezable wird verwendet, um festzulegen, undOwnerPropertyArrayIndex is the index of the DependencyProperty array that contains the identifier of the FrameworkElement object's property that the Freezable is used to set, and

  • FreezablePropertyArrayIndex ist der Schnittstellenindex der DependencyProperty Array, das den Bezeichner der Zieleigenschaft enthält.FreezablePropertyArrayIndex is the index of the DependencyProperty array that contains the identifier of property to target.

Das folgende Beispiel zeigt die Path , das wäre begleiten die PathParameters im vorherigen Beispiel definiert.The following example shows the Path that would accompany the PathParameters defined in the preceding example.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";

Das folgende Beispiel kombiniert den Code in den vorherigen Beispielen zum Animieren der Color von eine SolidColorBrush zum Festlegen der der Fill eines Rechteckelements.The following example combines the code in the previous examples to animate the Color of a SolidColorBrush used to set the Fill of a rectangle element.


// Create a name scope for the page.
NameScope.SetNameScope(this, new NameScope()); 

Rectangle rectangle01 = new Rectangle();
rectangle01.Name = "Rectangle01";   
this.RegisterName(rectangle01.Name, rectangle01);
rectangle01.Width = 100;
rectangle01.Height = 100;
rectangle01.Fill = 
    (SolidColorBrush)this.Resources["MySolidColorBrushResource"];

ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Blue;
myColorAnimation.To = Colors.AliceBlue;
myColorAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myColorAnimation, rectangle01.Name);

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {Rectangle.FillProperty, SolidColorBrush.ColorProperty};
string thePath = "(0).(1)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath);

Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myColorAnimation);
BeginStoryboard myBeginStoryboard = new BeginStoryboard();
myBeginStoryboard.Storyboard = myStoryboard;
EventTrigger myMouseEnterTrigger = new EventTrigger();
myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent;
myMouseEnterTrigger.Actions.Add(myBeginStoryboard);
rectangle01.Triggers.Add(myMouseEnterTrigger);

Manchmal müssen Sie ein in einer Auflistung oder einem Array enthaltenes Freezable-Objekt als Ziel verwenden.Sometimes you need to target a freezable contained in a collection or array. Nehmen wir beispielsweise an, dass ein Rechteck ist ein TransformGroup Ressource angewendet werden, um die RenderTransform -Eigenschaft, und Sie möchten eine der Transformationen animieren sie enthält.For example, suppose that a rectangle has a TransformGroup resource applied to its RenderTransform property, and you want to animate one of the transforms it contains.

<TransformGroup x:Key="MyTransformGroupResource"
  x:Shared="False">
  <ScaleTransform />
  <RotateTransform />
</TransformGroup>  

Soll ein Freezable in einer Auflistung enthalten, verwenden Sie die folgende Pfadsyntax.To target a Freezable contained in a collection, you use the following path syntax.

( OwnerPropertyArrayIndex ).( CollectionChildrenPropertyArrayIndex ) [ CollectionIndex ].( FreezablePropertyArrayIndex )( OwnerPropertyArrayIndex ).( CollectionChildrenPropertyArrayIndex ) [ CollectionIndex ].( FreezablePropertyArrayIndex )

Wo CollectionIndex ist der Index des Objekts im Array oder in der Auflistung.Where CollectionIndex is the index of the object in its array or collection.

Ziel der Angle Eigenschaft der RotateTransform, der zweiten Transformation in der TransformGroup, verwenden Sie die folgende Path und PathParameters.To target the Angle property of the RotateTransform, the second transform in the TransformGroup, you would use the following Path and PathParameters.

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {
            Rectangle.RenderTransformProperty, 
            TransformGroup.ChildrenProperty,
            RotateTransform.AngleProperty
        };
string thePath = "(0).(1)[1].(2)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath);

Das folgende Beispiel zeigt den vollständigen Code zum Animieren der Angle von einer RotateTransform enthaltenen eine TransformGroup.The following example shows the complete code for animating the Angle of a RotateTransform contained within a TransformGroup.

Rectangle rectangle02 = new Rectangle();
rectangle02.Name = "Rectangle02";
this.RegisterName(rectangle02.Name, rectangle02);
rectangle02.Width = 100;
rectangle02.Height = 100;
rectangle02.Fill = Brushes.Blue;
rectangle02.RenderTransform = 
    (TransformGroup)this.Resources["MyTransformGroupResource"];

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 0;
myDoubleAnimation.To = 360;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
Storyboard.SetTargetName(myDoubleAnimation, rectangle02.Name);

DependencyProperty[] propertyChain =
    new DependencyProperty[]
        {
            Rectangle.RenderTransformProperty, 
            TransformGroup.ChildrenProperty,
            RotateTransform.AngleProperty
        };
string thePath = "(0).(1)[1].(2)";
PropertyPath myPropertyPath = new PropertyPath(thePath, propertyChain);
Storyboard.SetTargetProperty(myDoubleAnimation, myPropertyPath);

Storyboard myStoryboard = new Storyboard();
myStoryboard.Children.Add(myDoubleAnimation);
BeginStoryboard myBeginStoryboard = new BeginStoryboard();
myBeginStoryboard.Storyboard = myStoryboard;
EventTrigger myMouseEnterTrigger = new EventTrigger();
myMouseEnterTrigger.RoutedEvent = Rectangle.MouseEnterEvent;
myMouseEnterTrigger.Actions.Add(myBeginStoryboard);
rectangle02.Triggers.Add(myMouseEnterTrigger);

Indirektes Ziel mit einem Freezable-Objekt als AusgangspunktIndirectly Targeting with a Freezable as the Starting Point

Die vorherigen Abschnitten beschrieben, wie Sie indirektes Ziel eine Freezable von ab eine FrameworkElement oder FrameworkContentElement und eine Eigenschaftenkette zu einer Freezable Untereigenschaft.The previous sections described how to indirectly target a Freezable by starting with a FrameworkElement or FrameworkContentElement and creating a property chain to a Freezable sub-property. Sie können auch eine Freezable als Ausgangspunkt und indirekt eine der seine Freezable untergeordnete Eigenschaften.You can also use a Freezable as a starting point and indirectly target one of its Freezable sub-properties. Eine zusätzliche Einschränkung gilt bei Verwendung einer Freezable als Ausgangspunkt für das indirekte Ziel: das Starten Freezable und jede Freezable zwischen diesem und den indirektes Ziel verwendeten Untereigenschaft dürfen nicht fixiert sein.One additional restriction applies when using a Freezable as a starting point for indirect targeting: the starting Freezable and every Freezable between it and the indirectly targeted sub-property must not be frozen.

Interaktives Steuern eines Storyboards in XAMLInteractively Controlling a Storyboard in XAML

Zum Starten eines Storyboards Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), Sie verwenden eine BeginStoryboard Aktion auslösen.To start a storyboard in Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), you use a BeginStoryboard trigger action. BeginStoryboard verteilt die Animationen an die Objekte und Eigenschaften, die sie animieren möchten, die und startet das Storyboard an.BeginStoryboard distributes the animations to the objects and properties they animate, and starts the storyboard. (Weitere Informationen zu diesem Prozess finden Sie unter den Animation und zeitliche Steuerung Systemübersicht.) Sie erteilen die BeginStoryboard einen Namen durch Angabe der Name -Eigenschaft, Sie machen es ein steuerbares Storyboard.(For details about this process, see the Animation and Timing System Overview.) If you give the BeginStoryboard a name by specifying its Name property, you make it a controllable storyboard. Sie können das Storyboard dann interaktiv steuern, nachdem es gestartet wurde.You can then interactively control the storyboard after it's started. Die folgende Liste enthält Aktionen des steuerbaren Storyboards, die Sie mit Ereignistriggern zum Steuern eines Storyboards verwenden.The following is a list of controllable storyboard actions that you use with event triggers to control a storyboard.

Im folgenden Beispiel werden Aktionen des steuerbaren Storyboards zum interaktiven Steuern eines Storyboards verwendet.In the following example, controllable storyboard actions are used to interactively control a storyboard.

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Microsoft.SDK.Animation.ControllableStoryboardExample"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">

    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle>

    <Button Name="BeginButton">Begin</Button>
    <Button Name="PauseButton">Pause</Button>
    <Button Name="ResumeButton">Resume</Button>
    <Button Name="SkipToFillButton">Skip To Fill</Button>
    <Button Name="StopButton">Stop</Button>

    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
        <BeginStoryboard Name="MyBeginStoryboard">
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyRectangle" 
              Storyboard.TargetProperty="(Rectangle.Opacity)"
              From="1.0" To="0.0" Duration="0:0:5" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="PauseButton">
        <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="ResumeButton">
        <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="SkipToFillButton">
        <SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
      <EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
        <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Page>

Interaktives Steuern eines Storyboards mithilfe von CodeInteractively Controlling a Storyboard by Using Code

In den vorherigen Beispielen wurde gezeigt, wie mithilfe von Triggeraktionen animiert wird.The previous examples have shown how to animate using trigger actions. Im Code können Sie auch steuern ein Storyboards mithilfe von interaktiven Methoden der der Storyboard Klasse.In code, you may also control a storyboard using interactive methods of the Storyboard class. Für eine Storyboard interaktiv in Code ausgeführt werden, müssen Sie die geeignete Überladung der Storyboard verwenden Begin Methode, und geben Sie true damit sie steuerbar wird.For a Storyboard to be made interactive in code, you must use the appropriate overload of the storyboard's Begin method and specify true to make it controllable. Finden Sie unter den Begin(FrameworkElement, Boolean) Seite erhalten Sie weitere Informationen.See the Begin(FrameworkElement, Boolean) page for more information.

Die folgende Liste enthält die Methoden, die verwendet werden können, zum Bearbeiten einer Storyboard nachdem es gestartet wurde:The following list shows the methods that can be used to manipulate a Storyboard after it has started:

Der Vorteil bei der Verwendung dieser Methoden ist, dass Sie nicht erstellen müssen Trigger oder TriggerAction Objekte; Sie lediglich einen Verweis auf die steuerbar Storyboard Sie bearbeiten möchten.The advantage to using these methods is that you don't need to create Trigger or TriggerAction objects; you just need a reference to the controllable Storyboard you want to manipulate.

Hinweis: Alle interaktiven Aktionen auf, eine Clock, und daher auch auf eine Storyboard treten auf dem nächsten Teilstrich der zeitsteuerungs-Engine kurz vor dem nächsten Rendering erfolgt.Note: All interactive actions taken on a Clock, and therefore also on a Storyboard will occur on the next tick of the timing engine which will happen shortly before the next render. Angenommen, Sie verwenden die Seek Methode springen zu einem anderen Punkt in einer Animation, die den Wert der Eigenschaft nicht sofort geändert, sondern der Wert ändert, beim nächsten Teilstrich der zeitsteuerungs-Engine.For example, if you use the Seek method to jump to another point in an animation, the property value does not change instantly, rather, the value changes on the next tick of the timing engine.

Das folgende Beispiel zeigt, wie angewendet und Steuern von Animationen mit interaktiven Methoden der der Storyboard Klasse.The following example shows how to apply and control animations using the interactive methods of the Storyboard class.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class ControllableStoryboardExample : Page
    {
        private Storyboard myStoryboard;

        public ControllableStoryboardExample()
        {

            // Create a name scope for the page.

            NameScope.SetNameScope(this, new NameScope()); 
 
            this.WindowTitle = "Controllable Storyboard Example";
            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Margin = new Thickness(10);

            // Create a rectangle.
            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";

            // Assign the rectangle a name by 
            // registering it with the page, so that
            // it can be targeted by storyboard
            // animations.
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;
            myStackPanel.Children.Add(myRectangle);

            //
            // Create an animation and a storyboard to animate the
            // rectangle.
            //
            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(5000));
            myDoubleAnimation.AutoReverse = true;

            // Create the storyboard.
            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            //
            // Create some buttons to control the storyboard
            // and a panel to contain them.
            //
            StackPanel buttonPanel = new StackPanel();
            buttonPanel.Orientation = Orientation.Horizontal;
            Button beginButton = new Button();
            beginButton.Content = "Begin";
            beginButton.Click += new RoutedEventHandler(beginButton_Clicked);
            buttonPanel.Children.Add(beginButton);
            Button pauseButton = new Button();
            pauseButton.Content = "Pause";
            pauseButton.Click += new RoutedEventHandler(pauseButton_Clicked);
            buttonPanel.Children.Add(pauseButton);
            Button resumeButton = new Button();
            resumeButton.Content = "Resume";
            resumeButton.Click += new RoutedEventHandler(resumeButton_Clicked);
            buttonPanel.Children.Add(resumeButton);
            Button skipToFillButton = new Button();
            skipToFillButton.Content = "Skip to Fill";
            skipToFillButton.Click += new RoutedEventHandler(skipToFillButton_Clicked);
            buttonPanel.Children.Add(skipToFillButton);
            Button setSpeedRatioButton = new Button();
            setSpeedRatioButton.Content = "Triple Speed";
            setSpeedRatioButton.Click += new RoutedEventHandler(setSpeedRatioButton_Clicked);
            buttonPanel.Children.Add(setSpeedRatioButton);
            Button stopButton = new Button();
            stopButton.Content = "Stop";
            stopButton.Click += new RoutedEventHandler(stopButton_Clicked);
            buttonPanel.Children.Add(stopButton);
            myStackPanel.Children.Add(buttonPanel);
            this.Content = myStackPanel;        
            

        }

        // Begins the storyboard.
        private void beginButton_Clicked(object sender, RoutedEventArgs args)
        {
            // Specifying "true" as the second Begin parameter
            // makes this storyboard controllable.
            myStoryboard.Begin(this, true);

        }

        // Pauses the storyboard.
        private void pauseButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Pause(this);

        }

        // Resumes the storyboard.
        private void resumeButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Resume(this);

        }

        // Advances the storyboard to its fill period.
        private void skipToFillButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.SkipToFill(this);

        }

        // Updates the storyboard's speed.
        private void setSpeedRatioButton_Clicked(object sender, RoutedEventArgs args)
        {
            // Makes the storyboard progress three times as fast as normal.
            myStoryboard.SetSpeedRatio(this, 3);

        }

        // Stops the storyboard.
        private void stopButton_Clicked(object sender, RoutedEventArgs args)
        {
            myStoryboard.Stop(this);

        }         

    }

}

Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media
Imports System.Windows.Media.Animation

Namespace SDKSample

    Public Class ControllableStoryboardExample
        Inherits Page
        Private myStoryboard As Storyboard

        Public Sub New()

            ' Create a name scope for the page.

            NameScope.SetNameScope(Me, New NameScope())

            Me.WindowTitle = "Controllable Storyboard Example"
            Dim myStackPanel As New StackPanel()
            myStackPanel.Margin = New Thickness(10)

            ' Create a rectangle.
            Dim myRectangle As New Rectangle()
            myRectangle.Name = "myRectangle"

            ' Assign the rectangle a name by 
            ' registering it with the page, so that
            ' it can be targeted by storyboard
            ' animations.
            Me.RegisterName(myRectangle.Name, myRectangle)
            myRectangle.Width = 100
            myRectangle.Height = 100
            myRectangle.Fill = Brushes.Blue
            myStackPanel.Children.Add(myRectangle)

            '
            ' Create an animation and a storyboard to animate the
            ' rectangle.
            '
            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(5000))
            myDoubleAnimation.AutoReverse = True

            ' Create the storyboard.
            myStoryboard = New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

            '
            ' Create some buttons to control the storyboard
            ' and a panel to contain them.
            '
            Dim buttonPanel As New StackPanel()
            buttonPanel.Orientation = Orientation.Horizontal
            Dim beginButton As New Button()
            beginButton.Content = "Begin"
            AddHandler beginButton.Click, AddressOf beginButton_Clicked
            buttonPanel.Children.Add(beginButton)
            Dim pauseButton As New Button()
            pauseButton.Content = "Pause"
            AddHandler pauseButton.Click, AddressOf pauseButton_Clicked
            buttonPanel.Children.Add(pauseButton)
            Dim resumeButton As New Button()
            resumeButton.Content = "Resume"
            AddHandler resumeButton.Click, AddressOf resumeButton_Clicked
            buttonPanel.Children.Add(resumeButton)
            Dim skipToFillButton As New Button()
            skipToFillButton.Content = "Skip to Fill"
            AddHandler skipToFillButton.Click, AddressOf skipToFillButton_Clicked
            buttonPanel.Children.Add(skipToFillButton)
            Dim setSpeedRatioButton As New Button()
            setSpeedRatioButton.Content = "Triple Speed"
            AddHandler setSpeedRatioButton.Click, AddressOf setSpeedRatioButton_Clicked
            buttonPanel.Children.Add(setSpeedRatioButton)
            Dim stopButton As New Button()
            stopButton.Content = "Stop"
            AddHandler stopButton.Click, AddressOf stopButton_Clicked
            buttonPanel.Children.Add(stopButton)
            myStackPanel.Children.Add(buttonPanel)
            Me.Content = myStackPanel


        End Sub

        ' Begins the storyboard.
        Private Sub beginButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            ' Specifying "true" as the second Begin parameter
            ' makes this storyboard controllable.
            myStoryboard.Begin(Me, True)

        End Sub

        ' Pauses the storyboard.
        Private Sub pauseButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Pause(Me)

        End Sub

        ' Resumes the storyboard.
        Private Sub resumeButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Resume(Me)

        End Sub

        ' Advances the storyboard to its fill period.
        Private Sub skipToFillButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.SkipToFill(Me)

        End Sub

        ' Updates the storyboard's speed.
        Private Sub setSpeedRatioButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            ' Makes the storyboard progress three times as fast as normal.
            myStoryboard.SetSpeedRatio(Me, 3)

        End Sub

        ' Stops the storyboard.
        Private Sub stopButton_Clicked(ByVal sender As Object, ByVal args As RoutedEventArgs)
            myStoryboard.Stop(Me)

        End Sub

    End Class

End Namespace

Animieren in einem StilAnimate in a Style

Sie können Storyboard Objekte, um Animationen im Definieren einer Style.You can use Storyboard objects to define animations in a Style. Animieren mit einem Storyboard in eine Style funktioniert ähnlich wie eine Storyboard an anderer Stelle mit den folgenden drei Ausnahmen:Animating with a Storyboard in a Style is similar to using a Storyboard elsewhere, with the following three exceptions:

  • Keine Angabe einer TargetName; die Storyboard immer das Element, die Style angewendet wird.You don't specify a TargetName; the Storyboard always targets the element to which the Style is applied. Ziel Freezable Objekte aufweist, müssen Sie indirektes Ziel verwenden.To target Freezable objects, you must use indirect targeting. Weitere Informationen über indirekte Ziele finden Sie unter den indirektes Ziel Abschnitt.For more information about indirect targeting, see the Indirect Targeting section.

  • Sie nicht angeben, ein SourceName für eine EventTrigger oder Trigger.You can't specify a SourceName for an EventTrigger or a Trigger.

  • Sie können keine dynamische ressourcenreferenzen oder Datenbindungsausdrücke festgelegt Storyboard oder animationseigenschaftenwert.You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. Der Grund dafür ist alles, was in einem Style muss threadsicher sein und das Zeitsteuerungssystem muss Freeze Storyboard Objekte, um sie threadsicher zu machen.That's because everything inside a Style must be thread-safe, and the timing system must FreezeStoryboard objects to make them thread-safe. Ein Storyboard kann nicht fixiert werden, wenn es oder seine untergeordneten Zeitachsen dynamische ressourcenreferenzen oder Datenbindungsausdrücke enthalten.A Storyboard cannot be frozen if it or its child timelines contain dynamic resource references or data binding expressions. Weitere Informationen über das Fixieren und andere Freezable Features finden Sie die Übersicht über Freezable-Objekte.For more information about freezing and other Freezable features, see the Freezable Objects Overview.

  • In XAMLXAML, Sie können keine Ereignishandler für deklarieren Storyboard oder Animationsereignisse.In XAMLXAML, you can't declare event handlers for Storyboard or animation events.

Ein Beispiel zeigt, wie ein Storyboard in einem Stil definiert wird, finden Sie die Animieren in einem Stil Beispiel.For an example showing how to define a storyboard in a style, see the Animate in a Style example.

Animieren in einer ControlTemplateAnimate in a ControlTemplate

Sie können Storyboard Objekte, um Animationen im Definieren einer ControlTemplate.You can use Storyboard objects to define animations in a ControlTemplate. Animieren mit einem Storyboard in eine ControlTemplate funktioniert ähnlich wie eine Storyboard an anderer Stelle mit den folgenden zwei Ausnahmen:Animating with a Storyboard in a ControlTemplate is similar to using a Storyboard elsewhere, with the following two exceptions:

Ein Beispiel für ein Storyboard im Definieren einer ControlTemplate, finden Sie unter der Animieren in einer ControlTemplate Beispiel.For an example showing how to define a storyboard in a ControlTemplate, see the Animate in a ControlTemplate example.

Animieren, wenn sich ein Eigenschaftswert ändertAnimate When a Property Value Changes

In Stilen und Steuerelementvorlagen können Sie mit Triggerobjekten ein Storyboard starten, wenn sich eine Eigenschaft ändert.In styles and control templates, you can use Trigger objects to start a storyboard when a property changes. Beispiele finden Sie in Auslösen einer Animation bei der eine Eigenschaft ändert und Animieren in einer ControlTemplate.For examples, see Trigger an Animation When a Property Value Changes and Animate in a ControlTemplate.

Eigenschaft angewendete Animationen Trigger Objekte verhalten sich komplexer als EventTrigger Animationen oder Animationen Einstieg Storyboard Methoden.Animations applied by property Trigger objects behave in a more complex fashion than EventTrigger animations or animations started using Storyboard methods. Sie "übergeben" mit Animationen definiert, die von anderen Trigger Objekte, aber verfassen mit EventTrigger und Methoden ausgelösten Animationen.They "handoff" with animations defined by other Trigger objects, but compose with EventTrigger and method-triggered animations.

Siehe auchSee also