Información general sobre objetos Storyboard

Para entender este tema, debe estar familiarizado con los distintos tipos de animaciones y sus características básicas. Para obtener una introducción a la animación, consulte Información general sobre animaciones. También debe saber utilizar las propiedades asociadas. Para obtener más información sobre propiedades asociadas, consulte Información general sobre propiedades asociadas.

Las animaciones no son el único tipo útil de escala de tiempo. Se proporcionan otras clases de escalas de tiempo para ayudarle a organizar conjuntos de escalas de tiempo y para aplicar las escalas de tiempo a las propiedades. Las escalas de tiempo contenedoras se derivan de la clase TimelineGroup, e incluyen ParallelTimeline y Storyboard.

Un objeto Storyboard es un tipo de escala de tiempo contenedora que proporciona información de destino para las escalas de tiempo que contiene. Un guión gráfico puede contener cualquier tipo de Timeline, incluso otras escalas de tiempo contenedoras y animaciones. Los objetos Storyboard permiten combinar escalas de tiempo que afectan a diversos objetos y propiedades en un solo árbol de escalas de tiempo, lo que facilita la organización y el control de comportamientos de control de tiempo complejos. Por ejemplo, supongamos que desea un botón que haga estas tres cosas.

• Aumentar de tamaño y cambiar de color cuando el usuario selecciona el botón.

• Disminuir de tamaño y volver a su tamaño original cuando se hace clic en él.

• Disminuir de tamaño y desvanecerse con un fundido al 50% de opacidad al deshabilitarse.

En este caso, tenemos varios conjuntos de animaciones que se aplican al mismo objeto, y hay que reproducirlas en distintos momentos, según cuál sea el estado del botón. Los objetos Storyboard permiten organizar las animaciones y aplicarlas en grupos a uno o más objetos.

Un Storyboard se utiliza para animar propiedades de dependencia de clases que se pueden animar (para obtener más información sobre qué hace que una clase pueda animar, vea Información general sobre animaciones). Sin embargo, al ser la creación de guiones gráficos una característica del marco de trabajo, el objeto debe pertenecer al NameScope de FrameworkElement o de FrameworkContentElement.

Por ejemplo, puede utilizar Storyboard para hacer lo siguiente:

• Animar un SolidColorBrush (elemento que no es de marco) que pinta el fondo de un botón (un tipo de FrameworkElement)

• Animar un SolidColorBrush (elemento que no es de marco) que pinta el relleno de un GeometryDrawing (elemento que no es de marco) mostrado mediante una Image (FrameworkElement).

• Mediante código, animar un SolidColorBrush declarado por una clase que también contiene un FrameworkElement, si SolidColorBrush ha registrado su nombre con FrameworkElement.

Sin embargo, no se puede utilizar un Storyboard para animar un SolidColorBrush que no ha registrado su nombre con un FrameworkElement o FrameworkContentElement, o que no se ha utilizado para establecer una propiedad de un FrameworkElement o FrameworkContentElement.

Si desea utilizar Storyboard para organizar y aplicar animaciones, agregue las animaciones como escalas de tiempo secundarias de Storyboard. La clase Storyboard proporciona las propiedades asociadas Storyboard.TargetName y Storyboard.TargetProperty. Se establecen estas propiedades de una animación para especificar su objeto y propiedad de destino.

Para aplicar animaciones a sus destinos, se comienza el Storyboard utilizando una acción desencadenante o un método. En XAML, se usa un objeto BeginStoryboard con un EventTrigger, Trigger o DataTrigger. En el código, puede utilizar también el método Begin.

En la tabla siguiente se muestran los distintos espacios en que se admite cada técnica de comienzo de Storyboard: por instancia, estilo, plantilla de control y plantilla de datos. " Por instancia" se refiere a la técnica de aplicar directamente una animación o un guión gráfico a las instancias de un objeto, en lugar de un estilo, una plantilla de control o una plantilla de datos.

En el ejemplo siguiente se utiliza Storyboard para animar el Width de un elemento Rectangle y Color de SolidColorBrush utilizado para pintar 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>

Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Data
Imports System.Windows.Shapes
Imports System.Windows.Input


