Vue d'ensemble des storyboardsStoryboards Overview

Cette rubrique montre comment utiliser Storyboard objets pour organiser et appliquer des animations.This topic shows how to use Storyboard objects to organize and apply animations. Elle décrit comment manipuler de manière interactive Storyboard objets et décrit la syntaxe de ciblage de propriété indirect.It describes how to interactively manipulate Storyboard objects and describes indirect property targeting syntax.

PrérequisPrerequisites

Pour comprendre cette rubrique, vous devez connaître les différents types d’animations et leurs fonctions de base.To understand this topic, you should be familiar with the different animation types and their basic features. Pour une introduction à l’animation, consultez Vue d’ensemble de l’animation.For an introduction to animation, see the Animation Overview. Vous devez également savoir comment utiliser les propriétés jointes.You should also know how to use attached properties. Pour plus d’informations sur les propriétés jointes, consultez Vue d’ensemble des propriétés jointes.For more information about attached properties, see the Attached Properties Overview.

Qu’est-ce qu’une table de montage séquentiel ?What Is a Storyboard?

Les animations ne sont pas le seul type utile de chronologie.Animations are not the only useful type of timeline. D’autres classes de chronologie sont fournies pour vous aider à organiser des jeux de chronologies et à appliquer des chronologies aux propriétés.Other timeline classes are provided to help you organize sets of timelines, and to apply timelines to properties. Les chronologies de conteneur dérivent le TimelineGroup classe et inclure ParallelTimeline et Storyboard.Container timelines derive from the TimelineGroup class, and include ParallelTimeline and Storyboard.

Un Storyboard est un type de chronologie de conteneur qui fournit des informations de ciblage pour les chronologies qu’il contient.A Storyboard is a type of container timeline that provides targeting information for the timelines it contains. Un Storyboard peut contenir n’importe quel type de Timeline, y compris d’autres animations et chronologies de conteneur.A Storyboard can contain any type of Timeline, including other container timelines and animations. Storyboard objets permettent de combiner des chronologies qui affectent divers objets et propriétés dans une arborescence de chronologie unique, ce qui facilite organiser et contrôler les comportements de minutage complexes.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. Par exemple, supposons que vous souhaitiez disposer d’un bouton qui effectue les trois opérations suivantes.For example, suppose you want a button that does these three things.

  • Développer et changer de couleur lorsque l’utilisateur sélectionne le bouton.Grow and change color when the user selects the button.

  • Réduire puis revenir à la taille normale lorsque l’utilisateur clique dessus.Shrink away and then grow back to its original size when clicked.

  • Réduire et atténuer l’opacité en la définissant sur 50 % lorsque le bouton est désactivé.Shrink and fade to 50 percent opacity when it becomes disabled.

Dans ce cas, vous avez plusieurs jeux d’animations qui s’appliquent au même objet, et vous souhaitez les jouer à différents moments, en fonction de l’état du bouton.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 objets permettent d’organiser les animations et les appliquer dans des groupes à un ou plusieurs objets.Storyboard objects enable you to organize animations and apply them in groups to one or more objects.

Où pouvez-vous utiliser une table de montage séquentiel ?Where Can You Use a Storyboard?

Un Storyboard peut être utilisé pour animer des propriétés de dépendance de classes pouvant être animées (pour plus d’informations sur ce qui permet d’animer une classe, consultez le vue d’ensemble de l’Animation).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). Toutefois, étant donné que la création de plan conceptuel est une fonctionnalité au niveau du framework, l’objet doit appartenir à la NameScope d’un FrameworkElement ou un FrameworkContentElement.However, because storyboarding is a framework-level feature, the object must belong to the NameScope of a FrameworkElement or a FrameworkContentElement.

Par exemple, vous pouvez utiliser un Storyboard pour effectuer les opérations suivantes :For example, you could use a Storyboard to do the following:

Toutefois, vous ne pouvez pas utiliser un Storyboard pour animer un SolidColorBrush qui n’a pas inscrit son nom avec un FrameworkElement ou FrameworkContentElement, ou n’a pas été utilisé pour définir une propriété d’un FrameworkElement ou 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.

