Partager via


Contrôler le moment auquel la table de montage séquentiel s’exécute

Vous pouvez contrôler le moment auquel une table de montage séquentiel s’exécute dans votre application Microsoft Expression Blend des manières suivantes :

  • En faisant glisser un comportement sur l'objet que vous souhaitez utiliser pour contrôler la table de montage séquentiel. Vous pouvez utiliser le comportement ControlStoryboardAction ou, si vous utilisez des états pour créer une animation, vous pouvez opter pour le comportement GoToStateAction. Pour plus d’informations, voir Ajouter un comportement à un objet.

  • En créant un déclencheur qui exécute la table de montage séquentiel lorsqu’un événement se produit (tel que le clic d’un bouton) ou, si votre table de montage séquentiel se trouve dans un modèle de contrôle, lorsqu’une propriété est modifiée.

    Cc295328.alert_note(FR-FR,Expression.30).gifRemarque :

    Les déclencheurs ne sont pas disponibles dans les projets Microsoft Silverlight.

  • En créant une méthode de gestionnaire d’événements dans un fichier code-behind qui appelle la méthode Begin de la table de montage séquentiel.

Vous pouvez également utiliser ces méthodes pour contrôler le moment auquel la table de montage séquentiel s’arrête, marque une pause, reprend, se supprime elle-même ou passe directement à la fin.

Ces méthodes diffèrent légèrement en fonction de l’étendue dans laquelle vous travaillez.

Cc295328.alert_note(FR-FR,Expression.30).gifRemarque :

Les procédures suivantes font référence à des tables de montage séquentiel qui contiennent des animations visuelles. Toutefois, les procédures peuvent également s’appliquer à des tables de montage séquentiel audio ou vidéo. Pour plus d’informations, voir Insérer un fichier audio ou vidéo dans le document actif.

Tables de montage séquentiel dans l’étendue principale de votre document

Créez une table de montage séquentiel dans l’étendue de votre document principal si elle est appelée à constituer une fonctionnalité principale de votre document et à être déclenchée par l’utilisateur lorsque celui-ci interagit avec un contrôle qui se trouve également dans l’étendue principale de votre document.

Pour contrôler une table de montage séquentiel dans l’étendue principale de votre document à l’aide d’une méthode de gestionnaire d’événements

  1. Fermez les éventuelles tables de montage séquentiel qui sont ouvertes. Pour plus d’informations, voir Ouvrir ou fermer une table de montage séquentiel.

  2. Si vous travaillez dans un projet WPF, supprimez le déclencheur par défaut qui a été créé pour l'événement Window.Loaded lorsque vous avez créé votre table de montage séquentiel. Pour plus d’informations, voir Ajouter ou supprimer un déclencheur.

  3. Dans le panneau Objets et chronologie, sélectionnez un objet qui, lors de l’interaction, exécutera votre table de montage séquentiel. Par exemple, pour que votre table de montage séquentiel s'exécute lorsque l'utilisateur déplace le pointeur sur un bloc de texte, sélectionnez le bloc de texte.

  4. Dans le panneau Propriétés, cliquez sur Événements Cc295328.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(FR-FR,Expression.30).png. Une liste alphabétique de tous les événements disponibles s’affiche pour l’élément sélectionné.

    Cc295328.alert_tip(FR-FR,Expression.30).gifConseil :

    Pour afficher une courte description de chaque événement, placez le pointeur sur le nom de l’événement. Une info-bulle affiche une description de l'événement.

  5. Recherchez l’événement auquel vous souhaitez ajouter de la logique de programmation (par exemple, l’événement MouseEnter).

  6. Vous pouvez générer la méthode de gestionnaire d’événements vide de deux manières :

    • Double-cliquez dans le bloc de texte en regard du nom d’événements. Expression Blend génère un nom par défaut pour votre méthode de gestionnaire d’événements, l’insère dans le bloc de texte et génère le code de la méthode vide.

    • Tapez un nom dans le bloc de texte en regard du nom de l’événement, puis appuyez sur Entrée ou cliquez en dehors du bloc pour déplacer le focus hors de celui-ci. Les noms des méthodes de gestionnaire d'événements doivent commencer par une lettre. Si le nom de la méthode n’existe pas déjà dans le fichier code-behind, Expression Blend génère le code pour la méthode vide et utilise le nom que vous avez tapé.

  7. Expression Blend ouvre votre fichier code-behind, puis y colle pour vous la méthode de gestionnaire d'événements vide.

    private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    {
    
    }
    
  8. Votre fichier code-behind étant ouvert et la méthode de gestionnaire d’événements étant collée, ajoutez les lignes de code en gras suivantes dans la méthode de gestionnaire d’événements :

    private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    {
        Storyboard myStoryboard;   
        myStoryboard = (Storyboard)this.Resources["Storyboard1"];   
        myStoryboard.Begin(this);   
    }
    
    Private Sub textBlock_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
        Dim myStoryboard As New Storyboard   
        myStoryboard = CType(Me.Resources("Storyboard1"), Storyboard)   
        myStoryboard.Begin(Me)   
    End Sub
    
  9. Enregistrez tous vos fichiers, puis appuyez sur F5 pour générer et tester votre application. Par exemple, dans votre application en cours d’exécution, déplacez le pointeur de la souris sur le bloc de texte pour voir si votre animation démarre.

    Cc295328.alert_note(FR-FR,Expression.30).gifRemarque :

    Si votre animation ne revient pas au point de départ lorsque vous déplacez à nouveau le pointeur de la souris sur votre bloc de texte, il est possible que vous n’ayez pas défini une image clé à la marque 0 seconde.

