Storyboard Classe

Définition

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>

Héritage

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

Attributs

ContentPropertyAttribute ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Exemples

L’exemple suivant montre comment utiliser les méthodes Begin, Stop, Pause et Resume pour contrôler la lecture d’un storyboard (animation). Un ensemble de boutons permet à l’utilisateur d’appeler ces méthodes.

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

Cet exemple montre comment créer et exécuter une animation entièrement dans le code.

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

Remarques

Storyboard est une classe importante dans le concept d’animations storyboarded. Pour plus d’informations sur le concept, consultez animations storyboarded.

Le storyboard est utilisé pour ces propriétés :

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

Ces propriétés ne sont pas le seul endroit où un Storyboard est défini. La façon classique d’utiliser un storyboard pour une animation storyboard est que le Storyboard est défini dans une collection Resources ( Application.Resources ou FrameworkElement.Resources, ou éventuellement en tant que ressource au sein d’un fichier tel que Generic.xaml pour un contrôle personnalisé). Chaque fois qu’elle est définie en tant que ressource XAML, vous devez toujours affecter une valeur d’attribut x :Name à votre Storyboard. Vous pouvez ensuite référencer le nom en tant que variable de programmation ultérieurement dans code-behind. Vous aurez besoin de cette référence pour exécuter réellement les animations que contient le Storyboard, en appelant la méthode Begin sur cette instance Storyboard. Storyboard possède également d’autres méthodes de contrôle telles que Stop qui peuvent contrôler l’animation par la suite.

Le storyboard hérite de plusieurs propriétés de Timeline. Ces propriétés peuvent être appliquées à un Storyboard ou à l’une des animations qu’elle contient (dans la collection Children ). Il existe des avantages et des inconvénients pour définir les propriétés de chronologie sur le storyboard principal au lieu de chaque animation. Pour plus d’informations, consultez animations scénarisées.

Vous avez également besoin d’un Storyboard pour contrôler les animations prédéfinies que vous ajoutez aux contrôles ou à l’interface utilisateur, si vous utilisez l’une des animations de thème. Les animations de thème n’ont pas de point de déclencheur inné. Vous devez donc contenir des animations de thème dans un storyboard en tant qu’enfants. Si le Storyboard est utilisé comme valeur VisualState.Storyboard , l’animation s’exécute lorsque cet état visuel est chargé. Ou, s’il se trouve dans visualTransition.Storyboard, l’animation s’exécute quand cette transition est détectée par le gestionnaire d’état visuel. Il s’agit de la façon la plus courante d’utiliser une animation de thème, mais vous pouvez également en placer une dans une ressource Storyboard libre et démarrer explicitement l’animation en appelant Begin.

Propriétés jointes XAML

Storyboard est la classe de service hôte pour plusieurs propriétés jointes XAML. Celles-ci permettent aux animations enfants sous contrôle par le Storyboard à chaque élément cible distincts et aux propriétés cibles, tout en suivant la même chronologie de contrôle et le mécanisme de déclenchement que le parent.

Pour prendre en charge l’accès au processeur XAML aux propriétés jointes, ainsi que pour exposer des opérations d’obtention et de définition équivalentes au code, chaque propriété jointe XAML a une paire de méthodes d’accesseur Get et Set. Une autre façon d’obtenir ou de définir la valeur dans le code consiste à utiliser le système de propriétés de dépendance, en appelant GetValue ou SetValue et en passant le champ d’identificateur comme identificateur de propriété de dépendance.

Voir aussi

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• Animations scénarisées
• Animations d’images clés et animations de fonction d’accélération
• Syntaxe de chemin d’accès aux propriétés
• Vue d’ensemble des propriétés jointes