Comment appliquer des animations avec une table de montage séquentielHow to Apply Animations with a Storyboard

Pour utiliser un Storyboard pour organiser et appliquer des animations, vous ajoutez les animations comme chronologies enfants de la Storyboard.To use a Storyboard to organize and apply animations, you add the animations as child timelines of the Storyboard. Le Storyboard classe fournit le Storyboard.TargetName et Storyboard.TargetProperty propriétés jointes.The Storyboard class provides the Storyboard.TargetName and Storyboard.TargetProperty attached properties. Vous définissez ces propriétés sur une animation pour spécifier sa propriété et son objet cibles.You set these properties on an animation to specify its target object and property.

Pour appliquer des animations à leurs cibles, vous commencez le Storyboard à l’aide d’une action de déclencheur ou une méthode.To apply animations to their targets, you begin the Storyboard using a trigger action or a method. Dans XAMLXAML, vous utilisez un BeginStoryboard de l’objet avec un EventTrigger, Trigger, ou DataTrigger.In XAMLXAML, you use a BeginStoryboard object with an EventTrigger, Trigger, or DataTrigger. Dans le code, vous pouvez également utiliser le Begin (méthode).In code, you can also use the Begin method.

Le tableau suivant présente les différents emplacements où chaque Storyboard commencer technique est pris en charge : par instance, le style, le modèle de contrôle et le modèle de données.The following table shows the different places where each Storyboard begin technique is supported: per-instance, style, control template, and data template. « Par instance » fait référence à la technique consistant à appliquer une animation ou une table de montage séquentiel directement aux instances d’un objet, plutôt qu’à un style, un modèle de contrôle ou un modèle de données."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.

La table de montage séquentiel démarre à l’aide de…Storyboard is begun using… Par instancePer-instance StyleStyle Modèle de contrôleControl template Modèle de donnéesData template ExempleExample
BeginStoryboard et une EventTriggerBeginStoryboard and an EventTrigger OuiYes OuiYes OuiYes OuiYes Animer une propriété à l’aide d’une table de montage séquentielAnimate a Property by Using a Storyboard
BeginStoryboard et une propriété TriggerBeginStoryboard and a property Trigger NonNo OuiYes OuiYes OuiYes Déclencher une animation en cas de modification d’une valeur de propriétéTrigger an Animation When a Property Value Changes
BeginStoryboard et un DataTriggerBeginStoryboard and a DataTrigger NonNo OuiYes OuiYes OuiYes Guide pratique pour Déclencher une Animation lors de la modification des donnéesHow to: Trigger an Animation When Data Changes
Méthode BeginBegin method OuiYes NonNo NonNo NonNo Animer une propriété à l’aide d’une table de montage séquentielAnimate a Property by Using a Storyboard

L’exemple suivant utilise un Storyboard pour animer la Width d’un Rectangle élément et le Color d’un SolidColorBrush utilisé pour peindre qui 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;
        } 
    }
}

Les sections suivantes décrivent les TargetName et TargetProperty propriétés jointes dans plus de détails.The following sections describe the TargetName and TargetProperty attached properties in more detail.

Ciblage des éléments d’infrastructure, des éléments de contenu d’infrastructure et des éléments FreezablesTargeting Framework Elements, Framework Content Elements, and Freezables

Dans la section précédente, il était mentionné que, pour qu’une animation trouve sa cible, elle devait connaître la propriété et le nom de la cible à animer.The previous section mentioned that, for an animation to find its target, it must know the target's name and the property to animate. En spécifiant la propriété à animer est très simple : il suffit de définir Storyboard.TargetProperty avec le nom de la propriété à animer.Specifying the property to animate is straight forward: simply set Storyboard.TargetProperty with the name of the property to animate. Vous spécifiez le nom de l’objet dont la propriété à animer en définissant le Storyboard.TargetName propriété sur l’animation.You specify the name of the object whose property you want to animate by setting the Storyboard.TargetName property on the animation.

