Charger une nouvelle page dynamiquement dans votre application Silverlight 2

Vous disposez de nombreuses façons de charger dynamiquement du contenu dans une application Silverlight 2. Cette procédure crée des objets pour les pages de contenu puis charge un des objets pour afficher le contenu lorsque l’utilisateur clique sur un bouton. Vous trouverez d’autres solutions dans la documentation Silverlight sur MSDN, et sur le site Web consacré à la communauté Silverlight.

Pour charger une page au moment de l’exécution

1. Dans un projet Silverlight 2 qui contient plusieurs pages de contenu, ouvrez la page de démarrage (généralement Page.xaml). Pour ce didacticiel, supposez que vous disposez de deux pages de contenu appelées UserControl1.xaml et UserControl2.xaml.

   Conseil :
   Pour ajouter de nouvelles pages de contenu, cliquez sur Nouvel élément sur le menu Fichier.

2. Dans la boîte à outils, cliquez sur le bouton Bibliothèque de composants , puis sélectionnez le panneau de disposition Border . Dessinez un objet de bordure sur la planche graphique avec votre souris.

   

   Conseil :
   Pendant que le nouvel objet de bordure est sélectionné, vous pouvez modifier son apparence en définissant les propriétés sous Pinceaux et Apparence dans le panneau Propriétés. Par exemple, vous pouvez définir la propriété BorderBrush sur un Pinceau de couleur unie  et définir la propriété BorderThickness sur 2.

3. Sous Objets et chronologie, cliquez avec le bouton droit sur l’objet [Border], sélectionnez Renommer, puis modifiez le nom de l’objet en PageContainer. Ceci vous permet de vous référer à cet objet dans le fichier code-behind ultérieurement.

4. Sous Objets et chronologie, double-cliquez sur l’objet LayoutRoot pour en faire l’objet activé. Une bordure jaune apparaît autour de LayoutRoot, et tout nouvel objet dessiné devient un enfant de LayoutRoot.

5. Dans la boîte d’outils, cliquez sur Bouton , puis dessinez un bouton sur la planche graphique à l’extérieur de l’objet PageContainer.

   Conseil :
   Après avoir dessiné un contrôle qui affiche du texte, vous pouvez modifier le texte en appuyant sur la touche F2 pour entrer en mode édition de texte. Pour quitter le mode édition de texte, appuyez sur Échap.

6. Sous Objets et chronologie, sélectionnez l’élément [Button].

   

7. Dans le panneau Propriétés, cliquez sur le bouton Événements  pour basculer de l’affichage propriétés à l’affichage événements.

   Conseil :
   Pour faire revenir le panneau Propriétés à l’affichage propriétés, cliquez sur le bouton Propriétés .

8. Double-cliquez sur la zone de texte en regard de l’événement Click. Microsoft Expression Blend génère un nom (Button_Click) pour un gestionnaire d’événements qui sera appelé lorsque l’utilisateur clique sur le bouton dans votre application en cours d’exécution.

   

   Expression Blend copie le code pour le gestionnaire d’événements dans le Presse-papiers, puis ouvre votre projet dans Microsoft Visual Studio 2008 si vous l’avez installé.

   Si vous n’avez pas d’éditeur de code installé, ouvrez le fichier code-behind pour le contrôle utilisateur dans un éditeur de texte et collez le code suivant :

   private void Button_Click(object sender, RoutedEventArgs e)
   {
   
   }
   

   Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
   
   End Sub
   

   Pour plus d’informations sur l’interopérabilité entre Visual Studio 2008 et Expression Blend, voir Modifier un fichier code-behind.

