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

La création d’un bouton dans une application Microsoft Silverlight 1.0 implique le dessin des éléments qui composent le bouton, leur encapsulation dans un panneau de disposition pour une copie simplifiée, puis l’écriture d’un code JavaScript qui exécute une action lorsque des événements de bouton se produisent (par exemple lorsqu’un utilisateur clique sur le bouton).

Remarque :
Pour obtenir un exemple complet d’utilisation de plusieurs événements de bouton, voir l’exemple ButtonGallery, que vous pouvez ouvrir en cliquant sur Écran d’accueil dans le menu Aide, puis en cliquant sur ButtonGallery dans l’onglet Exemples.

Dessiner les éléments du bouton

Vous pouvez utiliser tout élément pour créer l’aspect du bouton, y compris des formes, des lignes, du texte et des images. La procédure suivante montre comment dessiner un rectangle et un bloc de texte, mais vous pouvez utiliser n’importe quelle procédure répertoriée dans la rubrique Ajouter des éléments à un document XAML dans un projet Silverlight.

Pour dessiner les éléments du bouton

1. Un projet Silverlight 1.0 étant ouvert dans Microsoft Expression Blend 2, sélectionnez l’outil Rectangle dans la boîte à outils.

   

   Si vous ne pouvez pas voir l’outil Rectangle, cliquez avec le bouton droit sur les conteneurs d’outils pour rechercher et sélectionner l’outil Rectangle.

   

2. Dessinez un rectangle sur la planche graphique en faisant glisser le pointeur. Pendant que vous dessinez, le pointeur devient un réticule .

   

3. Le nouvel élément rectangle étant sélectionné sous Objets et chronologie, modifiez son apparence. Par exemple, sous Pinceaux dans le panneau Propriétés, cliquez sur Remplir dans l’onglet Pinceau de dégradé , puis définissez les couleurs des points de dégradé.

   

   Remarque :
   Vous pouvez apporter d’autres modifications à l’apparence du rectangle à l’aide des procédures des rubriques Apparence et Transformations.

4. Sélectionnez le contrôle TextBlock dans la boîte à outils.

   

5. Dessinez un élément de bloc de texte en haut du rectangle. Vous devrez éventuellement redimensionner le rectangle ou les éléments de bloc de texte, ou les déplacer en sélectionnant l’outil Sélection dans la boîte à outils et en faisant glisser les ornements bleus autour des éléments sur la planche graphique.

   

6. Le nouvel élément de bloc de texte étant sélectionné sous Objets et chronologie, appuyez sur F2 pour passer en mode d’édition de texte, puis tapez Bouton pour modifier le texte qui s’affiche dans l’élément. Cliquez à l’extérieur de l’élément de bloc de texte pour quitter le mode d’édition de texte.

   Remarque :
   Pour plus d’informations sur la modification de l’apparence du bloc de texte, voir les rubriques sous Texte et typographie.

7. Pour terminer l’aspect du bouton, vous pouvez dessiner d’autres éléments sur la planche graphique à l’aide des procédures répertoriées dans la rubrique Ajouter des éléments à un document XAML dans un projet Silverlight.

Haut de la page

Encapsuler les éléments d’un bouton dans un panneau de disposition

En encapsulant les éléments d’un bouton dans un panneau de disposition unique (un élément Canvas), vous simplifiez le processus de duplication du bouton. Vous pouvez ainsi copier et coller le panneau de disposition au lieu de sélectionner tous les éléments qui composent le bouton, puis de les dupliquer. En outre, l’encapsulation des éléments du bouton dans le panneau de disposition Canevas simplifie la création de gestionnaires d’événements pour les boutons. Par exemple, vous pouvez créer un gestionnaire d’événements qui répond lorsque le pointeur se déplace sur l’ensemble du panneau de disposition plutôt que de répondre lorsque le pointeur se déplace sur une partie du bouton.

Pour encapsuler des éléments dans un panneau de disposition

1. Sous Objets et chronologie, maintenez enfoncée la touche Ctrl tout en sélectionnant tous les éléments qui composent le bouton.

2. Cliquez avec le bouton droit sur les éléments sélectionnés, pointez sur Grouper, puis cliquez sur Canevas.

   