Pour le TargetName propriété fonctionne, l’objet ciblé doit avoir un nom.For the TargetName property to work, the targeted object must have a name. Affectation d’un nom à un FrameworkElement ou un FrameworkContentElement dans XAMLXAML est différente de celle de l’affectation d’un nom à un Freezable objet.Assigning a name to a FrameworkElement or a FrameworkContentElement in XAMLXAML is different than assigning a name to a Freezable object.

Éléments d’infrastructure sont ces classes qui héritent de la FrameworkElement classe.Framework elements are those classes that inherit from the FrameworkElement class. Exemples d’éléments d’infrastructure Window, DockPanel, Button, et Rectangle.Examples of framework elements include Window, DockPanel, Button, and Rectangle. Essentiellement, tous les contrôles, panneaux et fenêtres sont des éléments.Essentially all windows, panels, and controls are elements. Les éléments de contenu de Framework sont les classes qui héritent de la FrameworkContentElement classe.Framework content elements are those classes that inherit from the FrameworkContentElement class. Exemples d’éléments de contenu de framework FlowDocument et Paragraph.Examples of framework content elements include FlowDocument and Paragraph. Si vous ne savez pas si un type est un élément d’infrastructure ou un élément de contenu d’infrastructure, vérifiez s’il possède une propriété Nom.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. Si c’est le cas, il s’agit probablement d’un élément d’infrastructure ou d’un élément de contenu d’infrastructure.If it does, it's probably a framework element or a framework content element. Pour vous en assurer, vérifiez la section Inheritance Hierarchy (Hiérarchie d’héritage) de sa page de type.To be sure, check the Inheritance Hierarchy section of its type page.

Pour activer le ciblage d’un élément d’infrastructure ou un élément de contenu de framework dans XAMLXAML, vous définissez son Name propriété.To enable the targeting of a framework element or a framework content element in XAMLXAML, you set its Name property. Dans le code, vous devez également utiliser le RegisterName méthode pour inscrire le nom de l’élément avec l’élément pour lequel vous avez créé un 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.

L’exemple suivant, extrait à partir de l’exemple précédent, attribue le nom MyRectangle un Rectangle, un type de 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);

Une fois qu’un nom a été assigné, vous pouvez animer une propriété de cet élément.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 les types sont les classes qui héritent de la Freezable classe.Freezable types are those classes that inherit from the Freezable class. Exemples de Freezable incluent SolidColorBrush, RotateTransform, et GradientStop.Examples of Freezable include SolidColorBrush, RotateTransform, and GradientStop.

Pour activer le ciblage d’un Freezable par une animation dans XAMLXAML, vous utilisez le Directive x : Name pour lui attribuer un nom.To enable the targeting of a Freezable by an animation in XAMLXAML, you use the x:Name Directive to assign it a name. Dans le code, vous utilisez le RegisterName méthode pour enregistrer son nom avec l’élément pour lequel vous avez créé un NameScope.In code, you use the RegisterName method to register its name with the element for which you've created a NameScope.

L’exemple suivant assigne un nom à un Freezable objet.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);

L’objet peut ensuite être ciblé par une animation.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 les objets utilisent des portées de nom pour résoudre le TargetName propriété.Storyboard objects use name scopes to resolve the TargetName property. Pour plus d’informations sur les portées de nom WPF, consultez Portées de nom XAML WPF.For more information about WPF name scopes, see WPF XAML Namescopes. Si le TargetName propriété est omise, l’animation cible l’élément sur lequel elle est définie, ou, dans le cas de styles, l’élément de style.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.

Parfois, un nom ne peut pas être affecté à un Freezable objet.Sometimes a name can't be assigned to a Freezable object. Par exemple, si un Freezable est déclaré en tant que ressource ou utilisé pour définir une valeur de propriété dans un style, vous ne pouvez pas lui affecter un nom.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. Comme il n’a pas de nom, il ne peut pas être ciblé directement, mais peut l’être indirectement.Because it doesn't have a name, it can't be targeted directly—but it can be targeted indirectly. Les sections suivantes décrivent comment utiliser le ciblage indirect.The following sections describe how to use indirect targeting.

Ciblage indirectIndirect Targeting