Pour contrôler une table de montage séquentiel dans l’étendue principale de votre document à l’aide d’un déclencheur d’événements (WPF uniquement)

Dans Expression Blend, lorsque vous créez une table de montage séquentiel dans l’étendue du document principal dans un projet Windows Presentation Foundation (WPF), un nouveau déclencheur est automatiquement créé, qui exécute votre table de montage séquentiel au chargement de la fenêtre de votre application. Vous pouvez afficher ce déclencheur dans le panneau Déclencheurs.

Déclencheur par défaut défini par Expression Blend lorsque vous créez une table de montage séquentiel

Cc295328.daa5d5de-713b-4d58-9f98-4ef65b217e9d(FR-FR,Expression.30).png

Si vous laissez ce déclencheur tel quel, votre table de montage séquentiel s’exécute au démarrage de votre application. Si vous le souhaitez, vous pouvez modifier ce comportement à l'aide de la procédure suivante.

  1. Fermez les éventuelles tables de montage séquentiel qui sont ouvertes. Pour plus d’informations, voir Ouvrir ou fermer une table de montage séquentiel.

  2. Si un déclencheur par défaut a été créé pour l’événement Window.Loaded lorsque vous avez créé votre table de montage séquentiel et que vous ne souhaitez pas que celle-ci s’exécute au démarrage de votre application, sélectionnez Window.Loaded dans le panneau Déclencheurs. Sinon, cliquez sur Ajouter un déclencheur d’événements Cc295328.671c69bb-32e9-4ef9-9837-29403524abd0(FR-FR,Expression.30).png pour créer un nouveau déclencheur d’événements par défaut.

  3. Dans le panneau Objets et chronologie, sélectionnez un objet qui, lors de l’interaction, exécutera votre table de montage séquentiel. Par exemple, pour que votre table de montage séquentiel s'exécute lorsque l'utilisateur déplace le pointeur sur un bloc de texte, sélectionnez le bloc de texte.

  4. Modifiez l’événement qui déclenche l’animation (Window.Loaded) à l’aide des menus déroulants dans le panneau Déclencheurs. Par exemple, remplacez Quand Window.Loaded se déclenche par Quand textblock.MouseEnter se déclenche.

  5. Définissez l’action qui aura lieu au déclenchement de l’événement. Si aucune action n’est répertoriée, cliquez sur Ajouter une nouvelle action Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(FR-FR,Expression.30).png. Assurez-vous que l’action est définie sur le nom de votre table de montage séquentiel (par exemple, Storyboard1) et que la méthode appelée est Begin. Si vous préférez, vous pouvez sélectionner l'une des méthodes valides pour une table de montage séquentiel. Pour plus d’informations, voir Ajouter ou supprimer un déclencheur.