3. Cliquez avec le bouton droit sur le nouvel élément de canevas sous Objets et chronologie, cliquez sur Renommer, entrez un nouveau nom pour le bouton (par exemple MonBouton), puis appuyez sur Entrée.

   À présent, lorsque vous souhaitez dupliquer le bouton, vous pouvez copier et coller l’élément MonBouton.

Haut de la page

Créer une table de montage séquentiel d’animation pour modifier l’apparence du bouton

En règle générale, lorsque les utilisateurs cliquent sur un bouton dans une application, l’aspect de ce bouton change. La procédure suivante vous montre comment créer une table de montage séquentiel d’animation qui développe les éléments du bouton.

Remarque :
Vous pouvez animer tous les éléments dans votre application, pas seulement les éléments qui appartiennent au bouton. Par exemple, vous pouvez utiliser une petite image qui apparaît autour du bouton lorsqu’on clique dessus.

Pour créer la table de montage séquentiel d’animation

1. Sous Objets et chronologie, cliquez sur le bouton Nouveau .

   

   La boîte de dialogue Créer une table de montage séquentiel s’ouvre.

   

2. Par défaut, le Nom de votre table de montage séquentiel est Storyboard1. Conservez le nom Storyboard1 car le code de la procédure suivante y fait référence.

3. Par défaut, la case à cocher de création en tant que table de montage séquentiel est activée. Ne désactivez pas cette case à cocher dans la mesure où vous ne souhaitez pas que l’animation s’exécute immédiatement lorsque l’application est chargée dans la fenêtre du navigateur. Vous souhaitez plutôt que l’animation soit entièrement contrôlée (démarrée et arrêtée) par le code.

4. Cliquez sur OK.

   Expression Blend crée la table de montage séquentiel et active le mode d’animation.

   

   Remarque :
   Vous pouvez éventuellement modifier l’emplacement du panneau Interaction, en appuyant sur la touche F6. Lorsque le panneau Interaction est sous la planche graphique, vous pouvez afficher une plus grande partie de la chronologie.

5. Sous Objets et chronologie, sélectionnez l’élément MonBouton.

6. Au-dessus de la chronologie, cliquez sur le bouton Enregistrer l’image clé .

   Une nouvelle image clé est définie pour enregistrer l’apparence actuelle des éléments du bouton.

7. Placez le curseur de lecture de la chronologie  sur la marque de demi-seconde (le moment d’arrêt de l’animation), puis cliquez de nouveau sur le bouton Enregistrer l’image clé .

   Une nouvelle image clé est définie pour enregistrer l’apparence actuelle des éléments du bouton. Le bouton présente cet aspect à la fin de l’animation.

   

8. Positionnez le curseur de lecture de la chronologie sur la marque du quart de seconde. C’est ici que vous allez créer une modification dans l’apparence du bouton.

   Remarque :
   Si vous ne pouvez pas positionner la chronologie exactement sur la marque du quart de seconde (0:00.250), c’est que la résolution d’alignement est trop faible. Pour augmenter la résolution d’alignement, cliquez sur le bouton Options d’alignement , réglez la Résolution d’alignement par seconde à 20, puis cliquez sur OK.

9. Une fois le curseur de lecture de la chronologie positionné sur la marque du quart de seconde et l’élément MonBouton sélectionné, modifiez la taille du bouton dans la planche graphique. Pour ce faire, faites glisser la poignée de redimensionnement du coin inférieur droit tout en maintenant enfoncée la touche Alt pour conserver le point central.

   

   De nouvelles images clés sont automatiquement ajoutées à la chronologie sur la marque du quart de seconde pour enregistrer les nouvelles dimension et position du bouton. Notez qu’un élément RenderTransform a été ajouté sous Objets et chronologie pour spécifier la nouvelle taille (Échelle) et la nouvelle position (Translation) du bouton, et indiquer que des images clés pour ces éléments ont été ajoutées là où vous avez précédemment défini des images clés sur MonBouton. Expression Blend part du principe que vous souhaitez une animation entre les images clés de début et de fin qui ont été définies sur MonBouton. Par conséquent, il définit automatiquement les images clés de début et de fin sur l’élément RenderTransform.

10. Cliquez sur le bouton Lecture  pour tester l’animation.

11. Quittez le mode d’animation en cliquant sur le bouton Fermer la table de montage séquentiel . Cela permet de s’assurer que toutes les modifications que vous apportez maintenant aux éléments ne font pas partie de la table de montage séquentiel d’animation.

