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

//using Windows.UI.Xaml.Media.Animation;
//using Windows.UI.Xaml.Shapes;
//using Windows.UI

private void Create_And_Run_Animation(object sender, RoutedEventArgs e)
{
    // 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;
    Storyboard 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 manera típica de usar un Guión gráfico para una animación con 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 el 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 a partir de entonces.

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 debe contener animaciones de tema en un Guión gráfico como elementos secundarios. Si el guión gráfico se usa como valor visualState.Storyboard , la animación se ejecuta cuando se carga ese estado visual. O bien, si se encuentra en un VisualTransition.Storyboard, la animación se ejecuta cuando el administrador de estado visual detecta esa transición. Esta es la forma más común de usar una animación de tema, pero también se puede colocar una en un recurso de Guión gráfico flexible y 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 el control del Guión gráfico para cada elemento de destino independiente y propiedades de destino, mientras siguen la misma escala de tiempo de control y el mecanismo de desencadenamiento que el elemento primario.

Para admitir el acceso del procesador XAML a las propiedades adjuntas, y también para exponer operaciones de obtención y establecimiento equivalentes en 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 identificador como identificador de propiedad de dependencia.

Constructores

Propiedades

Propiedades adjuntas

Métodos

Eventos

Se aplica a

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 property-path
• Introducción a las propiedades adjuntas