Visão geral de storyboardsStoryboards Overview

Este tópico mostra como usar Storyboard objetos para organizar e aplicar animações.This topic shows how to use Storyboard objects to organize and apply animations. Ele descreve como manipular interativamente Storyboard objetos e descreve a sintaxe de direcionamento de propriedade indireta.It describes how to interactively manipulate Storyboard objects and describes indirect property targeting syntax.

{1>{2>Pré-requisitos<2}<1}Prerequisites

Para entender esse tópico, você deve estar familiarizado com os diferentes tipos de animação e seus recursos básicos.To understand this topic, you should be familiar with the different animation types and their basic features. Para obter uma introdução à animação, consulte a Visão geral da animação.For an introduction to animation, see the Animation Overview. Você também deve saber usar propriedades anexadas.You should also know how to use attached properties. Para obter mais informações sobre as propriedades anexadas, consulte Visão geral das propriedades anexadas.For more information about attached properties, see the Attached Properties Overview.

O que é um storyboard?What Is a Storyboard?

Animações não são o único tipo útil de linha do tempo.Animations are not the only useful type of timeline. Outras classes de linha do tempo são fornecidas para ajudá-lo a organizar conjuntos de linhas do tempo e aplicar linhas do tempo a propriedades.Other timeline classes are provided to help you organize sets of timelines, and to apply timelines to properties. As linhas do tempo do contêiner derivam da classe TimelineGroup e incluem ParallelTimeline e Storyboard.Container timelines derive from the TimelineGroup class, and include ParallelTimeline and Storyboard.

Um Storyboard é um tipo de linha do tempo de contêiner que fornece informações de destino para os cronogramas que ele contém.A Storyboard is a type of container timeline that provides targeting information for the timelines it contains. Um storyboard pode conter qualquer tipo de Timeline, incluindo outras linhas do tempo e animações de contêiner.A Storyboard can contain any type of Timeline, including other container timelines and animations. os objetos Storyboard permitem que você combine linhas do tempo que afetam uma variedade de objetos e propriedades em uma única árvore de linha cronológica, facilitando a organização e o controle de comportamentos de tempo complexos.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. Por exemplo, suponha que você deseje que um botão faça estas três coisas.For example, suppose you want a button that does these three things.

  • Aumenta e muda de cor quando o usuário o seleciona.Grow and change color when the user selects the button.

  • Diminui e, em seguida, aumenta novamente para seu tamanho original quando recebe um clique.Shrink away and then grow back to its original size when clicked.

  • Diminui e esmaece até uma opacidade de 50% quando é desabilitado.Shrink and fade to 50 percent opacity when it becomes disabled.

Nesse caso, você tem vários conjuntos de animações que se aplicam ao mesmo objeto e deseja que eles sejam reproduzidos em tempos diferentes, dependentes do estado do botão.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 objetos permitem organizar as animações e aplicá-las em grupos a um ou mais objetos.Storyboard objects enable you to organize animations and apply them in groups to one or more objects.

Onde você pode usar um storyboard?Where Can You Use a Storyboard?

Um Storyboard pode ser usado para animar propriedades de dependência de classes animáveis (para obter mais informações sobre o que torna uma classe animável, consulte a visão geral da animação).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). No entanto, como o Storyboarding é um recurso de nível de estrutura, o objeto deve pertencer à NameScope de um FrameworkElement ou um FrameworkContentElement.However, because storyboarding is a framework-level feature, the object must belong to the NameScope of a FrameworkElement or a FrameworkContentElement.

Por exemplo, você pode usar um Storyboard para fazer o seguinte:For example, you could use a Storyboard to do the following:

No entanto, você não pode usar um Storyboard para animar um SolidColorBrush que não registrou seu nome com um FrameworkElement ou FrameworkContentElement, ou não foi usado para definir uma propriedade de um 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.

Como aplicar animações com um storyboardHow to Apply Animations with a Storyboard

Para usar um Storyboard para organizar e aplicar animações, você adiciona as animações como cronogramas filho do Storyboard.To use a Storyboard to organize and apply animations, you add the animations as child timelines of the Storyboard. A classe Storyboard fornece as propriedades Storyboard.TargetName e Storyboard.TargetProperty anexadas.The Storyboard class provides the Storyboard.TargetName and Storyboard.TargetProperty attached properties. Você pode definir essas propriedades em uma animação para especificar seu objeto de destino e sua propriedade.You set these properties on an animation to specify its target object and property.