12. Enregistrez tous vos fichiers.

Haut de la page

Créer un gestionnaire d’événements pour déclencher la table de montage séquentiel d’animation lors d’un clic sur le bouton

Le travail d’inscription d’un gestionnaire d’événements et d’écriture du code pour le gestionnaire d’événements peut être entièrement effectué dans le fichier code-behind. Cela permet aux programmeurs et aux concepteurs de travailler séparément, combinant facilement la présentation d’une application et le code lorsque ces deux composantes sont terminées. En outre, un programmeur peut prévoir d’autres actions en réponse à un clic sur un bouton en ajoutant du code au gestionnaire d’événements, tel que la navigation vers une page Web. Pour obtenir un exemple, voir Créer un lien hypertexte dans une application Silverlight.

Pour créer le gestionnaire d’événements

1. Dans l’onglet Projet, double-cliquez sur le fichier code-behind, Page.xaml.js, pour l’ouvrir pour modification.

   Le fichier Page.xaml.js contient déjà le code JavaScript suivant :

   • Une définition de l’objet Page.

   • Inscription pour l’événement MouseLeftButtonDown.

   • Définition du gestionnaire d’événements pour l’événement MouseLeftButtonDown.

   if (!window.UntitledProject10)
       UntitledProject10 = {};
   
   UntitledProject10.Page = function()
   {
   }
   
   UntitledProject10.Page.prototype =
   {
       handleLoad: function(control, userContext, rootElement)
       {
           this.control = control;
   
           // Sample event hookup:
           rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
       },
   
       // Sample event handler
       handleMouseDown: function(sender, eventArgs)
       {
           // The following line of code shows how to find an element by name and call a method on it.
           // this.control.content.findName("Storyboard1").Begin();
       }
   }
   

   Remarque :
   Pour plus d’informations sur JavaScript dans Microsoft Silverlight et la structure des objets, voir la page sur les scripts et les événements de souris.

2. Le code pour appeler la table de montage séquentiel lorsque l’utilisateur clique sur le bouton gauche de la souris est déjà présent, mais mis en commentaire avec des doubles barres obliques (//).

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

   Supprimez les doubles barres obliques pour annuler la mise en commentaire du code.

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

3. Enregistrez tous vos fichiers.

4. Testez le projet en cliquant sur Tester le projet dans le menu Projet, ou en appuyant sur F5.

   Si la génération du test aboutit, le projet s’ouvre automatiquement dans le navigateur Web par défaut en utilisant le serveur de développement local fourni avec Microsoft Expression Studio. Pour plus d’informations sur les tests de projets Silverlight, voir Tester un projet Silverlight à partir d’Expression Blend.

   Cliquez sur le bouton pour voir si la table de montage séquentiel se déclenche. Notez qu’un clic n’importe où à l’intérieur du navigateur déclenche également la table de montage séquentiel. Cela est dû au fait que le gestionnaire d’événements a été inscrit dans l’étendue de l’élément racine (Page).

5. Mettez en commentaire la ligne de code où le gestionnaire d’événements est inscrit en ajoutant des doubles barres obliques en regard de la ligne pour lui donner l’aspect suivant :

                   //rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

6. Ajoutez la ligne de code suivante après la ligne qui a été mise en commentaire :

                   this.control.content.findName("MyButton").addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.handleMouseDown));
   

   Notez que la seule différence entre ces deux lignes de code est l’élément sur lequel le gestionnaire d’événements est inscrit. Dans la ligne que vous avez mise en commentaire, le gestionnaire d’événements a été inscrit sur rootElement. Dans la ligne que vous avez collée, le gestionnaire d’événements a été inscrit sur l’élément MyButton à l’aide de la méthode findName pour localiser l’élément.

7. Enregistrez de nouveau tous vos fichiers.

8. Testez le projet en cliquant sur Tester le projet dans le menu Projet, ou en appuyant sur F5.

   Cliquez sur le bouton, puis cliquez en dehors de ce dernier, pour confirmer que la table de montage séquentiel d’animation est déclenchée uniquement lorsque vous cliquez sur le bouton.

Haut de la page

Voir aussi

Concepts

Tester un projet Silverlight à partir d’Expression Blend