Övning: Använda flikar med navigeringssidor

Slutförd

I astronomiappen uppmanas du att lägga till sidor som gör det möjligt för användaren att välja olika astronomiska kroppar och visa sin information. Det kan finnas valfritt antal kroppar, så att skapa en flik för varje brödtext är inte en genomförbar metod. För att göra det möjligt för användaren att välja vilken brödtext som ska visas bestämmer du dig därför för att lägga till en annan sida som innehåller en lista. Användaren kan välja en brödtext i den här listan och appen visar information om brödtexten på en ny sida. Listsidan fungerar som en rotsida för stacknavigering. Du lägger till listsidan som en flik i det befintliga användargränssnittet.

Öppna startlösningen

1. Gå till mappen exercise3 på lagringsplatsen som du klonade i början av den här modulen och gå sedan till startmappen.

2. Använd Visual Studio för att öppna den Astronomy.sln lösningen eller mappen i Visual Studio Code.

   Kommentar

   Den här lösningen innehåller sidor som inte finns i den version av appen som du använde i föregående övningar.

3. Öppna mappen Sidor i solution explorer-fönstret. Förutom filerna MoonPhasePage, SunrisePage och AboutPage innehåller den här mappen ytterligare två sidor:

   • AstronomicalBodiesPage. Den här sidan innehåller fyra knappar som gör att användaren kan välja information för solen, månen, jorden eller Halleys komet. Den aktuella versionen av appen är helt enkelt ett konceptbevis. I framtiden gör den här sidan att användaren kan välja från en större lista.

   • AstronomicalBodyPage. Den här sidan används för att visa informationen för en astronomisk brödtext.

AstronomicalBodiesPage har redan lagts till som en flik på sidan som visas när den utfällbara menyn Astronomi klickas.

Lägga till en väg för informationssidan

1. Om du vill navigera till AstronomicalBodyPage måste du konfigurera en väg genom att registrera den i konstruktorn för AppShell-klassen :

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

Gå till informationssidan

1. Nu måste vi utföra navigeringen. I AstronomicalBodiesPage.xaml.cs skapar du klickhändelsehanterare för var och en Button på sidan.

   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");
   }
   

   När en Button klickas navigerar appen till sidan AstronomicalBodyPage . Men vi måste fortfarande skicka vilken typ av astronomisk kropp som ska visas.

2. Om du vill skicka data till AstronomicalBodyPage lägger du till en frågeparametersträng i routningsinformationen. Strängen är av formuläret ?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. Om du vill ta emot data på AstronomicalBodyPage skapar du först en egenskap på klassnivå för att lagra inkommande data. Ge den namnet AstroName.

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

   UpdateAstroBodyUI(astroName) Här är en hjälpfunktion som används för att uppdatera användargränssnittet omedelbart när AstroName egenskapen har angetts.

4. Sedan måste du dekorera klassen med en anteckning som mappar den inkommande frågeparametern till den egenskap som du skapade.

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

5. Starta appen och välj fliken med titeln: Bodies.

6. Välj knappen Sol . Detaljerna för solen bör visas. Navigeringsfältet ska innehålla en bakåtpil som gör att användaren kan återgå till listan med kroppar. De återstående flikarna är fortfarande synliga och aktiva:

   

7. Stäng appen och gå tillbaka till Visual Studio eller Visual Studio Code.