Para aplicar animações a seus destinos, você começa a Storyboard usando uma ação de gatilho ou um método.To apply animations to their targets, you begin the Storyboard using a trigger action or a method. No XAMLXAML, você usa um objeto BeginStoryboard com um EventTrigger, Triggerou DataTrigger.In XAMLXAML, you use a BeginStoryboard object with an EventTrigger, Trigger, or DataTrigger. No código, você também pode usar o método Begin.In code, you can also use the Begin method.

A tabela a seguir mostra os diferentes locais em que há suporte para cada técnica de início de Storyboard: por instância, estilo, modelo de controle e modelo de dados.The following table shows the different places where each Storyboard begin technique is supported: per-instance, style, control template, and data template. "Por instância" se refere à técnica de aplicar uma animação ou storyboard diretamente às instâncias de um objeto, em vez de um estilo, modelo de controle ou modelo de dados."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.

O storyboard é iniciado usando…Storyboard is begun using… Por instânciaPer-instance EstiloStyle Modelo de controleControl template Modelo de dadosData template ExemploExample
BeginStoryboard e um EventTriggerBeginStoryboard and an EventTrigger SimYes SimYes SimYes SimYes Animar uma propriedade usando um storyboardAnimate a Property by Using a Storyboard
BeginStoryboard e uma propriedade TriggerBeginStoryboard and a property Trigger NãoNo SimYes SimYes SimYes Disparar uma animação quando o valor de uma propriedade é alteradoTrigger an Animation When a Property Value Changes
BeginStoryboard e um DataTriggerBeginStoryboard and a DataTrigger NãoNo SimYes SimYes SimYes Como disparar uma animação quando dados são alteradosHow to: Trigger an Animation When Data Changes
Método BeginBegin method SimYes NãoNo NãoNo NãoNo Animar uma propriedade usando um storyboardAnimate a Property by Using a Storyboard

O exemplo a seguir usa um Storyboard para animar a Width de um elemento Rectangle e a Color de um SolidColorBrush usado para pintar esse 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;
        } 
    }
}

As seções a seguir descrevem as propriedades TargetName e TargetProperty anexadas mais detalhadamente.The following sections describe the TargetName and TargetProperty attached properties in more detail.

Definindo como destino elementos de estrutura, elementos de conteúdo de estrutura e congeláveisTargeting Framework Elements, Framework Content Elements, and Freezables

Na seção anterior, mencionamos que, para uma animação encontrar seu destino, ela deve saber o nome do destino e a propriedade a ser animada.The previous section mentioned that, for an animation to find its target, it must know the target's name and the property to animate. A especificação da propriedade para animar é direta: basta definir Storyboard.TargetProperty com o nome da propriedade a ser animada.Specifying the property to animate is straight forward: simply set Storyboard.TargetProperty with the name of the property to animate. Especifique o nome do objeto cuja propriedade você deseja animar definindo a propriedade Storyboard.TargetName na animação.You specify the name of the object whose property you want to animate by setting the Storyboard.TargetName property on the animation.

Para que a propriedade TargetName funcione, o objeto de destino deve ter um nome.For the TargetName property to work, the targeted object must have a name. Atribuir um nome a um FrameworkElement ou a um FrameworkContentElement em XAMLXAML é diferente de atribuir um nome a um objeto Freezable.Assigning a name to a FrameworkElement or a FrameworkContentElement in XAMLXAML is different than assigning a name to a Freezable object.