Namespace Microsoft.Samples.Animation
	Public Class StoryboardsExample
		Inherits Page
		Public Sub New()
			Me.WindowTitle = "Storyboards Example"
			Dim myStackPanel As New StackPanel()
			myStackPanel.Margin = New Thickness(20)

			Dim myRectangle As New Rectangle()
			myRectangle.Name = "MyRectangle"

			' Create a name scope for the page.
			NameScope.SetNameScope(Me, New NameScope())

			Me.RegisterName(myRectangle.Name, myRectangle)
			myRectangle.Width = 100
			myRectangle.Height = 100
			Dim mySolidColorBrush As New SolidColorBrush(Colors.Blue)
			Me.RegisterName("MySolidColorBrush", mySolidColorBrush)
			myRectangle.Fill = mySolidColorBrush

			Dim myDoubleAnimation As 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))

			Dim myColorAnimation As 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))
			Dim myStoryboard As New Storyboard()
			myStoryboard.Children.Add(myDoubleAnimation)
			myStoryboard.Children.Add(myColorAnimation)

			AddHandler myRectangle.MouseEnter, Sub(sender As Object, e As MouseEventArgs) myStoryboard.Begin(Me)

			myStackPanel.Children.Add(myRectangle)
			Me.Content = myStackPanel
		End Sub
	End Class
End Namespace

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;
        } 
    }
}

En las secciones siguientes se describen las propiedades asociadas TargetName y TargetProperty con mayor detalle.

En la sección anterior se menciona que, para que una animación encuentre su destino, debe conocer el nombre del mismo y la propiedad que debe animar. Especificar la propiedad que se va a animar es sencillo: basta con establecer Storyboard.TargetProperty en el nombre de la propiedad que se va a animar. Para especificar el nombre del objeto cuya la propiedad se desea animar se establece la propiedad Storyboard.TargetName de la animación.

Para que la propiedad TargetName funcione, el objeto de destino debe tener nombre. Asignar un nombre a un FrameworkElement o a un FrameworkContentElement en XAML es distinto que asignar un nombre a un objeto Freezable.

Los elementos de marco son las clases que heredan de la clase FrameworkElement. Ejemplos de elementos de marco son Window, DockPanel, Button y Rectangle. En esencia, todas las ventanas, los paneles y los controles son elementos. Los elementos de contenido de marco son las clases que heredan de la clase FrameworkContentElement. Ejemplos de elementos de contenido de marco son FlowDocument y Paragraph. Si no está seguro de si un tipo es un elemento de marco o un elemento de contenido de marco, compruebe si tiene una propiedad Name. Si la tiene, probablemente sea un elemento de marco o un elemento de contenido de marco. Para estar seguro, compruebe la sección de jerarquía de herenciade su página de tipo.

Para habilitar el establecimiento de destinos de un elemento de marco o un elemento de contenido de marco en XAML, se establece su propiedad Name. En el código también es preciso usar el método RegisterName para registrar el nombre del elemento en el elemento para el que se ha creado un NameScope.

En el ejemplo siguiente, tomado del ejemplo anterior, se asigna el nombre MyRectangle a un Rectangle, un tipo de FrameworkElement.

<Rectangle Name="MyRectangle"
  Width="100"
  Height="100">

			Dim myRectangle As New Rectangle()
			myRectangle.Name = "MyRectangle"

			' Create a name scope for the page.
			NameScope.SetNameScope(Me, New NameScope())

			Me.RegisterName(myRectangle.Name, myRectangle)

Rectangle myRectangle = new Rectangle();
myRectangle.Name = "MyRectangle";

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

this.RegisterName(myRectangle.Name, myRectangle);

Una vez que tenga un nombre, puede animar una propiedad de ese elemento.

<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))

Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
Storyboard.SetTargetProperty(myDoubleAnimation, 
    new PropertyPath(Rectangle.WidthProperty));

Los tipos Freezable son las clases que heredan de la clase Freezable. Ejemplos de elementos inmovilizables (objetos Freezable) incluyen SolidColorBrush, RotateTransform y GradientStop.

Para habilitar el establecimiento de destinos de un objeto Freezable por parte de una animación en XAML, se emplea x:Name (Directiva) para asignarle un nombre. En el código, también se usa el método RegisterName para registrar su nombre en el elemento para el que se ha creado un NameScope.

En el ejemplo siguiente se asigna un nombre a un objeto Freezable.

<SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />

			Dim mySolidColorBrush As New SolidColorBrush(Colors.Blue)
			Me.RegisterName("MySolidColorBrush", mySolidColorBrush)

SolidColorBrush mySolidColorBrush = new SolidColorBrush(Colors.Blue);
this.RegisterName("MySolidColorBrush", mySolidColorBrush);

A continuación, ya se puede establecer el objeto como destino de una animación.

<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.SetTargetName(myColorAnimation, "MySolidColorBrush");
Storyboard.SetTargetProperty(myColorAnimation, 
    new PropertyPath(SolidColorBrush.ColorProperty)); 

Los objetos Storyboard utilizan ámbitos de nombres para resolver la propiedad TargetName. Para obtener más información ámbitos de nombres en WPF, consulte Ámbitos de nombres XAML de WPF. Si se omite la propiedad TargetName, la animación establece como destino el elemento en el que se define o, en el caso de los estilos, el elemento al que se aplica el estilo.

