Partager via


Créer un site Silverlight 1.0 qui propose l’interactivité

Cette page s’applique uniquement aux projets Silverlight 1

L'interactivité dans les applications Microsoft Silverlight 1.0 est créée à l'aide de gestionnaires d'événements dans les fichiers code-behind JavaScript des documents XAML où vous concevez votre interface utilisateur. La procédure suivante vous montre comment votre application lit la table de montage séquentiel d'une animation en réponse à un clic de souris.

Pour créer un site Silverlight 1 qui propose l’interactivité

  1. Dans Microsoft Expression Blend, cliquez sur Nouveau projet dans le menu Fichier.

    La boîte de dialogue Nouveau projet apparaît.

    Cc296370.ef6e983a-52a3-4258-a42d-a76beb1e48f1(fr-fr,Expression.10).png

  2. Sous Sélectionner un type de projet, cliquez sur Site Silverlight 1.0. Les autres champs affichent des valeurs par défaut pour le nom et l’emplacement du projet. Vous pouvez laisser ces champs tels quels et cliquer sur OK.

    Un nouveau projet Silverlight est créé et la page de démarrage, Page.xaml, s’ouvre pour modification.

  3. Dans la boîte à outils, sélectionnez l’outil Plume Cc296370.894f8612-e0ed-4e00-84cf-a9bc8f38fc54(fr-fr,Expression.10).png. Dessinez une forme courbe en cliquant pour créer les points et en faisant glisser pour créer les courbes. Cliquez sur le premier point pour fermer la forme.

    Cc296370.25239939-a612-49fd-9b4a-743971738d5e(fr-fr,Expression.10).png

    Pour obtenir la liste des moyens de modifier un tracé avec la souris, voir Utilisation des Outils Plume et Sélection directe.

  4. Cliquez avec le bouton droit sur votre nouvel objet tracé sous Objets et chronologie, cliquez sur Renommer, puis entrez le nom MonTracé.

    Cc296370.93b269b5-d07e-4b73-9543-644f6e50e0fd(fr-fr,Expression.10).png

    Si un objet doit être référencé à partir d’un fichier code-behind, il lui faut un nom. Cet objet doit être référencé à partir du code pour pouvoir se connecter à un gestionnaire d’événements Click.

  5. Sous Objets et chronologie, cliquez sur le bouton Nouveau Cc296370.86937695-03dd-44ea-aa30-28d4029b3ad0(fr-fr,Expression.10).png. La boîte de dialogue Créer une table de montage séquentiel apparaît. Ne touchez pas à l’intitulé Table de montage séquentiel 1 dans le champ Nom ni à la case à cocher Créer en tant que ressource qui est activée, puis cliquez sur OK.

    Cc296370.68230d0a-c687-4ca3-af6a-63e7f2e7a9a7(fr-fr,Expression.10).png

    Une nouvelle table de montage séquentiel est créée et l’enregistrement de chronologie activé.

  6. Le curseur de lecture de chronologie Cc296370.5626c9eb-40bb-450a-9ca1-3678e5abe429(fr-fr,Expression.10).png étant placé sur la marque 0 seconde, cliquez sur le bouton Enregistrer l’image clé pour enregistrer la position actuelle de l’objet MonTracé.

    Cc296370.a9d19126-f7dd-43b9-9663-6a39e02af8e6(fr-fr,Expression.10).png

  7. Amenez le curseur de lecture de chronologie Cc296370.5626c9eb-40bb-450a-9ca1-3678e5abe429(fr-fr,Expression.10).png sur la marque 1 seconde, puis utilisez l’outil Sélection pour déplacer l’objet MonTracé. Une image clé est définie à la marque 1 seconde pour enregistrer la nouvelle position de l’objet MonTracé.

    Cc296370.8a2c43ac-1a9f-497d-8aab-5e94c74d1560(fr-fr,Expression.10).png

  8. Dans le panneau Projet, double-cliquez sur le fichier Page.xaml.js pour l’ouvrir afin de le modifier.

  9. Supprimez les marques de commentaire de la ligne de code suivante en retirant les caractères // :

                    // this.control.content.findName("Storyboard1").Begin();
    

    Cc296370.76e80641-82b4-4cb5-bb0d-447c70a01f8a(fr-fr,Expression.10).png

    Expression Blend 2 génère le code JavaScript initial pour vous montrer comment connecter un gestionnaire d’événements à un clic de bouton de souris sur l’élément racine. Le gestionnaire d’événements appelle la méthode Begin pour Storyboard1, ce qui explique pourquoi vous n’avez pas modifié le champ Nom lors de la création de la table de montage séquentiel. Pour plus d’informations sur les scripts Silverlight 1.0, voir Silverlight scripting and mouse events (Scripts et événements de souris Silverlight).

  10. Testez votre site Silverlight 1.0 en appuyant sur F5 et en cliquant sur la fenêtre du navigateur pour déclencher la table de montage séquentiel de l’animation.

Voir aussi

Concepts

Créer un bouton qui contrôle une table de montage séquentiel dans une application Silverlight

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

Modifier une table de montage séquentiel pour la répétition ou l’inversion à la fin de son cycle