Os elementos da estrutura são as classes que herdam da classe FrameworkElement.Framework elements are those classes that inherit from the FrameworkElement class. Exemplos de elementos de estrutura incluem Window, DockPanel, Buttone Rectangle.Examples of framework elements include Window, DockPanel, Button, and Rectangle. Basicamente, todas as janelas, todos os painéis e todos os controles são elementos.Essentially all windows, panels, and controls are elements. Elementos de conteúdo da estrutura são as classes que herdam da classe FrameworkContentElement.Framework content elements are those classes that inherit from the FrameworkContentElement class. Exemplos de elementos de conteúdo de estrutura incluem FlowDocument e Paragraph.Examples of framework content elements include FlowDocument and Paragraph. Se você não tiver certeza se um tipo é um elemento de estrutura ou um elemento de conteúdo de estrutura, verifique se ele tem uma propriedade Name.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. Se isso acontecer, provavelmente, ele será um elemento de estrutura ou um elemento de conteúdo de estrutura.If it does, it's probably a framework element or a framework content element. Para ter certeza, confira a seção Hierarquia de herança da página de seu tipo.To be sure, check the Inheritance Hierarchy section of its type page.

Para habilitar o direcionamento de um elemento de estrutura ou um elemento de conteúdo de estrutura em XAMLXAML, defina sua propriedade Name.To enable the targeting of a framework element or a framework content element in XAMLXAML, you set its Name property. No código, você também precisa usar o método RegisterName para registrar o nome do elemento com o elemento para o qual você criou uma 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.

O exemplo a seguir, extraído do exemplo anterior, atribui o nome MyRectangle um Rectangle, um tipo 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);

Depois que ele tiver um nome, você poderá animar uma propriedade desse elemento.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));

os tipos de Freezable são as classes que herdam da classe Freezable.Freezable types are those classes that inherit from the Freezable class. Exemplos de Freezable incluem SolidColorBrush, RotateTransforme GradientStop.Examples of Freezable include SolidColorBrush, RotateTransform, and GradientStop.

Para habilitar o direcionamento de um Freezable por uma animação no XAMLXAML, use a diretiva x:Name para atribuir um nome a ele.To enable the targeting of a Freezable by an animation in XAMLXAML, you use the x:Name Directive to assign it a name. No código, você usa o método RegisterName para registrar seu nome com o elemento para o qual você criou uma NameScope.In code, you use the RegisterName method to register its name with the element for which you've created a NameScope.

O exemplo a seguir atribui um nome a um objeto Freezable.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);

Em seguida, o objeto pode ser o destino de uma animação.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 objetos usam escopos de nome para resolver a propriedade TargetName.Storyboard objects use name scopes to resolve the TargetName property. Para obter mais informações sobre escopos de nome no WPF, consulte Escopos de nome XAML no WPF.For more information about WPF name scopes, see WPF XAML Namescopes. Se a propriedade TargetName for omitida, a animação visará o elemento no qual ele está definido ou, no caso de estilos, o elemento com estilo.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.

Às vezes, um nome não pode ser atribuído a um objeto Freezable.Sometimes a name can't be assigned to a Freezable object. Por exemplo, se um Freezable for declarado como um recurso ou usado para definir um valor de propriedade em um estilo, ele não poderá receber um nome.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. Como ele não tem um nome, ele não pode ser definido como destino diretamente – mas ele pode ser definido como destino indiretamente.Because it doesn't have a name, it can't be targeted directly—but it can be targeted indirectly. As próximas seções descrevem como usar o direcionamento indireto.The following sections describe how to use indirect targeting.

Direcionamento indiretoIndirect Targeting

Há ocasiões em que uma Freezable não pode ser direcionada diretamente por uma animação, como quando a Freezable é declarada como um recurso ou usada para definir um valor de propriedade em um estilo.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. Nesses casos, embora não seja possível direcioná-lo diretamente, você ainda pode animar o objeto Freezable.In these cases, even though you can't target it directly, you can still animate the Freezable object. Em vez de definir a propriedade TargetName com o nome da Freezable, você concede a ela o nome do elemento ao qual o Freezable "pertence".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." Por exemplo, um SolidColorBrush usado para definir o Fill de um elemento Rectangle pertence a esse retângulo.For example, a SolidColorBrush used to set the Fill of a rectangle element belongs to that rectangle. Para animar o pincel, você definiria a TargetProperty da animação com uma cadeia de propriedades que começa na Propriedade do elemento de estrutura ou no elemento de conteúdo da estrutura, a Freezable foi usada para definir e terminar com a propriedade Freezable para animar.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);

