Storyboard Clase

Definición

public ref class Storyboard sealed : Timeline

/// [Microsoft.UI.Xaml.Markup.ContentProperty(Name="Children")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.WinUIContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class Storyboard final : Timeline

[Microsoft.UI.Xaml.Markup.ContentProperty(Name="Children")]
[Windows.Foundation.Metadata.Activatable(65536, "Microsoft.UI.Xaml.WinUIContract")]
[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.WinUIContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class Storyboard : Timeline

Public NotInheritable Class Storyboard
Inherits Timeline

<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>

Herencia

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

Atributos

ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Ejemplos

En el ejemplo siguiente se muestra cómo usar los métodos Begin, Stop, Pause y Resume para controlar la reproducción de un guión gráfico (animación). Un conjunto de botones permite al usuario llamar a estos métodos.

<StackPanel x:Name="LayoutRoot" >
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <DoubleAnimation From="1" To="6" Duration="00:00:6" 
            Storyboard.TargetName="rectScaleTransform" 
            Storyboard.TargetProperty="ScaleY">
                <DoubleAnimation.EasingFunction>
                    <BounceEase Bounces="2" EasingMode="EaseOut" 
                            Bounciness="2" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </StackPanel.Resources>

    <!-- Button that begins animation. -->
    <Button Click="Animation_Begin"
         Margin="2" Content="Begin" />

    <!-- Button that pauses Animation. -->
    <Button Click="Animation_Pause"
         Margin="2" Content="Pause" />

    <!-- Button that resumes Animation. -->
    <Button Click="Animation_Resume"
         Margin="2" Content="Resume" />

    <!-- Button that stops Animation. Stopping the animation 
         returns the ellipse to its original location. -->
    <Button Click="Animation_Stop"
         Margin="2" Content="Stop" />

    <Rectangle Fill="Blue" Width="200" Height="30">
        <Rectangle.RenderTransform>
            <ScaleTransform x:Name="rectScaleTransform" />
        </Rectangle.RenderTransform>
    </Rectangle>

</StackPanel>

private void Animation_Begin(object sender, RoutedEventArgs e)
{
    myStoryboard.Begin();
}
private void Animation_Pause(object sender, RoutedEventArgs e)
{
    myStoryboard.Pause();
}
private void Animation_Resume(object sender, RoutedEventArgs e)
{
    myStoryboard.Resume();
}
private void Animation_Stop(object sender, RoutedEventArgs e)
{
    myStoryboard.Stop();
}

En este ejemplo se muestra cómo crear y ejecutar una animación completamente en el código.

<Button Content="Create animation" Click="Button_Click"/>

private void Button_Click(object sender, RoutedEventArgs e)
{
    Create_And_Run_Animation();
}

private void Create_And_Run_Animation()
{
    Storyboard justintimeStoryboard = null;
    // If the storyboard already exists in the resources dictionary,
    // get it and make sure it's stopped.
    if (LayoutRoot.Resources.ContainsKey("justintimeStoryboard"))
    {
        justintimeStoryboard = (Storyboard)LayoutRoot.Resources["justintimeStoryboard"];
        justintimeStoryboard.Stop();
    }
    // Otherwise, create the storyboard and add it to the resources dictionary.
    else
    {
        // Create a red rectangle that will be the target
        // of the animation.
        Rectangle myRectangle = new Rectangle();
        myRectangle.Width = 200;
        myRectangle.Height = 200;
        SolidColorBrush myBrush = new SolidColorBrush(Colors.Red);
        myRectangle.Fill = myBrush;

        // Create the transform.
        TranslateTransform moveTransform = new TranslateTransform();
        moveTransform.X = 0;
        moveTransform.Y = 0;
        myRectangle.RenderTransform = moveTransform;

        // Add the rectangle to the tree.
        LayoutRoot.Children.Add(myRectangle);

        // Create a duration of 2 seconds.
        Duration duration = new Duration(TimeSpan.FromSeconds(2));
        // Create two DoubleAnimations and set their properties.
        DoubleAnimation myDoubleAnimationX = new DoubleAnimation();
        DoubleAnimation myDoubleAnimationY = new DoubleAnimation();
        myDoubleAnimationX.Duration = duration;
        myDoubleAnimationY.Duration = duration;
        justintimeStoryboard = new Storyboard();
        justintimeStoryboard.Duration = duration;
        justintimeStoryboard.Children.Add(myDoubleAnimationX);
        justintimeStoryboard.Children.Add(myDoubleAnimationY);
        Storyboard.SetTarget(myDoubleAnimationX, moveTransform);
        Storyboard.SetTarget(myDoubleAnimationY, moveTransform);

        // Set the X and Y properties of the Transform to be the target properties
        // of the two respective DoubleAnimations.
        Storyboard.SetTargetProperty(myDoubleAnimationX, "X");
        Storyboard.SetTargetProperty(myDoubleAnimationY, "Y");
        myDoubleAnimationX.To = 200;
        myDoubleAnimationY.To = 200;

        // Make the Storyboard a resource.
        LayoutRoot.Resources.Add("justintimeStoryboard", justintimeStoryboard);
    }

    // Begin the animation.
    justintimeStoryboard.Begin();
}

Comentarios

Storyboard es una clase importante en el concepto de animaciones con guion gráfico. Para obtener más información sobre el concepto, consulta Animaciones con guion gráfico.

Storyboard se usa para estas propiedades:

• VisualState.Storyboard
• VisualTransition.Storyboard
• BeginStoryboard.Storyboard

Estas propiedades no son el único lugar donde se define un Guión gráfico. La forma típica de usar un Guión gráfico para una animación de guion gráfico es que el Guión gráfico se define en una colección Resources ( Application.Resources o FrameworkElement.Resources, o posiblemente como un recurso dentro de un archivo como Generic.xaml para un control personalizado). Siempre que se define como un recurso XAML, siempre debes asignar un valor de atributo x:Name a storyboard. A continuación, puede hacer referencia al nombre como una variable de programación más adelante en código subyacente. Necesitará esta referencia para ejecutar realmente las animaciones que contiene storyboard llamando al método Begin en esa instancia de Storyboard. Storyboard también tiene otros métodos de control, como Stop , que pueden controlar la animación posteriormente.

Storyboard hereda varias propiedades de Timeline. Estas propiedades se pueden aplicar a un Guión gráfico o a una de las animaciones que contiene (en la colección Children ). Hay ventajas y desventajas para establecer las propiedades timeline en el guión gráfico principal en lugar de en cada animación. Para obtener más información, consulta Animaciones con guion gráfico.

También necesitas un Guión gráfico para controlar las animaciones predefinidas que agregas a controles o interfaz de usuario, si usas una de las animaciones de tema. Las animaciones de tema no tienen un punto de desencadenador innato, por lo que debes contener animaciones de tema en un Guión gráfico como los niños. Si el guión gráfico se usa como valor de VisualState.Storyboard , la animación se ejecuta cuando se carga ese estado visual. O bien, si está en un VisualTransition.Storyboard, la animación se ejecuta cuando el administrador de estado visual detecta esa transición. Se trata de la forma más común de usar una animación de tema, pero también se puede colocar uno en un recurso de Guión gráfico flexible e iniciar explícitamente la animación llamando a Begin.

Propiedades adjuntas xaml

Storyboard es la clase de servicio host para varias propiedades adjuntas xaml. Estas habilitan las animaciones secundarias bajo control por parte del Guión gráfico para cada elemento de destino independiente y propiedades de destino, a la vez que siguen siguiendo la misma escala de tiempo de control y mecanismo de desencadenador que el elemento primario.

Para admitir el acceso del procesador XAML a las propiedades adjuntas y también para exponer operaciones equivalentes de obtención y establecimiento del código, cada propiedad adjunta XAML tiene un par de métodos de descriptor de acceso Get y Set. Otra manera de obtener o establecer el valor en el código es usar el sistema de propiedades de dependencia, llamar a GetValue o SetValue y pasar el campo de identificador como identificador de propiedad de dependencia.

Consulte también

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• animaciones con guion gráfico
• Animaciones de fotograma clave y animaciones de función de aceleración
• Sintaxis de trayectoria de propiedad
• Introducción a las propiedades adjuntas