Tables de montage séquentiel dans les styles et les modèles de contrôle

Dans certains cas, Microsoft Expression Blend crée automatiquement une table de montage séquentiel, par exemple si vous ajoutez une action à un déclencheur de propriété ou à un déclencheur d’événements lorsque vous modifiez un modèle de contrôle. Pour plus d’informations sur l’utilisation des styles et des modèles, voir Définition d'un style pour un contrôle prenant en charge les modèles.

Cc295328.alert_note(FR-FR,Expression.30).gifRemarque :

Les procédures suivantes s'appliquent aux projets WPF, mais vous pouvez utiliser les états pour contrôler les tables de montage séquentiel dans les projets Silverlight. Pour plus d’informations, voir Modifier des états en réponse à l’interaction de l’utilisateur et Ajouter une animation qui sera passée après une modification d’état.

Pour contrôler une table de montage séquentiel dans l’étendue d’un modèle

  1. Ouvrez un style ou un modèle en vue de le modifier à l’aide de l’une des méthodes suivantes :

    Cc295328.alert_note(FR-FR,Expression.30).gifRemarque :

    Pour savoir s’il faut utiliser un style ou un modèle, voir la rubrique Définition d'un style pour un contrôle prenant en charge les modèles.

    Cc295328.alert_note(FR-FR,Expression.30).gifRemarque :

    Certains objets ne prennent pas en charge les modèles, tels que les objets de tracé. Les contrôles tels que Button ou RadioButton ne prennent pas en charge les modèles.

    • Pour créer un nouveau modèle, sélectionnez un objet sur la planche graphique ou dans le panneau Objets et chronologie, puis, dans le menu Objet, cliquez sur Modifier le modèle et sélectionnez Modifier une copie. La boîte de dialogue Créer la ressource Style apparaît. Sélectionnez l’emplacement où vous souhaitez définir votre ressource, puis cliquez sur OK. Pour plus d’informations, voir Créer un style.

    • Pour créer un nouveau style, sélectionnez un objet sur la planche graphique ou dans le panneau Objets et chronologie, puis, dans le menu Objet, cliquez sur Modifier le style et sélectionnez Modifier une copie. La boîte de dialogue Créer la ressource Style apparaît. Sélectionnez l’emplacement où vous souhaitez définir votre ressource, puis cliquez sur OK. Pour plus d’informations, voir Créer un style.

    • Pour ouvrir un modèle existant, cliquez sur Modifier la ressource Cc295328.1f87709f-f24b-42f7-8da8-da155afd912f(FR-FR,Expression.30).png à côté du style dans le panneau Ressources, puis, dans le panneau Objets et chronologie, cliquez avec le bouton droit sur l’élément Style, cliquez sur Modifier le modèle et sélectionnez Modifier l'élément actuel. Une autre solution consiste à sélectionner un contrôle auquel un style personnalisé est déjà appliqué, puis, dans le menu Objet, cliquez sur Modifier le modèle et sélectionnez Modifier l'élément actuel.

    • Pour ouvrir un style existant, cliquez sur Modifier la ressource Cc295328.1f87709f-f24b-42f7-8da8-da155afd912f(FR-FR,Expression.30).png à côté du style dans le panneau Ressources. Une autre solution consiste à sélectionner un contrôle auquel un style personnalisé est déjà appliqué, puis, dans le menu Objet, cliquez sur Modifier le style et sélectionnez Modifier l'élément actuel.

    • Pour modifier l’un des styles simples fournis avec Expression Blend, cliquez sur Composants Cc295328.0d8b8d29-1af9-418f-8741-be3097d76eab(FR-FR,Expression.30).png dans le panneau Outils, cliquez sur la catégorie Styles puis sur le dictionnaire de ressources Styles simples, sélectionnez un contrôle à style prédéfini, placez-le sur la planche graphique afin que le dictionnaire de ressources Simple Styles.xaml soit disponible dans le panneau Ressources, puis ouvrez le modèle ou le style simple à l’aide de l’une des options précédentes. La modification du dictionnaire de ressources Simple Styles.xaml dans votre projet actuel n’a aucune incidence sur le dictionnaire de ressources Simple Styles.xaml dans un autre projet, sauf si vous copiez le fichier Simple Styles.xaml depuis votre projet actuel dans l’autre projet.

  2. Lorsque vous vous trouvez dans l’étendue d’édition de votre style ou modèle, notez le nouveau chemin de navigation Expression Blend en haut de la planche graphique.

    Chemin de navigation avec mode de modification de modèle sélectionné

    Cc295328.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(FR-FR,Expression.30).png

    En cliquant sur les boutons du chemin de navigation, vous pouvez facilement vous déplacer entre le mode de modification de modèle, le mode de modification de style et l’étendue de modification d’objet de l’objet sélectionné. Le chemin de navigation apparaît pour n’importe quel objet sélectionné qui possède un style ou un modèle personnalisé qui lui a été appliqué.

  3. Dans le panneau Objets et chronologie, cliquez sur Nouveau Cc295328.86937695-03dd-44ea-aa30-28d4029b3ad0(FR-FR,Expression.30).png.

    Cc295328.e2e87d8d-17b7-443b-a608-8c5ae681fce8(FR-FR,Expression.30).png

    La boîte de dialogue Créer la ressource Table de montage séquentiel s’affiche.

    Cc295328.ee0efe60-655f-44cf-bea6-30830185b4c0(FR-FR,Expression.30).png

  4. Entrez un nom et cliquez sur OK. La boîte de dialogue Créer la ressource Table de montage séquentiel se ferme et Expression Blend passe au mode enregistrement de chronologie.

  5. Créez une animation qui affecte uniquement les objets dans le style ou dans le modèle en cours de modification.

    Cc295328.alert_note(FR-FR,Expression.30).gifRemarque :

    Vous ne pouvez pas animer des objets en dehors du modèle ou du style en mode conception. Toutefois, vous pouvez animer des objets existants dans le style ou dans le modèle. En outre, lorsque vous modifiez un modèle, vous pouvez regrouper les éléments sous le nœud Modèle en un panneau de disposition (tel qu’une grille), puis ajouter des objets à la grille, que vous pouvez ensuite animer.

  6. Déclenchez la nouvelle table de montage séquentiel en effectuant l’une des opérations suivantes :

    • Pour ajouter la table de montage séquentiel à un déclencheur de propriété existant, sélectionnez le déclencheur dans le panneau Déclencheurs, puis, dans la moitié inférieure du panneau Déclencheurs, cliquez sur Ajouter une nouvelle action Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(FR-FR,Expression.30).png à côté d'Actions lors de l’activation ou d’Actions lors de la désactivation, selon que votre table de montage séquentiel doit s’exécuter lorsque le déclencheur est activé ou lorsqu’il est désactivé. Votre nouvelle table de montage séquentiel est automatiquement ajoutée en tant qu’action se produisant lorsque le déclencheur est activé.

    • Pour ajouter la table de montage séquentiel à un nouveau déclencheur de propriété, cliquez sur Ajouter un déclencheur de propriété Cc295328.9871399d-14aa-4955-9934-04f33700f273(FR-FR,Expression.30).png, puis, dans la moitié inférieure du panneau Déclencheurs, remplacez le paramétrage par défaut du déclencheur (target-element.IsCancel = False) par les propriété et valeur de votre choix (par exemple, target-element.IsPressed = True), puis cliquez sur Ajouter une nouvelle action Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(FR-FR,Expression.30).png. Votre nouvelle table de montage séquentiel est automatiquement ajoutée en tant qu’action se produisant lorsque l’événement est déclenché.

    • Pour ajouter la table de montage séquentiel à un nouveau déclencheur d’événements, cliquez sur Ajouter un déclencheur d’événements Cc295328.671c69bb-32e9-4ef9-9837-29403524abd0(FR-FR,Expression.30).png, puis, dans la moitié inférieure du panneau Déclencheurs, remplacez l’événement par défaut du déclencheur (Quand target-element.Loaded se déclenche) par l’événement de votre choix (par exemple, Quand target-element.Click se déclenche), puis cliquez sur Ajouter une nouvelle action Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(FR-FR,Expression.30).png. Votre nouvelle table de montage séquentiel est automatiquement ajoutée en tant qu’action se produisant lorsque l’événement est déclenché.

    Cc295328.alert_caution(FR-FR,Expression.30).gifImportant :

    Avant d’apporter des modifications générales au modèle, sélectionnez toujours le déclencheur Par défaut pour désactiver le mode enregistrement de déclencheur. Sinon, vous risquez de modifier un déclencheur existant par inadvertance.

    Cc295328.alert_caution(FR-FR,Expression.30).gifAttention :

    La modification d’un style ou d’un modèle peut porter préjudice aux fonctionnalités du contrôle système auquel ce style ou modèle est appliqué. Pour obtenir la liste des précautions à prendre, voir la section Méthodes conseillées dans la rubrique Définition d'un style pour un contrôle prenant en charge les modèles.

  7. Enregistrez tous vos fichiers, puis appuyez sur F5 pour générer et tester votre application.

    Pour obtenir un exemple plus spécifique de modification d’un modèle, voir Essayez ! Ajouter de l’animation à un bouton.

