Ćwiczenie: używanie stron z kartami ze stronami nawigacji

W aplikacji astronomicznej zostanie wyświetlona prośba o dodanie stron, które umożliwiają użytkownikowi wybieranie różnych ciał astronomicznych i wyświetlanie ich szczegółów. Może istnieć dowolna liczba ciał, więc utworzenie karty dla każdego ciała nie jest wykonalne. W związku z tym, aby umożliwić użytkownikowi wybranie treści do wyświetlenia, należy dodać kolejną stronę zawierającą listę. Użytkownik może wybrać treść z tej listy, a aplikacja wyświetli szczegóły dotyczące tej treści na nowej stronie. Strona listy działa jako strona główna na potrzeby nawigacji stosu. Stronę listy można dodać jako kartę w istniejącym interfejsie użytkownika.

Otwieranie rozwiązania startowego

1. Przejdź do folderu exercise3 w repozytorium sklonowanym na początku tego modułu, a następnie przejdź do folderu startowego.

2. Użyj programu Visual Studio, aby otworzyć rozwiązanie Astronomy.sln lub folder w programie Visual Studio Code.

   Uwaga

   To rozwiązanie zawiera strony i style, które nie są w wersji aplikacji użytej w poprzednich ćwiczeniach.

3. W oknie Eksplorator rozwiązań otwórz folder Pages. Oprócz plików MoonPhasePage, SunrisePage i AboutPage ten folder zawiera jeszcze dwie strony:

   • AstronomiczneBodiesPage. Ta strona zawiera cztery przyciski, które umożliwiają użytkownikowi wybranie szczegółów Słońca, Księżyca, Ziemi lub Komety Halleya. Bieżąca wersja aplikacji jest po prostu weryfikacją koncepcji. W przyszłości ta strona umożliwia użytkownikowi wybranie większej listy.

   • Astronomicznastrona. Ta strona służy do wyświetlania informacji o ciele astronomicznym.

Strona Astronomiczna jest już dodawana jako karta na stronie wyświetlanej po kliknięciu wysuwanego menu astronomicznego.

Dodawanie trasy dla strony szczegółów

1. Aby przejść do strony AstronomicznaBodyPage, musisz skonfigurować trasę, rejestrując ją w konstruktorze klasy programu AppShell :

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

Przejdź do strony szczegółów

1. Teraz musimy wykonać nawigację. W AstronomicalBodiesPage.xaml.cs utwórz programy obsługi zdarzeń kliknięć dla każdego Button na stronie.

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

   Za każdym razem, gdy zostanie kliknięty Button , aplikacja przejdzie do strony AstronomicznaStrona . Ale nadal musimy wysłać jaki rodzaj ciała astronomicznego do wyświetlenia.

2. Aby wysłać dane do aplikacji AstronomicznaBodyPage, dodaj ciąg parametru zapytania do informacji o routingu. Ciąg ma postać ?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. Aby odbierać dane na stronie AstronomicznaBodyPage, najpierw utwórz właściwość na poziomie klasy do przechowywania danych przychodzących. Nazwij go 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) W tym miejscu element jest funkcją pomocnika używaną do natychmiastowej aktualizacji interfejsu użytkownika po ustawieniu AstroName właściwości.

4. Następnie należy ozdobić klasę adnotacją, która mapuje parametr zapytania przychodzącego na utworzoną właściwość.

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

5. Uruchom aplikację i wybierz kartę zatytułowaną Ciała.

6. Wybierz przycisk Sun (Słońce). Powinny zostać wyświetlone szczegóły słońca. Pasek nawigacyjny powinien zawierać strzałkę wstecz, która umożliwia użytkownikowi powrót do listy treści. Pozostałe karty są nadal widoczne i aktywne:

   

7. Zamknij aplikację i wróć do programu Visual Studio lub Visual Studio Code.