Übersicht über StoryboardsStoryboards Overview

In diesem Thema wird gezeigt, Storyboard wie-Objekte zum organisieren und Anwenden von Animationen verwendet werden.This topic shows how to use Storyboard objects to organize and apply animations. Es wird beschrieben, wie Sie Storyboard -Objekte interaktiv bearbeiten und die indirekte Eigenschafts Ziel Syntax beschreiben.It describes how to interactively manipulate Storyboard objects and describes indirect property targeting syntax.

Erforderliche KomponentenPrerequisites

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. Container Zeitachsen werden von der TimelineGroup -Klasse abgeleitet und enthalten ParallelTimeline und. StoryboardContainer timelines derive from the TimelineGroup class, and include ParallelTimeline and Storyboard.

Ein Storyboard ist ein Typ von Container Zeitachse, der Ziel Informationen für die in ihm enthaltenen Zeitachsen bereitstellt.A Storyboard is a type of container timeline that provides targeting information for the timelines it contains. Ein Storyboard kann jeden beliebigen Typ Timelineenthalten, einschließlich anderer containertimelines und Animationen.A Storyboard can contain any type of Timeline, including other container timelines and animations. StoryboardObjekte ermöglichen es Ihnen, Zeitachsen zu kombinieren, die eine Vielzahl von Objekten und Eigenschaften in einer einzelnen Zeitachsen Struktur beeinflussen, sodass Sie das komplexe Verhalten der zeitlichen Steuerung leicht organisieren und steuern können.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. Storyboardmit-Objekten können Sie Animationen organisieren und 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 kann verwendet werden, um Abhängigkeits Eigenschaften von Animations baren Klassen zu animieren (Weitere Informationen dazu, was eine Klasse animabel macht, finden Sie unter Ü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 das Storyboarding jedoch eine Funktion auf Frameworkebene ist, muss das-Objekt NameScope zu einem FrameworkElement oder FrameworkContentElementeinem gehören.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 für folgende Aufgaben verwenden:For example, you could use a Storyboard to do the following:

Sie können jedoch Storyboard keinen verwenden, um einen SolidColorBrush zu animieren, der seinen Namen nicht mit FrameworkElement oder FrameworkContentElementregistriert hat oder nicht zum Festlegen einer Eigenschaft von FrameworkElement oder FrameworkContentElementverwendet wurde.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

Um einen Storyboard zum organisieren und anwenden Storyboardvon Animationen zu verwenden, fügen Sie die Animationen als untergeordnete Zeitachsen von hinzu.To use a Storyboard to organize and apply animations, you add the animations as child timelines of the Storyboard. Die Storyboard -Klasse stellt Storyboard.TargetName die Storyboard.TargetProperty angefügten Eigenschaften und bereit.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.

Wenn Sie Animationen auf Ihre Ziele anwenden möchten, beginnen Storyboard Sie mit der Verwendung einer Triggeraktion oder einer Methode.To apply animations to their targets, you begin the Storyboard using a trigger action or a method. In XAMLXAMLverwenden Sie ein BeginStoryboard -Objekt mit EventTrigger, Triggeroder DataTrigger.In XAMLXAML, you use a BeginStoryboard object with an EventTrigger, Trigger, or DataTrigger. Im Code können Sie auch die Begin -Methode verwenden.In code, you can also use the Begin method.

In der folgenden Tabelle werden die verschiedenen Orte angezeigt Storyboard , an denen die einzelnen BEGIN-Techniken unterstützt werden: pro Instanz, Stil, Steuerelement Vorlage und Daten Vorlage.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
BeginStoryboardund einEventTriggerBeginStoryboard and an EventTrigger JaYes JaYes JaYes JaYes Animieren einer Eigenschaft unter Verwendung eines StoryboardsAnimate a Property by Using a Storyboard
BeginStoryboardund eine EigenschaftTriggerBeginStoryboard and a property Trigger NeinNo JaYes JaYes JaYes Auslösen einer Animation, wenn sich eine Eigenschaft ändertTrigger an Animation When a Property Value Changes
BeginStoryboardund aDataTriggerBeginStoryboard and a DataTrigger NeinNo JaYes JaYes JaYes Vorgehensweise: Beim Ändern von Daten eine Animation auslöstHow 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 Storyboard folgenden Beispiel Rectangle Width SolidColorBrush wird ein Color -Elementverwendet,umdieeines-Elementszuanimieren,unddas-Elementeines-Elements,daszumZeichnenRectangleThe 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;
        } 
    }
}

In den folgenden Abschnitten werden TargetName die TargetProperty angefügten Eigenschaften und ausführlicher beschrieben.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. Die Angabe der zu animierenden Eigenschaft erfolgt direkt: Storyboard.TargetProperty legen Sie einfach den Namen der zu animierenden Eigenschaft fest.Specifying the property to animate is straight forward: simply set Storyboard.TargetProperty with the name of the property to animate. Sie geben den Namen des Objekts an, dessen Eigenschaft Sie animieren möchten, indem Sie Storyboard.TargetName die-Eigenschaft für die Animation festlegen.You specify the name of the object whose property you want to animate by setting the Storyboard.TargetName property on the animation.

Damit die TargetName -Eigenschaft funktioniert, muss das Zielobjekt einen Namen haben.For the TargetName property to work, the targeted object must have a name. Das Zuweisen eines Namens zu FrameworkElement einem oder FrameworkContentElement einem XAMLXAML in unterscheidet sich vom Zuweisen eines namens Freezable zu einem-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 FrameworkElement der-Klasse erben.Framework elements are those classes that inherit from the FrameworkElement class. Beispiele für Frameworkelemente Windowsind 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 FrameworkContentElement von der-Klasse erben.Framework content elements are those classes that inherit from the FrameworkContentElement class. Beispiele für Frameworkinhaltselemente Paragraphsind FlowDocument und.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.

Um die Zielgruppen Steuerung für ein FrameworkElement oder ein Framework- XAMLXAMLInhalts Element in zu Name aktivieren, legen Sie dessen-Eigenschaft fest.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 die RegisterName -Methode verwenden, um den Namen des Elements mit dem Element zu registrieren, für das Sie eine NameScopeerstellt haben.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.

Im folgenden Beispiel, das aus dem vorherigen Beispiel entnommen wurde, wird MyRectangle der RectangleName a, dem FrameworkElementTyp, zugewiesen.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));

FreezableTypen sind die Klassen, die von der Freezable -Klasse erben.Freezable types are those classes that inherit from the Freezable class. Beispiele für Freezable sind SolidColorBrush, RotateTransformund .GradientStopExamples of Freezable include SolidColorBrush, RotateTransform, and GradientStop.

Um die Zielvorgabe Freezable eines durch eine Animation in XAMLXAMLzu aktivieren, verwenden Sie die x:Name-Direktive , 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. Im Code verwenden Sie die RegisterName -Methode, um den Namen mit dem Element zu registrieren, für das Sie eine NameScopeerstellt haben.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 einem- Freezable Objekt ein Name zugewiesen.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 namens Bereiche zum Auflösen TargetName der-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, zielt die Animation auf das Element ab, für das Sie definiert ist, oder im Fall von Stilen das formatierte Element.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.

Manchmal kann ein Name keinem- Freezable Objekt zugewiesen werden.Sometimes a name can't be assigned to a Freezable object. Wenn beispielsweise eine Freezable als Ressource deklariert oder verwendet wird, um einen Eigenschafts Wert in einem Stil festzulegen, kann Ihr 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 kann vorkommen, Freezable dass ein nicht direkt auf eine Animation ausgerichtet werden kann, z Freezable . b. wenn der als Ressource deklariert wird oder zum Festlegen eines Eigenschafts Werts in einem Stil verwendet wird.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 können Sie das Freezable Objekt trotzdem animieren, obwohl Sie es nicht direkt ausrichten können.In these cases, even though you can't target it directly, you can still animate the Freezable object. Anstatt die TargetName -Eigenschaft mit dem Namen Freezabledes festzulegen, benennen Sie Sie mit dem Namen des Elements, zu dem Freezable das-Element 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." Zum Beispiel gehört ein SolidColorBrush , mit dem der Fill eines Rechteck Elements festgelegt wird, zu diesem Rechteck.For example, a SolidColorBrush used to set the Fill of a rectangle element belongs to that rectangle. Wenn Sie den Pinsel animieren möchten, legen Sie die- TargetProperty Animation mit einer Kette von Eigenschaften fest, die bei der-Eigenschaft des Framework-Elements oder des Freezable Framework-Inhalts Elements beginnt, das verwendet Freezable wurde, um die zu animierende Eigenschaft festzulegen und zu beenden.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 Folgendes: Wenn Freezable der eingefroren ist, wird ein Klon erstellt, und der Klon wird animiert.Note that, if the Freezable is frozen, a clone will be made, and that clone will be animated. Wenn dies geschieht, wird die-Eigenschaft HasAnimatedProperties des ursprünglichen-Objekts falseweiterhin zurückgegeben, da das ursprüngliche-Objekt nicht tatsächlich 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 Übersicht über frei wählbare 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. Beispielsweise können Sie davon ausgehen, dass Background der einer bestimmten Schaltfläche mit einem SolidColorBrush festgelegt wurde, und versuchen, seine Farbe zu animieren, LinearGradientBrush wenn tatsächlich ein verwendet wurde, um den Hintergrund der Schaltfläche festzulegen.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 kann nicht sichtbar sein, da LinearGradientBrush nicht auf Änderungen an der Color Eigenschaft reagiert.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

