Esercizio: usare le schede con le pagine di esplorazione

Completato

Nell'app di astronomia, viene richiesto di aggiungere pagine che consentono all'utente di selezionare diversi corpi astronomici e visualizzarne i dettagli. Può esserci un numero qualsiasi di corpi, quindi la creazione di una scheda per ogni corpo non è un approccio fattibile. Pertanto, per consentire all'utente di selezionare il corpo da visualizzare, si decide di aggiungere un'altra pagina contenente un elenco. L'utente può selezionare un corpo da questo elenco e l'app visualizza i dettagli del corpo in una nuova pagina. La pagina elenco funge da pagina radice per la navigazione nello stack. Si aggiunge la pagina dell'elenco come scheda nell'interfaccia utente esistente.

Aprire la soluzione iniziale

1. Passare alla cartella exercise3 nel repository clonato all'inizio di questo modulo e quindi passare alla cartella start.

2. Usa Visual Studio per aprire la soluzione Astronomy.sln o la cartella in Visual Studio Code.

   Nota

   Questa soluzione contiene pagine che non sono nella versione dell'app utilizzata negli esercizi precedenti.

3. Nella finestra Esplora soluzioni aprire la cartella Pagine. Oltre ai file MoonPhasePage, SunrisePage e AboutPage questa cartella contiene altre due pagine:

   • AstronomicalBodiesPage. Questa pagina contiene quattro pulsanti che consentono all'utente di selezionare i dettagli per il Sole, la Luna, la Terra o la Cometa di Halley. La versione corrente dell'app è semplicemente un modello di verifica. In futuro, questa pagina consentirà all'utente di selezionare da un elenco più amplio.

   • AstronomicalBodyPage. Questa pagina viene utilizzata per visualizzare le informazioni per un corpo astronomico.

La pagina AstronomicalBodiesPage è già stata aggiunta come una scheda sulla pagina che viene visualizzata quando si fa clic sul riquadro a comparsa Astronomia.

Aggiungere una route per la pagina dei dettagli

1. Per passare a AstronomicalBodyPage, devi configurare una route registrandola nel costruttore della classe AppShell:

   public AppShell()
   {
       InitializeComponent();
   
       Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
   }
   

Passare alla pagina dei dettagli

1. Ora è necessario eseguire la navigazione. In AstronomicalBodiesPage.xaml.cs, crea gestori dell’evento clic per ogni Button nella pagina.

   public AstronomicalBodiesPage()
   {
       InitializeComponent();
   
       btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
       btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
       btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
       btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails");
   }
   

   Ogni volta che fai clic su Button, l'app accede alla pagina AstronomicalBodyPage. Ma è ancora necessario inviare il tipo di corpo astronomico da visualizzare.

2. Per inviare dati a AstronomicalBodyPage, aggiungere una stringa di parametro di query alle informazioni di routing. La stringa è del formato ?astroName=astroBodyToDisplay.

   btnComet.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=comet");
   btnEarth.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=earth");
   btnMoon.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=moon");
   btnSun.Clicked += async (s, e) => await Shell.Current.GoToAsync("astronomicalbodydetails?astroName=sun");
   

3. Per ricevere i dati su AstronomicalBodyPage, creare prima una proprietà a livello di classe per contenere i dati in ingresso. Assegna il nomeAstroName.

   string astroName;
   public string AstroName
   {
       get => astroName;
       set
       {
           astroName = value;
   
           // this is a custom function to update the UI immediately
           UpdateAstroBodyUI(astroName);
       } 
   }
   

   Qui, il UpdateAstroBodyUI(astroName) è una funzione helper usata per aggiornare l'interfaccia utente immediatamente quando la proprietà AstroName è impostata.

4. Quindi è necessario decorare la classe con un'annotazione che associa il parametro della query in ingresso alla proprietà creata.

   [QueryProperty(nameof(AstroName), "astroName")]
   public partial class AstronomicalBodyPage
   { 
       ...
   }
   

5. Avviare l'app e selezionare la scheda denominata Corpi.

6. Selezionare il pulsante Sun. Dovrebbero essere visualizzati i dettagli relativi al Sole. La barra di spostamento deve contenere una freccia indietro che consente all'utente di tornare all'elenco dei corpi. Le schede rimanenti sono ancora visibili e attive:

   

7. Chiudi l'app e torna a Visual Studio o Visual Studio Code.