9. Pour basculer entre vos deux pages de contenu qui s’afficheront dans l’objet de bordure PageContainer, créez des instances des pages dans la mémoire, puis dans le gestionnaire d’événements, ajoutez une des pages à PageContainer. Par exemple, collez le code suivant dans votre fichier code-behind. « UserControl1 » et « UserControl2 » sont les noms des deux autres pages de contenu dans votre projet.

   Conseil :
   Un contrôle de bordure ne peut avoir qu’un seul objet enfant. Pour qu’un contrôle puisse contenir plus d’un enfant, tel qu’un panneau de disposition Grille , le code devra être légèrement différent.

   private UserControl1 uc1 = new UserControl1();private UserControl2 uc2 = new UserControl2();private bool atUC2 = false;
   
   private void Button_Click(object sender, RoutedEventArgs e)
   {
     if (atUC2)  {    this.PageContainer.Child = uc1;  }  else  {    this.PageContainer.Child = uc2;  }  atUC2 = !atUC2;
   }
   

   Private uc1 As UserControl1 = New UserControl1()Private uc2 As UserControl2 = New UserControl2()Private atUC2 As Boolean = False
   
   Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
     If atUC2 Then    Me.PageContainer.Child = uc1  Else    Me.PageContainer.Child = uc2  End If  atUC2 = Not atUC2
   End Sub
   

10. Testez votre projet (F5), puis cliquez sur votre bouton pour voir UserControl1 et UserControl2 se charger dans la bordure PageContainer.

    

Dépannage

• Si vous obtenez l’erreur « Impossible de modifier le fichier code-behind. La classe suivante est introuvable » lorsque vous double-cliquez dans le panneau Événements dans Expression Blend, vous devrez basculer dans votre éditeur de code externe (généralement Microsoft Visual Studio) pour recharger la solution. Le rechargement inclura les nouveaux fichiers qui définissent la classe manquante. Si vous obtenez l’erreur indiquant que le chargement de la solution ne peut pas être effectué dans Visual Studio 2008, vous ne disposez peut-être pas des outils Microsoft Silverlight Tools pour Visual Studio 2008 installés. Installez les outils, puis essayez de double-cliquer dans le panneau Événements dans Expression Blend.

• Si vous ne pouvez pas voir le contenu de vos pages chargées dynamiquement, il est possible que la bordure PageContainer soit trop petite pour contenir tout le contenu chargé. Essayez d’agrandir la bordure PageContainer ou définissez les propriétés de disposition dans les pages chargées dynamiquement avec les paramètres suivants :

  • Largeur = Auto

  • Hauteur = Auto

  • Propriétés de Marge = 0

• Si votre bouton disparaît lorsque vous cliquez dessus, vous devrez peut-être ajouté l’objet bouton en tant qu’un enfant de la bordure PageContainer et non en tant qu’un enfant de LayoutRoot. (Le code ajouté remplace l’enfant de l’objet de bordure PageContainer.) Sous Objets et chronologie, vous pouvez faire glisser l’objet bouton sur le panneau LayoutRoot pour le déplacer en dehors de la bordure PageContainer.

• Si vous créez un nouvel objet pour cibler le chargement de la page (au lieu d’un bouton), puis dans Expression Blend, copiez le nom du gestionnaire d’événements Button_Click dans le nouvel objet dans l’affichage Événements  du panneau Propriétés, vous obtiendrez peut-être une erreur dans la navigateur Web lors du test de votre projet (F5). Ceci peut entraîner une signature incorrecte dans le gestionnaire d’événements qui ne correspond pas au nouveau type d’objet. Par exemple, la signature pour un bouton Click du gestionnaire d’événements ressemble à ce qui suit :

  private void Button_Click(object sender, RoutedEventArgs e)
  

  Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
  

  La signature pour un bouton MouseLeftButtonDown du gestionnaire d’événements ressemble à ce qui suit :

  private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  

  Private Sub Path_MouseLeftButtonDown(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
  

  Vous pouvez résoudre ce problème en double-cliquant dans la zone de texte sur le gestionnaire d’événements correct dans l’affichage Événements  du panneau Propriétés pour créer un nouvelle méthode avec la signature correcte dans le fichier code-behind.

Étapes suivantes

• Vous trouverez d’autres vidéos et rubriques Comment sur les tâches spécifique sur le site Web consacré à la communauté Silverlight.