Essayez ! Charger une nouvelle page dynamiquement dans votre application Silverlight

Vous pouvez charger dynamiquement du contenu de nombreuses façons dans une application Microsoft Silverlight. 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 comportant plusieurs pages de contenu, ouvrez la page de démarrage (généralement Page.xaml). Pour cette procédure, supposons 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 le panneau Outils, cliquez sur 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. Dans le panneau Objets et chronologie, cliquez avec le bouton droit sur l'objet [Border], sélectionnez Renommer, puis changez le nom de l'objet en PageContainer pour pouvoir vous référer à cet objet ultérieurement dans le fichier code-behind.

4. Dans le panneau Objets et chronologie, cliquez sur l'objet LayoutRoot pour qu'il devienne l'objet actif. Une bordure jaune apparaît autour de LayoutRoot, et tout nouvel objet dessiné devient un enfant de LayoutRoot.

5. Dans le panneau Outils, cliquez sur Button , 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. Dans le panneau Objets et chronologie, sélectionnez l'objet [Button].

   

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

   Conseil :
   Pour faire revenir le panneau Propriétés à l'affichage des propriétés, cliquez sur 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 les deux pages de contenu qui s'afficheront dans l'objet de bordure PageContainer, créez des instances des pages en 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, comme 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, il se peut que Microsoft Silverlight Tools pour Visual Studio 2008 ne soit pas installé. 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.) Dans le panneau 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 déclencher le chargement de la page (au lieu d'un bouton) et que dans Expression Blend, vous copiez le nom du gestionnaire d'événements Button_Click dans le nouvel objet de l'affichage Événement du panneau Propriétés, vous obtiendrez peut-être une erreur dans le 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 à côté du gestionnaire d'événements correct dans l'affichage Événements  du panneau Propriétés pour créer une nouvelle méthode avec la signature correcte dans le fichier code-behind.

Étapes suivantes

• Vous trouverez d'autres informations sur des tâches spécifiques sur le site Web consacré à la communauté Silverlight (éventuellement en anglais).