Cvičení: Použití stránek s kartami s navigačními stránkami

Dokončeno

V aplikaci astronomie budete požádáni o přidání stránek, které uživateli umožní vybrat různé astronomické těleso a zobrazit jejich podrobnosti. Může existovat libovolný počet těl, takže vytvoření tabulátoru pro každé tělo není proveditelný přístup. Pokud tedy chcete uživateli povolit výběr textu, který chcete zobrazit, rozhodnete se přidat další stránku obsahující seznam. Uživatel může vybrat tělo z tohoto seznamu a aplikace zobrazí podrobnosti tohoto textu na nové stránce. Stránka seznamu slouží jako kořenová stránka pro navigaci v zásobníku. Stránku seznamu přidáte jako kartu v existujícím uživatelském rozhraní.

Otevření úvodního řešení

1. Přejděte do složky cvičení3 v úložišti, které jste naklonovali na začátku tohoto modulu, a přejděte do spouštěcí složky.

2. Pomocí sady Visual Studio otevřete řešení Astronomy.sln nebo složku v editoru Visual Studio Code.

   Poznámka:

   Toto řešení obsahuje stránky, které nejsou ve verzi aplikace, kterou jste použili v předchozích cvičeních.

3. V okně Průzkumník řešení otevřete složku Pages. Kromě souborů MoonPhasePage, SunrisePage a AboutPage obsahuje tato složka dvě další stránky:

   • AstronomickýBodiesPage. Tato stránka obsahuje čtyři tlačítka, která uživateli umožňují vybrat podrobnosti o Slunci, Měsíci, Zemi nebo Halleyově kometě. Aktuální verze aplikace je jednoduše důkazem konceptu. V budoucnu tato stránka umožňuje uživateli vybrat z většího seznamu.

   • AstronomickýBodyPage. Tato stránka slouží k zobrazení informací o astronomickém těle.

AstronomickýBodiesPage je již přidán jako karta na stránce, která se zobrazí při kliknutí na astronomický informační panel.

Přidání trasy pro stránku podrobností

1. Pokud chcete přejít na AstronomickýBodyPage, musíte nastavit trasu tak, že ji zaregistrujete v konstruktoru třídy AppShellu :

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

Přechod na stránku podrobností

1. Teď musíme provést navigaci. V AstronomicalBodiesPage.xaml.cs vytvořte obslužné rutiny klikni a události pro každou Button stránku.

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

   Button Pokaždé, když kliknete, aplikace přejde na stránku AstronomBodyPage. Ale stále potřebujeme poslat, jaký typ astronomického těla se má zobrazit.

2. Chcete-li odeslat data do AstronomBodyPage, přidejte řetězec parametru dotazu do informací o směrování. Řetězec je ve formuláři ?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. Chcete-li přijímat data na AstronomBodyPage, nejprve vytvořte vlastnost na úrovni třídy pro uložení příchozích dat. Pojmenujte ho 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) Zde je pomocná funkce použitá k okamžité aktualizaci uživatelského rozhraní při AstroName nastavení vlastnosti.

4. Pak musíte třídu ozdobit poznámkou, která mapuje parametr příchozího dotazu na vlastnost, kterou jste vytvořili.

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

5. Spusťte aplikaci a vyberte kartu s názvem Tělo.

6. Vyberte tlačítko Slunce. Měly by se zobrazit podrobnosti o slunci. Navigační panel by měl obsahovat šipku zpět, která uživateli umožní vrátit se do seznamu těl. Zbývající karty jsou stále viditelné a aktivní:

   

7. Zavřete aplikaci a vraťte se do sady Visual Studio nebo Visual Studio Code.