Observe que, se a Freezable estiver congelada, um clone será feito e esse clone será animado.Note that, if the Freezable is frozen, a clone will be made, and that clone will be animated. Quando isso acontece, a propriedade HasAnimatedProperties do objeto original continua a retornar false, porque o objeto original não é realmente animado.When this happens, the original object's HasAnimatedProperties property continues to return false, because the original object is not actually animated. Para obter mais informações sobre a clonagem, consulte a visão geral dos objetos Freezable.For more information about cloning, see the Freezable Objects Overview.

Observe também que, ao usar o direcionamento indireto de propriedade, é possível definir como destino objetos inexistentes.Also note that, when using indirect property targeting, it's possible to target objects that don't exist. Por exemplo, você pode pressupor que a Background de um botão específico foi definida com um SolidColorBrush e tentar animar sua cor, quando, na verdade, uma LinearGradientBrush foi usada para definir o plano de fundo do botão.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. Nesses casos, nenhuma exceção é lançada; a animação não tem um efeito visível porque LinearGradientBrush não reage às alterações na propriedade Color.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.

As próximas seções descrevem a sintaxe de direcionamento indireto de propriedade mais detalhadamente.The following sections describe indirect property targeting syntax in more detail.

Definindo indiretamente como destino uma propriedade de um congelável em XAMLIndirectly Targeting a Property of a Freezable in XAML

Para direcionar uma propriedade de um Freezable em XAMLXAML, use a sintaxe a seguir.To target a property of a freezable in XAMLXAML, use the following syntax.

ElementPropertyName . FreezablePropertyNameElementPropertyName . FreezablePropertyName

OndeWhere

O código a seguir mostra como animar a Color de um SolidColorBrush usado para definir a Fill de um elemento Rectangle.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>

Às vezes, você precisa ter como destino um congelável contido em uma coleção ou matriz.Sometimes you need to target a freezable contained in a collection or array.

Para definir um congelável como destino contido em uma coleção, use a sintaxe de caminho a seguir.To target a freezable contained in a collection, you use the following path syntax.

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

Em que CollectionIndex é o índice do objeto em sua matriz ou coleção.Where CollectionIndex is the index of the object in its array or collection.

Por exemplo, suponha que um retângulo tenha um recurso de TransformGroup aplicado à sua propriedade RenderTransform e que você queira animar uma das transformações que ele contém.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>

O código a seguir mostra como animar a propriedade Angle do RotateTransform mostrado no exemplo anterior.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>  

Definindo indiretamente como destino uma propriedade de um congelável no códigoIndirectly Targeting a Property of a Freezable in Code

No código, você cria um objeto PropertyPath.In code, you create a PropertyPath object. Ao criar o PropertyPath, você especifica um Path e PathParameters.When you create the PropertyPath, you specify a Path and PathParameters.

Para criar PathParameters, você cria uma matriz do tipo DependencyProperty que contém uma lista de campos de identificador de propriedade de dependência.To create PathParameters, you create an array of type DependencyProperty that contains a list of dependency property identifier fields. O primeiro campo identificador é para a propriedade do FrameworkElement ou FrameworkContentElement que o Freezable é usado para definir.The first identifier field is for the property of the FrameworkElement or FrameworkContentElement that the Freezable is used to set. O campo próximo identificador representa a propriedade do Freezable para o destino.The next identifier field represents the property of the Freezable to target. Imagine-o como uma cadeia de propriedades que conecta o Freezable ao objeto FrameworkElement.Think of it as a chain of properties that connects the Freezable to the FrameworkElement object.

Veja a seguir um exemplo de uma cadeia de propriedades de dependência que tem como alvo a Color de um SolidColorBrush usado para definir o Fill de um elemento 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};

Você também precisa especificar um Path.You also need to specify a Path. Uma Path é uma String que informa ao Path como interpretar seu PathParameters.A Path is a String that tells the Path how to interpret its PathParameters. Ele usa a sintaxe a seguir.It uses the following syntax.

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

OndeWhere

  • OwnerPropertyArrayIndex é o índice da matriz de DependencyProperty que contém o identificador da Propriedade do objeto FrameworkElement que o Freezable é usado para definir eOwnerPropertyArrayIndex 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 é o índice da matriz de DependencyProperty que contém o identificador da propriedade a ser direcionada.FreezablePropertyArrayIndex is the index of the DependencyProperty array that contains the identifier of property to target.