A veces, no se puede asignar un nombre a un objeto Freezable. Por ejemplo, si un objeto Freezable se declara como recurso o se utiliza para establecer el valor de una propiedad de un estilo, no se le puede asignar un nombre. Al no tener nombre, no se puede establecer como destino directamente, pero sí de manera indirecta. En las secciones siguientes se describe cómo utilizar el establecimiento indirecto de destinos.

Existen ocasiones en que una animación no puede establecer directamente un objeto Freezable como destino, como cuando el objeto Freezable se declara como recurso o se utiliza para establecer el valor de una propiedad en un estilo. En estos casos, aunque no se puede establecer como destino directamente, el objeto Freezable se puede animar. En lugar de establecer la propiedad TargetName con el nombre de Freezable, se establece en el nombre del elemento al que "pertenece" el objeto Freezable. Por ejemplo, SolidColorBrush utilizado para establecer la propiedad Fill de un elemento de rectángulo pertenece a ese rectángulo. Para animar el pincel, se establece la propiedad TargetProperty de la animación con una cadena de propiedades que se inicia con la propiedad del elemento de marco o elemento de contenido de marco para cuyo establecimiento se ha utilizado el objeto Freezable y que finaliza con la propiedad de Freezable que se desea animar.

<ColorAnimation 
  Storyboard.TargetName="Rectangle01"
  Storyboard.TargetProperty="Fill.Color"
  From="Blue" To="AliceBlue" Duration="0:0:1" />

			Dim propertyChain() As DependencyProperty = {Rectangle.FillProperty, SolidColorBrush.ColorProperty}
			Dim thePath As String = "(0).(1)"
			Dim myPropertyPath As New PropertyPath(thePath, propertyChain)
			Storyboard.SetTargetProperty(myColorAnimation, myPropertyPath)

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

Tenga en cuenta que, si se inmoviliza Freezable, se crea un clon y se anima ese clon. Cuando esto sucede, la propiedad HasAnimatedProperties del objeto original continúa devolviendo false, porque en realidad el objeto original no se anima. Para obtener más información sobre la clonación, consulte Información general sobre objetos Freezable.

Además, tenga en cuenta que, al utilizar el establecimiento indirecto de propiedades de destino, es posible establecer como destino objetos que no existen. Por ejemplo, podría suponer que la propiedad Background de un botón determinado se ha establecido mediante un pincel SolidColorBrush e intentar animar el color, aunque en realidad se ha utilizado un pincel LinearGradientBrush establecer el fondo del botón. En estos casos, no se inicia ninguna excepción; la animación no tiene ningún efecto visible porque LinearGradientBrush no reacciona a los cambios de la propiedad Color.

En las secciones siguientes se describe con mayor detalle la sintaxis de establecimiento indirecto de propiedades de destino.

Establecer de manera indirecta una propiedad de destino de un objeto inmovilizable en XAML

<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>

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

<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>  

Establecer de manera indirecta una propiedad de destino de un objeto inmovilizable mediante código

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

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

// 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);

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

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);

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);

Establecimiento indirecto de destinos con un objeto inmovilizable como punto de partida

Para iniciar un guión gráfico en Lenguaje XAML, use una acción de desencadenador BeginStoryboard. BeginStoryboard distribuye las animaciones a los objetos y las propiedades que se animan y, a continuación, inicia el guión gráfico. (Para obtener información detallada acerca de este proceso, consulte Información general sobre sistemas de temporización y animación.) Si asigna un nombre a BeginStoryboard especificando su propiedad Name, lo convierte en un guión gráfico controlable. A continuación, podrá controlar interactivamente el guión gráfico una vez iniciado. Ésta es una lista de acciones de guión gráfico controlables que se utiliza con desencadenadores de eventos para controlar un guión gráfico.

• PauseStoryboard : pone en pausa el guión gráfico.

• ResumeStoryboard : reanuda un guión gráfico que se ha puesto en pausa.

• SetStoryboardSpeedRatio : cambia la velocidad del guión gráfico.

• SkipStoryboardToFill : avanza un guión gráfico hasta el final de su período de relleno, si lo tiene.

• StopStoryboard : detiene el guión gráfico.

• RemoveStoryboard : quita el guión gráfico.

En el ejemplo siguiente se utilizan acciones para controlar interactivamente un guión gráfico.

<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>

En los ejemplos anteriores se muestra cómo animar mediante acciones desencadenantes. En el código, también puede controlar un guión gráfico mediante los métodos interactivos de la clase Storyboard. Para que un Storyboard sea interactivo en el código, debe utilizar la sobrecarga apropiada del método Begin del guión gráfico y especificar true para que sea controlable. Para obtener más información, consulte Begin(FrameworkElement, Boolean).