Verwenden Sie die folgende Syntax, um eine Eigenschaft XAMLXAMLeines frei wählbaren in als Ziel zu verwenden.To target a property of a freezable in XAMLXAML, use the following syntax.

ElementPropertyName . FreezablePropertyNameElementPropertyName . FreezablePropertyName

WhereWhere

  • ElementPropertyName ist die Eigenschaft des FrameworkElement Freezable -Objekts, das verwendet wird, um festzulegen.ElementPropertyName is the property of the FrameworkElement which the Freezable is used to set, and

  • " Freizablepropertyname " ist die- Freezable Eigenschaft des zu animierenden-Objekts.FreezablePropertyName is the property of the Freezable to animate.

Der folgende Code zeigt, wie Sie den Color SolidColorBrush eines animieren, der verwendet wird Fill , um den eines Rechteck Elements festzulegen.The following code shows how to animate the Color of a SolidColorBrush used to set the 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

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

Angenommen, ein Rechteck hat eine TransformGroup Ressource, die auf seine RenderTransform -Eigenschaft angewendet wird, und Sie möchten eine der darin enthaltenen Transformationen animieren.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 die Angle -Eigenschaft RotateTransform der im vorherigen Beispiel animieren.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

Im Code erstellen Sie ein PropertyPath -Objekt.In code, you create a PropertyPath object. Wenn Sie das PropertyPatherstellen, geben Sie einen Path und PathParameterseinen an.When you create the PropertyPath, you specify a Path and PathParameters.

Zum Erstellen PathParametersvon erstellen Sie ein Array vom Typ DependencyProperty , das eine Liste von Bezeichnerfeldern für die Abhängigkeits Eigenschaft 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 FrameworkElement des FrameworkContentElement oder, Freezable das verwendet wird, um festzulegen.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 Freezable der als Ziel dar.The next identifier field represents the property of the Freezable to target. Stellen Sie sich dies als eine Kette von Eigenschaften vor, Freezable die den FrameworkElement mit dem-Objekt verbindet.Think of it as a chain of properties that connects the Freezable to the FrameworkElement object.

Im folgenden finden Sie ein Beispiel für eine Abhängigkeits Eigenschaften Kette, Color die auf SolidColorBrush den eines-Objekts Fill abzielt, das verwendet wird, um den eines Rechteck Elements festzulegen.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 ein Pathangeben.You also need to specify a Path. Eine Path ist eine String , die Path angibt, wie Ihre PathParametersinterpretiert werden soll.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

  • "Besitzer propertyarrayindex " ist der Index DependencyProperty des Arrays, das FrameworkElement den Bezeichner der Eigenschaft des Objekts enthält Freezable , mit dem der festgelegt wird, 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

  • " Freizablepropertyarrayindex " ist der Index DependencyProperty des Arrays, das den Bezeichner der Eigenschaft enthält, die Ziel ist.FreezablePropertyArrayIndex is the index of the DependencyProperty array that contains the identifier of property to target.

Im folgenden Beispiel wird das Path -Beispiel gezeigt, PathParameters das die enthält, die im vorherigen Beispiel definiert ist.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)";