O exemplo a seguir mostra o Path que acompanharia o PathParameters definido no exemplo anterior.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)";

O exemplo a seguir combina o código nos exemplos anteriores para animar a Color de um SolidColorBrush usado para definir o Fill de um elemento 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);

Às vezes, você precisa ter como destino um congelável contido em uma coleção ou matriz.Sometimes you need to target a freezable contained in a collection or array. Por exemplo, suponha que um retângulo tenha um recurso de TransformGroup aplicado à sua propriedade RenderTransform e que você queira animar uma das transformações que ele contém.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>  

Para direcionar uma Freezable contida em uma coleção, use a seguinte sintaxe de caminho.To target a Freezable contained in a collection, you use the following path syntax.

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

Em que CollectionIndex é o índice do objeto em sua matriz ou coleção.Where CollectionIndex is the index of the object in its array or collection.

Para direcionar a propriedade Angle da RotateTransform, a segunda transformação na TransformGroup, você usaria as seguintes Path e 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);

O exemplo a seguir mostra o código completo para animar a Angle de um RotateTransform contido em uma 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);

Definindo indiretamente como destino um congelável como o ponto de partidaIndirectly Targeting with a Freezable as the Starting Point

As seções anteriores descreveram como direcionar indiretamente um Freezable iniciando com um FrameworkElement ou FrameworkContentElement e criando uma cadeia de propriedades para uma subpropriedade Freezable.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. Você também pode usar uma Freezable como um ponto de partida e direcionar indiretamente uma de suas subpropriedades Freezable.You can also use a Freezable as a starting point and indirectly target one of its Freezable sub-properties. Uma restrição adicional se aplica ao usar um Freezable como ponto de partida para direcionamento indireto: o Freezable inicial e cada Freezable entre ele e a subpropriedade de destino indiretamente não deve ser congelada.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.

Controlando um storyboard de forma interativa no XAMLInteractively Controlling a Storyboard in XAML