Il est parfois un Freezable ne peut pas être ciblé directement par une animation, par exemple lorsque le Freezable est déclaré en tant que ressource ou utilisé pour définir une valeur de propriété dans un style.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. Dans ce cas, même si vous ne pouvez pas le cibler directement, vous pouvez néanmoins animer le Freezable objet.In these cases, even though you can't target it directly, you can still animate the Freezable object. Au lieu de définir la TargetName propriété portant le nom de la Freezable, vous lui donnez le nom de l’élément auquel le Freezable « appartient ».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." Par exemple, un SolidColorBrush utilisé pour définir le Fill d’un rectangle élément appartient à ce rectangle.For example, a SolidColorBrush used to set the Fill of a rectangle element belongs to that rectangle. Pour animer le pinceau, vous devez définir l’animation TargetProperty avec une chaîne de propriétés qui démarre à la propriété de l’élément d’infrastructure ou d’un élément de contenu de framework la Freezable a été utilisée pour définir et se termine par le Freezable propriété à animer.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);

Notez que, si le Freezable est figé, un clone sera créé, et que ce clone sera animé.Note that, if the Freezable is frozen, a clone will be made, and that clone will be animated. Quand cela se produit, l’objet d’origine HasAnimatedProperties propriété continue à retourner false, car l’objet d’origine n’est pas animé.When this happens, the original object's HasAnimatedProperties property continues to return false, because the original object is not actually animated. Pour plus d’informations sur le clonage, consultez le vue d’ensemble des objets Freezable.For more information about cloning, see the Freezable Objects Overview.

Notez également que, lorsque vous utilisez le ciblage de propriété indirect, il est possible de cibler des objets qui n’existent pas.Also note that, when using indirect property targeting, it's possible to target objects that don't exist. Par exemple, vous pouvez supposer que le Background d’un bouton spécifique a été défini avec un SolidColorBrush et essayer d’animer sa couleur, alors qu’en fait un LinearGradientBrush a été utilisé pour définir l’arrière-plan du bouton.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. Dans ce cas, aucune exception n’est levée ; l’animation ne parvient pas à avoir un effet visible car LinearGradientBrush ne réagit pas aux modifications apportées à la Color propriété.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.

Les sections suivantes décrivent plus en détail la syntaxe de ciblage de propriété indirect.The following sections describe indirect property targeting syntax in more detail.

Ciblage indirect d’une propriété d’un élément Freezable en XAMLIndirectly Targeting a Property of a Freezable in XAML

Pour cibler une propriété d’un freezable en XAMLXAML, utilisez la syntaxe suivante.To target a property of a freezable in XAMLXAML, use the following syntax.

ElementPropertyName . FreezablePropertyNameElementPropertyName . FreezablePropertyName

Where

Le code suivant montre comment animer la Color d’un SolidColorBrush utilisé pour définir leThe following code shows how to animate the Color of a SolidColorBrush used to set the

Fill d’un élément rectangle.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>

Vous devez parfois cibler un élément Freezable contenu dans une collection ou un tableau.Sometimes you need to target a freezable contained in a collection or array.

Pour cibler un élément Freezable contenu dans une collection, vous utilisez la syntaxe de chemin d’accès suivante.To target a freezable contained in a collection, you use the following path syntax.

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

CollectionIndex est l’index de l’objet dans son tableau ou la collection.Where CollectionIndex is the index of the object in its array or collection.

Par exemple, supposons qu’un rectangle a une TransformGroup ressource appliquée à ses RenderTransform propriété et que vous souhaitez animer l’une des transformations qu’il contient.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>

Le code suivant montre comment animer la Angle propriété de la RotateTransform indiqué dans l’exemple précédent.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>  

Ciblage indirect d’une propriété d’un élément Freezable dans le codeIndirectly Targeting a Property of a Freezable in Code

Dans le code, vous créez un PropertyPath objet.In code, you create a PropertyPath object. Lorsque vous créez le PropertyPath, vous spécifiez un Path et PathParameters.When you create the PropertyPath, you specify a Path and PathParameters.

