Esercitazione: caricare una nuova pagina dinamicamente nell'applicazione Silverlight

Esistono diversi modi per caricare dinamicamente il contenuto in un'applicazione Microsoft Silverlight. Questa procedura consente di creare oggetti per pagine di contenuto e quindi caricare uno degli oggetti per visualizzare il contenuto quando l'utente fa clic su un pulsante. È possibile trovare altre soluzioni nella Cenni preliminari su Silverlight  su MSDN e nel sito Web della community Silverlight .

Per caricare una pagina in fase di esecuzione

1. In un progetto di Silverlight con più pagine di contenuto, aprire la pagina iniziale (in genere Page.xaml). Per questa esercitazione, si supponga di disporre di due pagine di contenuto denominate UserControl1.xaml e UserControl2.xaml.

   Suggerimento:
   Per aggiungere nuove pagine di contenuto, scegliere Nuovo elemento nel menu File.

2. Nel pannello Strumenti, fare clic su Asset , quindi selezionare il pannello di layout Border . Disegnare un oggetto bordo nella tavola da disegno con il mouse.

   

   Suggerimento:
   È possibile modificare l'aspetto del nuovo oggetto bordo selezionato impostando le proprietà delle sezioni Pennelli e Aspetto nel pannello Proprietà. Ad esempio, è possibile impostare la proprietà BorderBrush su un Pennello tinta unita  e la proprietà BorderThickness su 2.

3. Nel pannello Oggetti e sequenza temporale, fare clic con il pulsante destro del mouse sull'oggetto [Border], selezionare Rinomina quindi modificare il nome dell'oggetto in PageContainer. In tal modo sarà possibile fare riferimento a questo oggetto nel file code-behind in un secondo momento.

4. Nel pannello Oggetti e sequenza temporale fare doppio clic sull'oggetto LayoutRoot per attivarlo. Verrà visualizzato un bordo giallo intorno all'oggetto LayoutRoot e tutti i nuovi oggetti disegnati nella tavola da disegno, diventeranno oggetti figlio di LayoutRoot.

5. Nel pannello Strumenti, fare clic su Button , quindi disegnare un pulsante nella tavola da disegno, all'esterno dell'oggetto PageContainer.

   Suggerimento:
   Dopo aver disegnato un controllo che consente di visualizzare del testo, sarà possibile modificare il testo premendo F2 per passare alla modalità di modifica del testo. Per uscire dalla modalità di modifica testo, premere ESC.

6. Nel pannello Oggetti e sequenza temporale, selezionare l'oggetto [Button].

7. Nel pannello Proprietà fare clic su Eventi  per passare dalla visualizzazione delle proprietà a quella degli eventi.

   Suggerimento:
   Per ripristinare la visualizzazione delle proprietà nel pannello Proprietà fare clic su Proprietà .

8. Fare doppio clic sulla casella di testo accanto all'evento Click. Microsoft Expression Blend genera un nome (Button_Click) per un gestore dell'evento che verrà chiamato quando l'utente fa clic sul pulsante nell'applicazione in fase di esecuzione.

   Expression Blend consente di copiare il codice del gestore dell'evento negli Appunti e di aprire il progetto in Microsoft Visual Studio 2010 se installato.

   Se non è installato un editor del codice, aprire il file code-behind per il controllo utente in un editor di testo e incollare il codice seguente:

   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
   

   Per ulteriori informazioni sull'interoperabilità di Visual Studio 2010 con Expression Blend, vedere Modificare un file code-behind.

9. Per passare da una pagina di contenuto all'altra tra le due che verranno visualizzate nell'oggetto bordo PageContainer, creare istanze delle pagine nella memoria, quindi, nel gestore dell'evento, aggiungere una delle pagine a PageContainer. Incollare, ad esempio, il codice seguente in grassetto nel file code-behind: "UserControl1" e "UserControl2" sono i nomi delle due pagine di contenuto del progetto.

   Suggerimento:
   Un controllo bordo può avere un solo oggetto figlio. Per i controlli che possono contenere più oggetti figlio, ad esempio un pannello di layout Grid , il codice è leggermente diverso.

   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. Testare il progetto premendo F5 e quindi fare clic sul pulsante per visualizzare il caricamento di UserControl1 e UserControl2 nel bordo PageContainer.

    

Risoluzione dei problemi

• Se viene visualizzato l'errore "Impossibile modificare il file code-behind. The following class was not found" quando si fa doppio clic nel pannello Eventi in Expression Blend, potrebbe essere necessario passare all'editor del codice esterno, in genere Microsoft Visual Studio, per ricaricare la soluzione. Durante il ricaricamento verranno inclusi i nuovi file che definiscono la classe mancante.

• Se in Visual Studio 2010 viene visualizzato l'errore "Cannot load the solution" (Impossibile caricare la soluzione), è possibile che Microsoft Silverlight Tools per Visual Studio 2010  non sia installato. Installare il prodotto e quindi provare a fare doppio clic nel pannello Eventi in Expression Blend.

• Se non risulta possibile visualizzare il contenuto delle pagine caricate dinamicamente, è possibile che il bordo PageContainer sia troppo piccolo rispetto al contenuto caricato. Provare a ingrandire il bordo PageContainer o impostare le proprietà di layout nelle pagine caricate dinamicamente come segue:

  • Width = Auto

  • Height = Auto

  • Proprietà Margin = 0

• Se il pulsante scompare quando si fa clic su di esso, è possibile che l'oggetto pulsante sia stato aggiunto come oggetto figlio del bordo PageContainer anziché come oggetto figlio di LayoutRoot. Il codice aggiunto sostituisce l'oggetto figlio dell'oggetto bordo PageContainer. Nel pannello Oggetti e sequenza temporale è possibile trascinare l'oggetto pulsante nel pannello LayoutRoot per spostarlo dal bordo PageContainer.

• Se si crea un nuovo oggetto per avviare il caricamento della pagina (invece di un pulsante), e quindi in Expression Blend si copia il nome del gestore dell'evento Button_Click nel nuovo oggetto nella visualizzazione Eventi° del pannello Proprietà, è possibile che venga restituito un errore nel browser durante il test (F5) del progetto. Questo errore può dipendere da una firma errata per il gestore dell'evento che non corrisponde al tipo del nuovo oggetto. Ad esempio, la firma per un gestore dell'evento Click di un pulsante è simile alla seguente:

  private void Button_Click(object sender, RoutedEventArgs e)
  

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

  La firma per un gestore dell'evento MouseLeftButtonDown di un pulsante è simile alla seguente:

  private void Path_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  

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

  Per risolvere questo problema, fare doppio clic nella casella di testo accanto al gestore dell'evento corretto nella visualizzazione Eventi° del pannello Proprietà per creare un nuovo metodo con la firma corretta nel file code-behind.

Passaggi successivi

• Per ulteriori informazioni su attività specifiche vedere il sito Web della community Silverlight .

Copyright © 2011 Microsoft Corporation. Tutti i diritti riservati.