Vorige

Volgende

Oefening: Pagina's met tabbladen gebruiken met navigatiepagina's

Voltooid

In de astronomie-app bent u gevraagd pagina's toe te voegen waarmee de gebruiker verschillende astronomische lichamen kan selecteren en hun details kan weergeven. Er kan een willekeurig aantal lichamen zijn, dus het maken van een tabblad voor elk lichaam is geen haalbare benadering. Om de gebruiker in staat te stellen te selecteren welke hoofdtekst moet worden weergegeven, besluit u een andere pagina met een lijst toe te voegen. De gebruiker kan een hoofdtekst in deze lijst selecteren en de app geeft de details voor die hoofdtekst weer op een nieuwe pagina. De lijstpagina fungeert als hoofdpagina voor stacknavigatie. U voegt de lijstpagina toe als een tabblad in de bestaande gebruikersinterface.

Open de startersoplossing

1. Ga naar de map oefening3 in de opslagplaats die u aan het begin van deze module hebt gekloond en ga vervolgens naar de beginmap .

2. Gebruik Visual Studio om de oplossing Astronomie.sln of de map in Visual Studio Code te openen.

   Notitie

   Deze oplossing bevat pagina's die zich niet in de versie van de app bevinden die u in de vorige oefeningen hebt gebruikt.

3. Open de map Pagina's in het venster Solution Explorer. Naast de bestanden MoonPhasePage, SunrisePage en AboutPage bevat deze map nog twee pagina's:

   • AstronomischeBodiesPage. Deze pagina bevat vier knoppen waarmee de gebruiker de details voor de zon, de maan, de aarde of de komeet van Halley kan selecteren. De huidige versie van de app is gewoon een proof-of-concept. Op deze pagina kan de gebruiker in de toekomst een keuze maken uit een grotere lijst.

   • AstronomischBodyPage. Deze pagina wordt gebruikt om de informatie voor een astronomisch lichaam weer te geven.

De AstronomiePagina is al toegevoegd als een tabblad op de pagina die verschijnt wanneer op de flyout Astronomie wordt geklikt.

Een route voor de detailpagina toevoegen

1. Als u naar de AstronomischeBodyPage wilt navigeren, moet u een route instellen door deze te registreren in de constructor van de AppShell-klasse :

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

Ga naar de detailpagina

1. Nu moeten we de navigatie uitvoeren. Maak in AstronomischeBodiesPage.xaml.cs klikgebeurtenishandlers voor elk Button op de 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");
   }
   

   Wanneer erop Button wordt geklikt, gaat de app naar de pagina AstronomischBodyPage . Maar we moeten nog steeds sturen welk type astronomisch lichaam moet worden weergegeven.

2. Als u gegevens wilt verzenden naar de AstronomischeBodyPage, voegt u een queryparametertekenreeks toe aan de routeringsinformatie. De tekenreeks is van het formulier ?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. Als u de gegevens op de AstronomischeBodyPage wilt ontvangen, maakt u eerst een eigenschap op klasseniveau om de binnenkomende gegevens te bewaren. Geef deze de naam AstroName.

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

   Hier is de UpdateAstroBodyUI(astroName) helperfunctie die wordt gebruikt om de gebruikersinterface onmiddellijk bij te werken wanneer de AstroName eigenschap is ingesteld.

4. Vervolgens moet u de klasse versieren met een aantekening waarmee de binnenkomende queryparameter wordt toegewezen aan de eigenschap die u hebt gemaakt.

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

5. Start de app en selecteer het tabblad getiteld: Lichamen.

6. Selecteer de knop Zon . De details voor de zon moeten worden weergegeven. De navigatiebalk moet een pijl-terug bevatten waarmee de gebruiker terug kan keren naar de lijst met lichamen. De resterende tabbladen zijn nog steeds zichtbaar en actief:

   

7. Sluit de app en ga terug naar Visual Studio of Visual Studio Code.

Doorgaan