Pour créer PathParameters, vous créez un tableau de type DependencyProperty qui contient une liste de champs d’identificateur de propriété de dépendance.To create PathParameters, you create an array of type DependencyProperty that contains a list of dependency property identifier fields. Le premier champ d’identificateur est pour la propriété de la FrameworkElement ou FrameworkContentElement qui le Freezable sert à définir.The first identifier field is for the property of the FrameworkElement or FrameworkContentElement that the Freezable is used to set. Le champ d’identificateur suivant représente la propriété de la Freezable à la cible.The next identifier field represents the property of the Freezable to target. Considérez-la comme une chaîne de propriétés qui connecte le Freezable à la FrameworkElement objet.Think of it as a chain of properties that connects the Freezable to the FrameworkElement object.

Voici un exemple d’une chaîne de propriété de dépendance qui cible le Color d’un SolidColorBrush utilisé pour définir le Fill d’un élément rectangle.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};

Vous devez également spécifier un Path.You also need to specify a Path. Un Path est un String qui indique le Path comment interpréter ses PathParameters.A Path is a String that tells the Path how to interpret its PathParameters. Il utilise la syntaxe suivante.It uses the following syntax.

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

Where

  • OwnerPropertyArrayIndex est l’index de la DependencyProperty tableau qui contient l’identificateur de la FrameworkElement propriété de l’objet qui le Freezable sert à définir, etOwnerPropertyArrayIndex 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 est l’index de le DependencyProperty tableau qui contient l’identificateur de propriété à cibler.FreezablePropertyArrayIndex is the index of the DependencyProperty array that contains the identifier of property to target.

L’exemple suivant montre le Path qui devrait accompagner le PathParameters défini dans l’exemple précédent.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)";

L’exemple suivant combine le code dans les exemples précédents pour animer le Color d’un SolidColorBrush utilisé pour définir le Fill d’un élément rectangle.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);

Vous devez parfois cibler un élément Freezable contenu dans une collection ou un tableau.Sometimes you need to target a freezable contained in a collection or array. Par exemple, supposons qu’un rectangle a une TransformGroup ressource appliquée à ses RenderTransform propriété et que vous souhaitez animer l’une des transformations qu’il contient.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>  

Pour cibler un Freezable contenues dans une collection, vous utilisez la syntaxe de chemin d’accès suivante.To target a Freezable contained in a collection, you use the following path syntax.

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

CollectionIndex est l’index de l’objet dans son tableau ou la collection.Where CollectionIndex is the index of the object in its array or collection.

Pour cibler le Angle propriété de la RotateTransform, la deuxième transformation dans le TransformGroup, vous utilisez ce qui suit Path et 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);

L’exemple suivant montre le code complet pour animer la Angle d’un RotateTransform contenus dans un 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);

Ciblage indirect avec un élément Freezable comme point de départIndirectly Targeting with a Freezable as the Starting Point

Les sections précédentes décrivaient comment cibler indirectement un Freezable en commençant par un FrameworkElement ou FrameworkContentElement et la création d’une chaîne de propriété pour un Freezable sous-propriété.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. Vous pouvez également utiliser un Freezable commencer à point et cibler indirectement l’une de ses Freezable sous-propriétés.You can also use a Freezable as a starting point and indirectly target one of its Freezable sub-properties. Une restriction supplémentaire s’applique lorsque vous utilisez un Freezable comme point de départ pour le ciblage indirect : le démarrage Freezable et chaque Freezable entre lui et la sous-propriété ciblée indirectement ne doivent pas être figés.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.

Contrôle interactif d’une table de montage séquentiel en XAMLInteractively Controlling a Storyboard in XAML