En la lista siguiente se muestran los métodos que se pueden utilizar para manipular Storyboard después de haberse iniciado:

• Pause

• Resume

• Seek

• SkipToFill

• Stop

• Remove

La ventaja de utilizar estos métodos es que no es preciso crear objetos Trigger o TriggerAction; únicamente se necesita una referencia al Storyboard controlable que desea manipular.

Nota: todas las acciones interactivas llevadas a cabo sobre un objeto Clock y, por tanto, sobre un objeto Storyboard, se producen en el siguiente paso del motor de control de tiempo, lo que tiene lugar un poco antes de que se produzca la siguiente representación. Por ejemplo, si utiliza el método Seek para saltar a otro punto de una animación, el valor de propiedad no cambia al instante, más bien, el valor cambia en el paso siguiente del motor de control de tiempo.

En el ejemplo siguiente se muestra cómo aplicar y controlar animaciones mediante los métodos interactivos de la clase Storyboard.

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);

        }         

    }

}

Puede utilizar los objetos Storyboard para definir animaciones en una Style. Animar con un Storyboard en un Style es similar a utilizar un Storyboard en otros objetos, con las tres excepciones siguientes:

• No se especifica un TargetName; Storyboard siempre establece como destino el elemento al que se aplica el Style. Para establecer como destino objetos Freezable, debe utilizar el establecimiento indirecto de destinos. Para obtener más información sobre el establecimiento indirecto de destinos, consulte la sección Establecimiento indirecto de destinos.

• No se puede especificar un SourceName para un EventTrigger o un Trigger.

• No se pueden utilizar referencias de recursos dinámicos ni expresiones de enlace de datos para establecer Storyboard o valores de propiedades de animación. Esto se debe a que todo lo que esté dentro de un Style debe ser seguro para subprocesos y el sistema de control de tiempo debe inmovilizar (Freeze) los objetos Storyboard a fin de hacerlos seguros para subprocesos. No se puede inmovilizar un Storyboard si éste o sus escalas de tiempo secundarias contienen referencias de recursos dinámicos o expresiones de enlace de datos. Para obtener más información sobre la inmovilización y otras características de Freezable, consulte Información general sobre objetos Freezable.

• En XAML, no se pueden declarar controladores de eventos para Storyboard ni eventos de animación.

Para obtener un ejemplo en el que se muestra cómo definir un guión gráfico en un estilo, consulte el ejemplo Cómo: Animar en un estilo.

Puede utilizar los objetos Storyboard para definir animaciones en una ControlTemplate. Animar con un Storyboard en una ControlTemplate es similar a utilizar un Storyboard en otros objetos, con las dos excepciones siguientes:

• TargetName sólo puede hacer referencia a los objetos secundarios de ControlTemplate. Si no se especifica TargetName, la animación establece como destino el elemento al que se aplica ControlTemplate.

• El SourceName de un EventTrigger o de un Trigger únicamente puede hacer referencia a objetos secundarios de ControlTemplate.

• No se pueden utilizar referencias de recursos dinámicos ni expresiones de enlace de datos para establecer Storyboard o valores de propiedades de animación. Esto se debe a que todo lo que esté dentro de un ControlTemplate debe ser seguro para subprocesos y el sistema de control de tiempo debe inmovilizar (Freeze) los objetos Storyboard a fin de hacerlos seguros para subprocesos. No se puede inmovilizar un Storyboard si éste o sus escalas de tiempo secundarias contienen referencias de recursos dinámicos o expresiones de enlace de datos. Para obtener más información sobre la inmovilización y otras características de Freezable, consulte Información general sobre objetos Freezable.

• En XAML, no se pueden declarar controladores de eventos para Storyboard ni eventos de animación.

Para obtener un ejemplo en el que se muestra cómo definir un guión gráfico en una ControlTemplate, consulte el ejemplo Cómo: Animar en un ControlTemplate.

En los estilos y las plantillas de control, puede utilizar objetos Trigger para iniciar un guión gráfico cuando cambia una propiedad. Para obtener ejemplos, vea Cómo: Activar una animación al cambiar el valor de una propiedad y Cómo: Animar en un ControlTemplate.

Las animaciones aplicadas por objetos Trigger de propiedad se comportan de un modo más complejo que las animaciones de EventTrigger o que aquéllas que se inician mediante métodos de Storyboard. Se "continúan" con animaciones definidas por otros objetos Trigger, pero se crean con EventTrigger y animaciones activadas por métodos.

Conceptos