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 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.10).gifRemarque :

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

  • 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.10).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 image, 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. Dans Expression Blend, lorsque vous créez une table de montage séquentiel dans l’étendue du document principal, 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 sous Déclencheurs dans le panneau Interaction.

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.10).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.

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

  1. 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 sous Déclencheurs. Sinon, cliquez sur le bouton Ajouter un déclencheur d’événements Cc295328.671c69bb-32e9-4ef9-9837-29403524abd0(fr-fr,Expression.10).png pour créer un nouveau déclencheur d’événements par défaut.

  2. Sous 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.

  3. Modifiez l’événement qui déclenche l’animation (Window.Loaded) à l’aide des menus déroulants dans la moitié inférieure du volet Déclencheurs. Par exemple, remplacez Quand Window.Loaded se déclenche par Quand textblock.MouseEnter se déclenche.

  4. Définissez l’action qui aura lieu au déclenchement de l’événement. Si aucune action n’est répertoriée, cliquez sur le bouton Ajouter une nouvelle action Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,Expression.10).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.

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. 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 sous Déclencheurs, puis effectuez l’une des opérations suivantes :

    • Si plusieurs actions sont répertoriées dans la moitié inférieure de la fenêtre Déclencheurs, sélectionnez celle qui contrôle votre table de montage séquentiel (par exempleStoryboard1.Begin), puis cliquez sur le bouton Supprimer cette action Cc295328.ff0160a1-9732-42f1-a503-485887342711(fr-fr,Expression.10).png adjacent.

    • Si la seule action répertoriée est celle qui contrôle votre table de montage séquentiel, vous pouvez supprimer la totalité du déclencheur en cliquant sur le bouton Supprimer le déclencheur Cc295328.d31907a6-867b-4e16-b860-f07c9531fbd7(fr-fr,Expression.10).png.

  2. Sous 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.

  3. Dans le panneau Propriétés, cliquez sur le bouton ÉvénementsCc295328.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(fr-fr,Expression.10).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.10).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. Vous pouvez également consulter la liste des événements disponibles et leurs descriptions dans la rubrique Référence rapide des événements WPF.

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

  5. 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. Le nom des méthodes de gestionnaire d’événements doit 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é.

    Cc295328.alert_note(fr-fr,Expression.10).gifRemarque :

    Vous pouvez configurer Expression Blend de manière à utiliser le Presse-papiers, même si Microsoft Visual Studio 2008 est installé. Dans le menu Outils, cliquez sur Options, puis cliquez sur Gestionnaires d’événements. Sous Expérience de modification, cliquez sur Presse-papiers uniquement.

  6. À ce stade, Expression Blend effectue l’une des actions suivantes :

    • Si Visual Studio 2008 Standard Edition ou ultérieur est installé, Expression Blend ouvre votre projet dans Visual Studio 2008, ouvre votre fichier code-behind, puis colle la méthode de gestionnaire d’événements vide.

      Cc295328.alert_note(fr-fr,Expression.10).gifRemarque :

      Si Visual Studio 2008 et Visual Studio 2005 sont installés, vous pouvez obtenir une erreur si le sélecteur de version Visual Studio essaie d’ouvrir Visual Studio 2005 au lieu de Visual Studio 2008. Cela est dû au fait qu’Expression Blend crée des projets Visual Studio 2008 qui ne peuvent pas être ouverts dans Visual Studio 2005. Si cela se produit, ouvrez votre projet dans Visual Studio 2008 avant d’essayer de créer le gestionnaire d’événements dans le panneau Propriétés d’Expression Blend.

    • Si Visual Studio 2008 Standard Edition ou ultérieur n’est pas installé, Expression Blend copie la méthode vide de gestionnaire d’événements dans le Presse-papiers et affiche une fenêtre contextuelle qui décrit les actions que vous pouvez effectuer ensuite. Dans ce cas, vous pouvez ouvrir manuellement le fichier code-behind dans un autre éditeur de texte pour coller la méthode dans la définition de classe de la fenêtre, en procédant comme suit :

      private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
      {
      
      }
      
      Private Sub textBlock_MouseEnter(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)
      
      End Sub
      
    Cc295328.alert_note(fr-fr,Expression.10).gifRemarque :

    Si une application, par exemple le Bloc-notes, est mappée aux fichiers .cs ou .vb, vous pouvez ouvrir votre fichier code-behind manuellement en double-cliquant sur son nom sous Fichiers dans le panneau Projet. Expression Blend ouvre le fichier dans l’application correspondante.

    Si aucune application n’est mappée aux fichiers .cs ou .vb, Expression Blend ne peut pas ouvrir le fichier en externe. Pour ouvrir le fichier, recherchez-le dans l’Explorateur Windows (ou, si vous avez enregistré votre projet dans Expression Blend, cliquez sur ExplorerProjet dans le menu Projet), cliquez avec le bouton droit sur le fichier .cs ou .vb à modifier, sélectionnez Ouvrir avec, puis sélectionnez Bloc-notes (ou une autre application d’édition). Après cette opération, vous pouvez ouvrir manuellement les fichiers code-behind depuis le panneau Projet dans Expression Blend.

  7. 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
    
  8. 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.10).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.

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 Styles et modèles.

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.10).gifRemarque :

    Pour savoir s’il faut utiliser un style ou un modèle, voir la rubrique Vue d'ensemble des styles et modèles.

    Cc295328.alert_note(fr-fr,Expression.10).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 sous Objets et chronologie, puis, dans le menu Objet, cliquez sur Modifier des parties du contrô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 une ressource de style.

    • Pour créer un nouveau style, sélectionnez un objet sur la planche graphique ou sous 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 une ressource de style.

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

    • Pour ouvrir un style existant, cliquez sur le bouton Modifier la ressource Cc295328.1f87709f-f24b-42f7-8da8-da155afd912f(fr-fr,Expression.10).png en regard du style dans le panneau Ressources. Une autre solution consiste à sélectionner un contrôle auquel un style personnalisé est déjà appliqué. Ensuite, dans le menu Objet, cliquez sur Modifier le style, puis sélectionnez Modifier le style.

    • Pour modifier l’un des styles simples fournis avec Expression Blend, ouvrez la Bibliothèque de composants Cc295328.0224cabd-5da1-4e01-bddd-4a647401a098(fr-fr,Expression.10).png à partir de la boîte à outils, cliquez sur l’onglet Contrôles, 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 2 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.10).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. Sous Objets et chronologie, cliquez sur le bouton Nouveau Cc295328.86937695-03dd-44ea-aa30-28d4029b3ad0(fr-fr,Expression.10).png.

    Cc295328.e2e87d8d-17b7-443b-a608-8c5ae681fce8(fr-fr,Expression.10).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.10).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.10).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 sous Déclencheurs dans le panneau Interaction, puis, dans la moitié inférieure du volet Déclencheurs, cliquez sur le bouton Ajouter une nouvelle action Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,Expression.10).png en regard 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 le bouton Ajouter un déclencheur de propriété Cc295328.9871399d-14aa-4955-9934-04f33700f273(fr-fr,Expression.10).png, puis, dans la moitié inférieure du volet 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 le bouton Ajouter une nouvelle action Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,Expression.10).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 le bouton Ajouter un déclencheur d’événements Cc295328.671c69bb-32e9-4ef9-9837-29403524abd0(fr-fr,Expression.10).png, puis, dans la moitié inférieure du volet 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 le bouton Ajouter une nouvelle action Cc295328.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,Expression.10).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.10).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.10).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 Vue d'ensemble des styles et 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 Storyboards in the main scope of your 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.10).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 Créer un contrôle, 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 Créer un contrôle, les ressources et les animations sont refactorisées dans le nouveau contrôle, de sorte que vous n’ayez pas à les recréer.

    Cc295328.alert_note(fr-fr,Expression.10).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 Créer un contrôle, 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.

Tables de montage séquentiel dans les applications Silverlight 1.0

Les tables de montage séquentiel dans les applications Silverlight 1.0 sont des ressources et, comme toutes les ressources dans Silverlight 1.0, elles sont identifiées par un nom, pas par une clé comme dans les applications Windows Presentation Foundation.

Pour contrôler une table de montage séquentiel dans une application Silverlight 1.0

Tables de montage séquentiel dans les applications Silverlight 2

Vous pouvez contrôler les tables de montage séquentiel dans les applications Silverlight 2 à l’aide d’états ou de gestionnaires d’événements.

Pour contrôler une table de montage séquentiel dans une application Silverlight 2

  • Si vous choisissez une méthode de gestionnaire d’événement, utilisez le code suivant :

    private void TextBlock_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e)
    {
        Storyboard myStoryboard;    myStoryboard = (Storyboard)this.Resources["Storyboard1"];    myStoryboard.Begin();
    }
    
  • Dans un état, Ajouter une animation qui sera passée après une modification d’état.

Voir aussi

Concepts

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

Créer une animation simple