Pour démarrer un storyboard langage XAML (eXtensible Application Markup Language)Extensible Application Markup Language (XAML), vous utilisez un BeginStoryboard déclencher l’action.To start a storyboard in langage XAML (eXtensible Application Markup Language)Extensible Application Markup Language (XAML), you use a BeginStoryboard trigger action. BeginStoryboard distribue les animations aux objets et aux propriétés qu’ils animent et démarre le storyboard.BeginStoryboard distributes the animations to the objects and properties they animate, and starts the storyboard. (Pour plus d’informations sur ce processus, consultez le Animation et vue d’ensemble du système de minutage.) Si vous donnez le BeginStoryboard un nom en spécifiant son Name propriété, vous rendiez une table de montage séquentiel contrôlable.(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. Vous pouvez ensuite contrôler interactivement la table de montage séquentiel après son démarrage.You can then interactively control the storyboard after it's started. Vous trouverez ci-dessous une liste d’actions de table de montage séquentiel contrôlable à utiliser avec des déclencheurs d’événements pour contrôler une table de montage séquentiel.The following is a list of controllable storyboard actions that you use with event triggers to control a storyboard.

Dans l’exemple suivant, les actions de table de montage séquentiel contrôlable servent à contrôler interactivement une table de montage séquentiel.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>

Contrôle interactif d’une table de montage séquentiel avec du codeInteractively Controlling a Storyboard by Using Code

Les exemples précédents ont montré comment animer à l’aide d’actions de déclencheur.The previous examples have shown how to animate using trigger actions. Dans le code, vous pouvez également contrôler un storyboard à l’aide des méthodes interactives de la Storyboard classe.In code, you may also control a storyboard using interactive methods of the Storyboard class. Pour un Storyboard afin d’être interactif dans le code, vous devez utiliser la surcharge appropriée de la table de montage séquentiel Begin (méthode) et spécifiez true pour qu’elle soit contrôlable.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. Consultez le Begin(FrameworkElement, Boolean) page pour plus d’informations.See the Begin(FrameworkElement, Boolean) page for more information.

La liste suivante présente les méthodes qui peuvent être utilisées pour manipuler un Storyboard après son démarrage :The following list shows the methods that can be used to manipulate a Storyboard after it has started:

L’avantage d’utiliser ces méthodes est que vous n’avez pas besoin de créer Trigger ou TriggerAction objets ; vous devez simplement une référence à la contrôlable Storyboard vous voulez manipuler.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.

Remarque : Toutes les actions interactives effectuées sur un Clocket par conséquent également sur un Storyboard aura lieu au prochain cycle de moteur de minutage qui aura lieu peu avant le rendu suivant.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. Par exemple, si vous utilisez le Seek méthode pour accéder à un autre point dans une animation, la valeur de propriété ne change pas instantanément, au lieu de cela, la valeur est modifiée au prochain cycle de minutage.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.

L’exemple suivant montre comment appliquer et contrôler des animations à l’aide des méthodes interactives de la Storyboard classe.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

Animer dans un styleAnimate in a Style

Vous pouvez utiliser Storyboard objets pour définir des animations dans un Style.You can use Storyboard objects to define animations in a Style. Animer avec un Storyboard dans un Style revient à utiliser un Storyboard ailleurs, avec les trois exceptions suivantes :Animating with a Storyboard in a Style is similar to using a Storyboard elsewhere, with the following three exceptions:

  • Vous ne spécifiez pas un TargetName; le Storyboard cible toujours l’élément auquel le Style est appliqué.You don't specify a TargetName; the Storyboard always targets the element to which the Style is applied. Pour cibler Freezable objets, vous devez utiliser le ciblage indirect.To target Freezable objects, you must use indirect targeting. Pour plus d’informations sur le ciblage indirect, consultez la ciblage Indirect section.For more information about indirect targeting, see the Indirect Targeting section.

  • Vous ne pouvez pas spécifier un SourceName pour un EventTrigger ou un Trigger.You can't specify a SourceName for an EventTrigger or a Trigger.

  • Vous ne pouvez pas utiliser des expressions de liaison de données ou des références de ressources dynamiques pour définir Storyboard ou valeurs de propriété d’animation.You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. C’est parce que tous les éléments à l’intérieur d’un Style doit être thread-safe, et le système de minutage doit Freeze Storyboard objets afin de les rendre thread-safe.That's because everything inside a Style must be thread-safe, and the timing system must FreezeStoryboard objects to make them thread-safe. Un Storyboard ne peut pas être figé si lui ou ses chronologies enfants contiennent des expressions de liaison de données ou des références de ressource dynamique.A Storyboard cannot be frozen if it or its child timelines contain dynamic resource references or data binding expressions. Pour plus d’informations sur le blocage et d’autres Freezable fonctionnalités, consultez le vue d’ensemble des objets Freezable.For more information about freezing and other Freezable features, see the Freezable Objects Overview.

  • Dans XAMLXAML, vous ne pouvez pas déclarer les gestionnaires d’événements pour Storyboard ou des événements de l’animation.In XAMLXAML, you can't declare event handlers for Storyboard or animation events.

Pour obtenir un exemple montrant comment définir une table de montage séquentiel dans un style, consultez la animer dans un Style exemple.For an example showing how to define a storyboard in a style, see the Animate in a Style example.

Effectuer une animation dans un ControlTemplateAnimate in a ControlTemplate

Vous pouvez utiliser Storyboard objets pour définir des animations dans un ControlTemplate.You can use Storyboard objects to define animations in a ControlTemplate. Animer avec un Storyboard dans un ControlTemplate revient à utiliser un Storyboard ailleurs, avec les deux exceptions suivantes :Animating with a Storyboard in a ControlTemplate is similar to using a Storyboard elsewhere, with the following two exceptions:

  • Le TargetName peut uniquement faire référence aux objets enfants de le ControlTemplate.The TargetName may only refer to child objects of the ControlTemplate. Si TargetName n’est pas spécifié, l’animation cible l’élément auquel le ControlTemplate est appliqué.If TargetName is not specified, the animation targets the element to which the ControlTemplate is applied.

  • Le SourceName pour un EventTrigger ou un Trigger peut uniquement faire référence aux objets enfants de le ControlTemplate.The SourceName for an EventTrigger or a Trigger may only refer to child objects of the ControlTemplate.

  • Vous ne pouvez pas utiliser des expressions de liaison de données ou des références de ressources dynamiques pour définir Storyboard ou valeurs de propriété d’animation.You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. C’est parce que tous les éléments à l’intérieur d’un ControlTemplate doit être thread-safe, et le système de minutage doit Freeze Storyboard objets afin de les rendre thread-safe.That's because everything inside a ControlTemplate must be thread-safe, and the timing system must FreezeStoryboard objects to make them thread-safe. Un Storyboard ne peut pas être figé si lui ou ses chronologies enfants contiennent des expressions de liaison de données ou des références de ressource dynamique.A Storyboard cannot be frozen if it or its child timelines contain dynamic resource references or data binding expressions. Pour plus d’informations sur le blocage et d’autres Freezable fonctionnalités, consultez le vue d’ensemble des objets Freezable.For more information about freezing and other Freezable features, see the Freezable Objects Overview.

  • Dans XAMLXAML, vous ne pouvez pas déclarer les gestionnaires d’événements pour Storyboard ou des événements de l’animation.In XAMLXAML, you can't declare event handlers for Storyboard or animation events.

Pour obtenir un exemple montrant comment définir une table de montage séquentiel dans un ControlTemplate, consultez le animer dans un ControlTemplate exemple.For an example showing how to define a storyboard in a ControlTemplate, see the Animate in a ControlTemplate example.

Animer en cas de modification d’une valeur de propriétéAnimate When a Property Value Changes

Dans les styles et les modèles de contrôle, vous pouvez utiliser des objets Trigger pour démarrer une table de montage séquentiel en cas de modification d’une propriété.In styles and control templates, you can use Trigger objects to start a storyboard when a property changes. Pour obtenir des exemples, consultez déclencher une Animation quand une valeur de propriété change et animer dans un ControlTemplate.For examples, see Trigger an Animation When a Property Value Changes and Animate in a ControlTemplate.

Les animations appliquées par la propriété Trigger objets se comportent de façon plus complexe que EventTrigger animations ou les animations démarrées à l’aide de Storyboard méthodes.Animations applied by property Trigger objects behave in a more complex fashion than EventTrigger animations or animations started using Storyboard methods. Elles « effectuent un transfert » avec des animations défini par d’autres Trigger objets, mais composent avec EventTrigger et animations déclenchées à la méthode.They "handoff" with animations defined by other Trigger objects, but compose with EventTrigger and method-triggered animations.

Voir aussiSee also