Table de montage séquentiel dans les contrôles utilisateur

En plaçant une table de montage séquentiel dans un contrôle utilisateur, vous pouvez encapsuler les objets et les tables de montage séquentiel qui animent ces objets dans un même fichier code-behind et de document XAML. Vous pouvez ensuite instancier le contrôle utilisateur à plusieurs reprises dans d’autres documents.

Pour contrôler une table de montage séquentiel qui se trouve dans un contrôle utilisateur

  1. Créez et ouvrez un contrôle utilisateur en vue de sa modification en effectuant l’une des opérations suivantes :

  2. Créez une table de montage séquentiel d’animation et animez certains objets dans le contrôle utilisateur.

  3. Vous pouvez maintenant utiliser l’une des tâches décrite dans la section « Tables de montage séquentiel dans l'étendue principale du document » pour contrôler votre animation à l’aide d’un déclencheur d’événements ou d’une méthode de gestionnaire d’événements.

    Cc295328.alert_note(FR-FR,Expression.30).gifRemarque :

    Si vous créez un déclencheur d’événements sur un objet avant de convertir celui-ci en un contrôle utilisateur à l’aide de la commande Transformer en UserControl, vous devrez recréer le déclencheur d’événements dans l’étendue du contrôle utilisateur. Cela est dû au fait que les événements disponibles dans l’étendue du contrôle utilisateur diffèrent de ceux disponibles dans l’étendue du document principal. Par exemple, vous pouvez configurer des événements tels que Quand UserControl.MouseDown se déclenche, avec une action telle que Storyboard1.Begin. Lorsque vous utilisez la commande Transformer en UserControl, les ressources et les animations sont refactorisées dans le nouveau contrôle, de sorte que vous n’avez pas à les recréer.

    Cc295328.alert_note(FR-FR,Expression.30).gifRemarque :

    Si vous créez une méthode de gestionnaire d’événements pour un objet avant de convertir celui-ci en un contrôle utilisateur à l’aide de la commande Transformer en UserControl, le code de la méthode du gestionnaire d’événements dans le fichier code-behind de votre document principal n’est pas déplacé vers le fichier code-behind du contrôle utilisateur. En effet, il est possible que d’autres objets utilisent la même méthode de gestionnaire d’événements. Vous pouvez copier et coller la méthode de gestionnaire d'événements dans le fichier code-behind du contrôle utilisateur.

Voir aussi

Tâches

Créer, modifier ou supprimer une table de montage séquentiel

Créer une animation simple