Para iniciar um storyboard em XAML (linguagem XAML)Extensible Application Markup Language (XAML), você usa uma ação de gatilho BeginStoryboard.To start a storyboard in XAML (linguagem XAML)Extensible Application Markup Language (XAML), you use a BeginStoryboard trigger action. BeginStoryboard distribui as animações para os objetos e as propriedades que eles animam e inicia o storyboard.BeginStoryboard distributes the animations to the objects and properties they animate, and starts the storyboard. (Para obter detalhes sobre esse processo, consulte a visão geral da animação e do sistema de tempo.) Se você fornecer o BeginStoryboard um nome especificando sua propriedade Name, você o tornará um storyboard controlável.(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. Você poderá então controlar o storyboard de forma interativa depois que ele for iniciado.You can then interactively control the storyboard after it's started. Veja a seguir uma lista de ações de storyboard controlável usadas com gatilhos de evento para controlar um storyboard.The following is a list of controllable storyboard actions that you use with event triggers to control a storyboard.

No exemplo a seguir, as ações de storyboard controlável são usadas para controlar um storyboard de forma interativa.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>

Controlando um storyboard de forma interativa usando um códigoInteractively Controlling a Storyboard by Using Code

Os exemplos anteriores mostraram como animar usando ações de gatilho.The previous examples have shown how to animate using trigger actions. No código, você também pode controlar um storyboard usando métodos interativos da classe Storyboard.In code, you may also control a storyboard using interactive methods of the Storyboard class. Para que um Storyboard se torne interativo no código, você deve usar a sobrecarga apropriada do método Begin do storyboard e especificar true para torná-lo controlável.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. Consulte a página Begin(FrameworkElement, Boolean) para obter mais informações.See the Begin(FrameworkElement, Boolean) page for more information.

A lista a seguir mostra os métodos que podem ser usados para manipular um Storyboard depois de iniciado:The following list shows the methods that can be used to manipulate a Storyboard after it has started:

A vantagem de usar esses métodos é que você não precisa criar objetos Trigger ou TriggerAction; Você só precisa de uma referência ao Storyboard controlável que deseja manipular.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.

Observação

Todas as ações interativas executadas em um Clocke, portanto, também em um Storyboard ocorrerão no próximo tique do mecanismo de tempo que ocorrerá logo antes da próxima renderização.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. Por exemplo, se você usar o método Seek para saltar para outro ponto em uma animação, o valor da propriedade não será alterado instantaneamente, em vez disso, o valor será alterado no próximo tique do mecanismo de tempo.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.

O exemplo a seguir mostra como aplicar e controlar animações usando os métodos interativos da classe Storyboard.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

Animar em um estiloAnimate in a Style

Você pode usar Storyboard objetos para definir animações em um Style.You can use Storyboard objects to define animations in a Style. A animação com um Storyboard em uma Style é semelhante ao uso de um Storyboard em outro lugar, com as três seguintes exceções:Animating with a Storyboard in a Style is similar to using a Storyboard elsewhere, with the following three exceptions:

  • Você não especifica um TargetName; o Storyboard sempre tem como alvo o elemento ao qual o Style é aplicado.You don't specify a TargetName; the Storyboard always targets the element to which the Style is applied. Para direcionar os objetos de Freezable, você deve usar o direcionamento indireto.To target Freezable objects, you must use indirect targeting. Para obter mais informações sobre direcionamento indireto, consulte a seção direcionamento indireto .For more information about indirect targeting, see the Indirect Targeting section.

  • Você não pode especificar um SourceName para um EventTrigger ou um Trigger.You can't specify a SourceName for an EventTrigger or a Trigger.

  • Você não pode usar referências de recursos dinâmicos ou expressões de associação de dados para definir Storyboard ou valores de propriedade de animação.You can't use dynamic resource references or data binding expressions to set Storyboard or animation property values. Isso ocorre porque tudo dentro de um Style deve ser thread-safe e o sistema de tempo deve FreezeStoryboard objetos para torná-los 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. Um Storyboard não pode ser congelado se ele ou suas linhas do tempo filho contêm referências de recursos dinâmicos ou expressões de associação de dados.A Storyboard cannot be frozen if it or its child timelines contain dynamic resource references or data binding expressions. Para obter mais informações sobre como congelar e outros recursos Freezable, consulte a visão geral dos objetos Freezable.For more information about freezing and other Freezable features, see the Freezable Objects Overview.

  • No XAMLXAML, você não pode declarar manipuladores de eventos para Storyboard ou eventos de animação.In XAMLXAML, you can't declare event handlers for Storyboard or animation events.

Para obter um exemplo que mostra como definir um storyboard em um estilo, consulte o exemplo de animar em um estilo .For an example showing how to define a storyboard in a style, see the Animate in a Style example.

Animar em um ControlTemplateAnimate in a ControlTemplate

Você pode usar Storyboard objetos para definir animações em um ControlTemplate.You can use Storyboard objects to define animations in a ControlTemplate. A animação com um Storyboard em uma ControlTemplate é semelhante ao uso de um Storyboard em outro lugar, com as duas exceções a seguir:Animating with a Storyboard in a ControlTemplate is similar to using a Storyboard elsewhere, with the following two exceptions:

Para obter um exemplo que mostra como definir um storyboard em um ControlTemplate, consulte o exemplo de animar em um ControlTemplate .For an example showing how to define a storyboard in a ControlTemplate, see the Animate in a ControlTemplate example.

Animar quando um valor da propriedade é alteradoAnimate When a Property Value Changes

Em estilos e modelos de controle, você pode usar objetos Trigger para iniciar um storyboard quando uma propriedade é alterada.In styles and control templates, you can use Trigger objects to start a storyboard when a property changes. Para obter exemplos, consulte disparar uma animação quando um valor de propriedade for alterado e animar em um ControlTemplate.For examples, see Trigger an Animation When a Property Value Changes and Animate in a ControlTemplate.

As animações aplicadas pelos objetos de Trigger de propriedades se comportam de maneira mais complexa do que EventTrigger animações ou animações iniciadas usando métodos Storyboard.Animations applied by property Trigger objects behave in a more complex fashion than EventTrigger animations or animations started using Storyboard methods. Eles "entregam" com animações definidas por outros objetos de Trigger, mas compõem EventTrigger e animações disparadas por método.They "handoff" with animations defined by other Trigger objects, but compose with EventTrigger and method-triggered animations.

Veja tambémSee also