Storyboard Classe

Définition

public ref class Storyboard sealed : Timeline

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

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

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

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

Public NotInheritable Class Storyboard
Inherits Timeline

<Storyboard ...>
  oneOrMoreChildTimelines
</Storyboard>

Héritage

Object Platform::Object IInspectable DependencyObject Timeline Storyboard

Attributs

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Configuration requise pour Windows

Exemples

L’exemple suivant montre comment utiliser les méthodes Begin, Stop, Pause et Resume pour contrôler la lecture d’une table de montage séquentiel (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();
}

Private Sub Animation_Begin(sender As Object, e As RoutedEventArgs)
    myStoryboard.Begin()
End Sub

Private Sub Animation_Pause(sender As Object, e As RoutedEventArgs)
    myStoryboard.Pause()
End Sub

Private Sub Animation_Resume(sender As Object, e As RoutedEventArgs)
    myStoryboard.Resume()
End Sub

Private Sub Animation_Stop(sender As Object, e As RoutedEventArgs)
    myStoryboard.Stop()
End Sub

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

' need Imports for Windows.UI.Xaml.Shapes, Windows.UI.Media.Animation, Windows.UI
Private Sub Create_And_Run_Animation(sender As Object, e As RoutedEventArgs)
    ' Create a red rectangle that will be the target
    ' of the animation.
    Dim myRectangle As Rectangle = New Rectangle
    myRectangle.Width = 200
    myRectangle.Height = 200
    Dim myBrush As SolidColorBrush = New SolidColorBrush(Colors.Red)
    myRectangle.Fill = myBrush

   ' Create the transform
    Dim moveTransform As TranslateTransform = 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.
    Dim duration As Duration = New Duration(TimeSpan.FromSeconds(2))
    ' Create two DoubleAnimations and set their properties.
    Dim myDoubleAnimationX As DoubleAnimation = New DoubleAnimation
    Dim myDoubleAnimationY As DoubleAnimation = New DoubleAnimation
    myDoubleAnimationX.Duration = duration
    myDoubleAnimationY.Duration = duration
    Dim justintimeStoryboard As Storyboard = 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()
End Sub

Remarques

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

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. En règle générale, un storyboard est utilisé pour une animation de storyboard est que le storyboard est défini dans une collection Resources ( Application.Resources ou FrameworkElement.Resources, ou éventuellement en tant que ressource dans 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 ce storyboard instance. Storyboard a é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’il contient (dans la collection Children ). Il y a des avantages et des inconvénients à définir des propriétés de chronologie sur le main Storyboard au lieu de sur chaque animation. Pour plus d’informations, voir Animations dans une table de montage séquentiel.

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’ayant pas de point de déclencheur inné, vous devez donc contenir des animations de thème dans un Storyboard en tant que Enfants. Si le Storyboard est utilisé comme valeur VisualState.Storyboard , l’animation s’exécute lorsque cet état visuel est chargé. Ou, si elle se trouve dans un VisualTransition.Storyboard, l’animation s’exécute lorsque 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. Pour plus d’informations sur l’utilisation des animations de thème, consultez Démarrage rapide : Animation de votre interface utilisateur à l’aide d’animations de bibliothèque ou Animations de storyboard pour les états visuels.

Propriétés jointes XAML

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

Pour prendre en charge l’accès du processeur XAML aux propriétés jointes, ainsi que pour exposer des opérations get et set é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.

Constructeurs

Propriétés

Propriétés attachées

Méthodes

Événements

S’applique à

Voir aussi

• Timeline
• TimelineCollection
• Storyboard
• Storyboard
• Animations dans une table de montage séquentiel
• Animations dans une table de montage séquentiel pour les états visuels
• Animations par images clés et animations de fonctions d’accélération
• Démarrage rapide : Animation de votre interface utilisateur avec des animations de la bibliothèque
• Syntaxe de Property-path
• Vue d’ensemble des propriétés jointes