Im folgenden Beispiel SolidColorBrush wird der Code in den vorherigen Beispielen kombiniert, um Color die eines-Elements zu animieren Fill , mit dem der eines Rechteck Elements festgelegt wird.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. Angenommen, ein Rechteck hat eine TransformGroup Ressource, die auf seine RenderTransform -Eigenschaft angewendet wird, und Sie möchten eine der darin enthaltenen Transformationen animieren.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>  

Verwenden Sie die Freezable folgende Pfad Syntax, um ein Ziel in einer Auflistung als Ziel zu verwenden.To target a Freezable contained in a collection, you use the following path syntax.

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

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

Wenn Sie die Angle -Eigenschaft RotateTransformdes-Objekts, TransformGroupdie zweite Transformation in, als Ziel verwenden möchten Path , PathParametersverwenden Sie Folgendes und.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 gesamten Code für die Animation Angle RotateTransform eines in einer 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

In Freezable den vorherigen Abschnitten wurde beschrieben, wie Sie indirekt auf abzielen, indem Sie FrameworkElement mit oder FrameworkContentElement beginnen und eine Eigenschaften Freezable Kette zu einer untergeordneten Eigenschaft erstellen.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 verwenden und indirekt eine Ihrer Freezable untergeordneten Eigenschaften als Ziel verwenden.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, wenn ein Freezable als Ausgangspunkt für die indirekte Zielgruppe verwendet wird Freezable : der Freezable Start und jede zwischen dem und der indirekt ausgerichteten untergeordneten Eigenschaft dürfen nicht eingefroren werden.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 in Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)verwenden Sie eine BeginStoryboard Triggeraktion.To start a storyboard in Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML), you use a BeginStoryboard trigger action. BeginStoryboardverteilt die Animationen an die Objekte und Eigenschaften, die Sie animieren, und startet das Storyboard.BeginStoryboard distributes the animations to the objects and properties they animate, and starts the storyboard. (Ausführliche Informationen zu diesem Prozess finden Sie unter Übersicht über das Animations-und Zeit Steuerungssystem.) Wenn Sie einen Namen BeginStoryboard angeben, indem Sie die Name zugehörige-Eigenschaft angeben, legen Sie ihn als steuerbares Storyboard fest.(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 ein Storyboard mithilfe interaktiver Methoden der Storyboard -Klasse steuern.In code, you may also control a storyboard using interactive methods of the Storyboard class. Damit eine Storyboard interaktiv im Code erstellt werden kann, müssen Sie die entsprechende Überladung der- Begin Methode des Storyboards verwenden und true angeben, um Sie steuerbar zu machen.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. Weitere Informationen Begin(FrameworkElement, Boolean) finden Sie auf der Seite.See the Begin(FrameworkElement, Boolean) page for more information.

Die folgende Liste zeigt die Methoden, die verwendet werden können, um Storyboard eine nach dem Start zu bearbeiten:The following list shows the methods that can be used to manipulate a Storyboard after it has started:

Der Vorteil der Verwendung dieser Methoden besteht darin, dass Sie keine- Trigger oder TriggerAction -Objekte erstellen müssen. Sie benötigen lediglich einen Verweis Storyboard auf die steuerbare, die 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, die auf Clockeinem ausgeführt werden, und daher Storyboard auch auf einem werden auf dem nächsten Tick der zeitlichen Steuerung durchgeführt, der kurz vor dem nächsten Rendervorgang auftritt.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. Wenn Sie z. b. die Seek -Methode verwenden, um zu einem anderen Punkt in einer Animation zu springen, ändert sich der Eigenschafts Wert nicht sofort. stattdessen ändert sich der Wert beim nächsten Tick der zeitlichen Steuerung.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.

Im folgenden Beispiel wird gezeigt, wie Animationen mithilfe der interaktiven Methoden der Storyboard -Klasse angewendet und gesteuert werden.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 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 verwenden, um Animationen in Styleeinem zu definieren.You can use Storyboard objects to define animations in a Style. Die Animation mit einem Storyboard in einem Style ähnelt der Verwendung eines 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:

  • Sie geben TargetNamekeinen an. der Storyboard verwendet immer das Element, auf das Style das angewendet wird.You don't specify a TargetName; the Storyboard always targets the element to which the Style is applied. Zum Ziel Freezable von Objekten müssen Sie indirekte Zielgruppen verwenden.To target Freezable objects, you must use indirect targeting. Weitere Informationen zur indirekten Ziel Ausrichtung finden Sie im Abschnitt indirekte Zielvorgabe .For more information about indirect targeting, see the Indirect Targeting section.

  • Sie können keine SourceName für einen EventTrigger oder einen Triggerangeben.You can't specify a SourceName for an EventTrigger or a Trigger.

  • Sie können keine dynamischen Ressourcen Verweise oder Daten Bindungs Ausdrücke verwenden, Storyboard um Eigenschaftswerte festzulegen oder zu Animation.You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. Das liegt daran, dass alles Style in einem Thread sicher sein muss, und das Zeit Steuerungs Freeze System muss Storyboard Objekte aufweisen, um Sie Thread sicher 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 eingefroren werden, wenn es oder seine untergeordneten Zeitachsen dynamische Ressourcen Verweise oder Daten Bindungs Ausdrücke enthalten.A Storyboard cannot be frozen if it or its child timelines contain dynamic resource references or data binding expressions. Weitere Informationen zum Einfrieren und anderen Freezable Features finden Sie in der Übersicht überfrei wählbare Objekte.For more information about freezing and other Freezable features, see the Freezable Objects Overview.

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

Ein Beispiel, das zeigt, wie ein Storyboard in einem Stil definiert wird, finden Sie unter 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 verwenden, um Animationen in ControlTemplateeinem zu definieren.You can use Storyboard objects to define animations in a ControlTemplate. Die Animation mit einem Storyboard in einem ControlTemplate ähnelt der Verwendung eines 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:

  • Der TargetName darf nur auf untergeordnete Objekte ControlTemplatevon verweisen.The TargetName may only refer to child objects of the ControlTemplate. Wenn TargetName nicht angegeben wird, ist die Animation das Element, auf das ControlTemplate die angewendet wird.If TargetName is not specified, the animation targets the element to which the ControlTemplate is applied.

  • Der SourceName für einen EventTrigger oder eine Trigger darfnuraufuntergeordneteControlTemplateObjekte von verweisen.The SourceName for an EventTrigger or a Trigger may only refer to child objects of the ControlTemplate.

  • Sie können keine dynamischen Ressourcen Verweise oder Daten Bindungs Ausdrücke verwenden, Storyboard um Eigenschaftswerte festzulegen oder zu Animation.You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. Das liegt daran, dass alles ControlTemplate in einem Thread sicher sein muss, und das Zeit Steuerungs Freeze System muss Storyboard Objekte aufweisen, um Sie Thread sicher zu machen.That's because everything inside a ControlTemplate must be thread-safe, and the timing system must FreezeStoryboard objects to make them thread-safe. Ein Storyboard kann nicht eingefroren werden, wenn es oder seine untergeordneten Zeitachsen dynamische Ressourcen Verweise oder Daten Bindungs Ausdrücke enthalten.A Storyboard cannot be frozen if it or its child timelines contain dynamic resource references or data binding expressions. Weitere Informationen zum Einfrieren und anderen Freezable Features finden Sie in der Übersicht überfrei wählbare Objekte.For more information about freezing and other Freezable features, see the Freezable Objects Overview.

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

Ein Beispiel für die Definition eines Storyboards in einem ControlTemplatefinden Sie im Beispiel Animieren in einer ControlTemplate .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 hierzu finden Sie unter Auslösung einer Animation, wenn sich ein Eigenschafts Wert ändert und in einer ControlTemplate animiertwird.For examples, see Trigger an Animation When a Property Value Changes and Animate in a ControlTemplate.

Durch Eigenschafts Trigger Objekte angewendete Animationen verhalten sich komplexer als EventTrigger Animationen oder Animationen, die Storyboard mithilfe von Methoden gestartet wurden.Animations applied by property Trigger objects behave in a more complex fashion than EventTrigger animations or animations started using Storyboard methods. Sie "Handoff" mit Animationen, die von Trigger anderen Objekten definiert werden, EventTrigger verfassen jedoch mit und durch Methoden ausgelöste Animationen.They "handoff" with animations defined by other Trigger objects, but compose with EventTrigger and method-triggered animations.

Siehe auchSee also