Pour afficher l’article en anglais, activez la case d’option Anglais. Vous pouvez aussi afficher la version anglaise dans une fenêtre contextuelle en faisant glisser le pointeur de la souris sur le texte.
Traduction
Anglais

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 Blend for Visual Studio 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, consultez 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.

    Remarque Remarque

    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.

Remarque Remarque

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, consultez Insérer un fichier audio ou vidéo dans le document actif.

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, consultez Ouvrir ou fermer une animation.

  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, consultez Ajouter ou supprimer un déclencheur à partir d’un contrôle WPF (Kit de développement logiciel Blend pour WPF).

  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énementsJJ169822.6c67bb3b-e8a2-4a63-bad5-54d5c15b04dd(fr-fr,VS.120).png. Une liste alphabétique de tous les événements disponibles s’affiche pour l’objet sélectionné.

    Conseil Conseil

    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 la zone de texte en regard du nom de l’événement. Blend génère un nom par défaut pour votre méthode de gestionnaire d’événements et l’inscrit dans la zone de texte, puis génère le code pour 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, Blend génère le code pour la méthode vide et utilise le nom que vous avez tapé.

  7. Blend ouvre votre fichier code-behind puis le colle dans la méthode de gestionnaire d’événements vide.

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

    Remarque Remarque

    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.

JJ169822.collapse_all(fr-fr,VS.120).gifContrôle 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 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 Blend lorsque vous créez une table de montage séquentiel

JJ169822.daa5d5de-713b-4d58-9f98-4ef65b217e9d(fr-fr,VS.120).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 (WPF uniquement)

  1. Fermez les éventuelles tables de montage séquentiel qui sont ouvertes. Pour plus d'informations, consultez Ouvrir ou fermer une animation.

  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 JJ169822.671c69bb-32e9-4ef9-9837-29403524abd0(fr-fr,VS.120).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 When Window.Loaded is raised par When textblock.MouseEnter is raised.

  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 JJ169822.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,VS.120).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, consultez Ajouter ou supprimer un déclencheur à partir d’un contrôle WPF (Kit de développement logiciel Blend pour WPF).

Dans certains cas, Blend for Visual Studio 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 Application de styles à des objets dans Blend.

Remarque Remarque

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, consultez Modifier des états en réponse à l'interaction de l'utilisateur dans Blend et Ajouter une animation qui sera passée après une modification d'état dans Blend.

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 :

    Remarque Remarque

    Pour savoir s’il faut utiliser un style ou un modèle, voir la rubrique Application de styles à des objets dans Blend.

    Remarque Remarque

    Certains objets ne prennent pas en charge les modèles, tels que les objets de tracé. Les contrôles tels que Button et RadioButton prennent 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, consultez Créer un style dans Blend.

    • 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, consultez Créer un style dans Blend.

    • Pour ouvrir un modèle existant, cliquez sur Modifier la ressource JJ169822.1f87709f-f24b-42f7-8da8-da155afd912f(fr-fr,VS.120).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 JJ169822.1f87709f-f24b-42f7-8da8-da155afd912f(fr-fr,VS.120).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 Blend, cliquez sur Composants JJ169822.0d8b8d29-1af9-418f-8741-be3097d76eab(fr-fr,VS.120).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 Blend en haut de la planche graphique.



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

    JJ169822.eb50efd9-44c6-41f9-8f50-7d40f6c42e61(fr-fr,VS.120).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 le bouton NouveauJJ169822.86937695-03dd-44ea-aa30-28d4029b3ad0(fr-fr,VS.120).png.

    JJ169822.e2e87d8d-17b7-443b-a608-8c5ae681fce8(fr-fr,VS.120).png

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

    JJ169822.ee0efe60-655f-44cf-bea6-30830185b4c0(fr-fr,VS.120).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 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.

    Remarque Remarque

    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 Grid), 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 JJ169822.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,VS.120).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é JJ169822.9871399d-14aa-4955-9934-04f33700f273(fr-fr,VS.120).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 la propriété et la valeur de votre choix (par exemple, target-element.IsPressed = True), puis cliquez sur Ajouter une nouvelle actionJJ169822.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,VS.120).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 JJ169822.671c69bb-32e9-4ef9-9837-29403524abd0(fr-fr,VS.120).png, puis, dans la moitié inférieure du panneau Déclencheurs, remplacez l’événement par défaut du déclencheur When target-element.Loaded is raised par l’événement de votre choix (par exemple, When target-element.Click is raised), puis cliquez sur Ajouter une nouvelle actionJJ169822.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(fr-fr,VS.120).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é.

    Remarque importante Important

    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.

    Mise en garde Attention

    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 Application de styles à des objets dans Blend.

  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 Définir différents états visuels et durées de transition pour un contrôle 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.

    Remarque Remarque

    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 When UserControl.MouseDown is raised, 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.

    Remarque Remarque

    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.

Afficher: