Übung: Verwenden von Registerkartenseiten mit Navigationsseiten

In der Astronomie-App werden Sie gebeten, Seiten hinzuzufügen, die es dem Benutzer ermöglichen, verschiedene astronomische Körper auszuwählen und deren Details anzuzeigen. Es kann eine beliebige Anzahl von Himmelskörper existieren, weshalb es nicht sinnvoll ist, für jeden Himmelskörper eine eigene Registerkarte zu erstellen. Damit der Benutzer auswählen kann, welchen Körper er sehen möchte, beschließen Sie, eine weitere Seite mit einer Liste hinzuzufügen. Der Benutzer kann in dieser Liste einen Himmelskörper auswählen, und die App zeigt die Details für diesen Textkörper auf einer neuen Seite an. Die Listenseite dient als Stammseite für die Stapelnavigation. Sie fügen die Listenseite als Registerkarte in die bestehende Benutzeroberfläche ein.

Öffnen der Startprojektmappe

1. Wechseln Sie zum Ordner exercise3 im Repository, das Sie zu Beginn dieses Moduls geklont haben, und wechseln Sie dann zum Ordner start.

2. Verwenden Sie Visual Studio, um die Lösung Astronomy.sln oder den Ordner in Visual Studio Code zu öffnen.

   Hinweis

   Diese Lösung beinhaltet Seiten und Stile, die nicht in der Version der App enthalten sind, die Sie in den vorherigen Übungen verwendet haben.

3. Öffnen Sie im Fenster „Projektmappen-Explorer“ den Ordner Seiten. Dieser Ordner enthält neben den Dateien MoonPhasePage, SunrisePage und AboutPage zwei weitere Seiten:

   • AstronomicalBodiesPage. Diese Seite beinhaltet vier Schaltflächen, mit denen Sie die Details für die Sonne, den Mond, die Erde oder den Halleyschen Kometen auswählen können. Die aktuelle Version der App ist lediglich ein Proof of Concept. In Zukunft kann der Benutzer auf dieser Seite aus einer größeren Liste auswählen.

   • AstronomicalBodyPage. Diese Seite wird genutzt, um die Informationen zu einem astronomischen Körper anzuzeigen.

Die Seite AstronomicalBodiesPage ist bereits als Registerkarte auf der Seite hinzugefügt, die erscheint, wenn Sie auf das Flyout Astronomie klicken.

Hinzufügen einer Route für die Detailseite

1. Um zur AstronomicalBodyPage zu navigieren, müssen Sie eine Route einrichten, indem Sie sie im Konstruktor der AppShell-Klasse registrieren:

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

Navigation zur Detailseite

1. Jetzt müssen wir die Navigation ausführen. Erstellen Sie in AstronomicalBodiesPage.xaml.cs Klick-Ereignishandler für die einzelnen Button der Seite.

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

   Wenn auf eine Button geklickt wird, navigiert die App zur Seite AstronomicalBodyPage. Wir müssen jedoch noch angeben, welche Art von astronomischem Körper angezeigt werden soll.

2. Um Daten an die AstronomicalBodyPage zu senden, fügen Sie den Routinginformationen eine Abfrageparameterzeichenfolge hinzu. Die Zeichenfolge hat die Form ?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. Um die Daten auf der AstronomicalBodyPage zu empfangen, erstellen Sie zuerst eine Eigenschaft auf Klassenebene, die die eingehenden Daten enthält. Nenne es AstroName.

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

   Hier ist UpdateAstroBodyUI(astroName) eine Hilfsfunktion, die verwendet wird, um die Benutzeroberfläche sofort zu aktualisieren, wenn die Eigenschaft „AstroName“ festgelegt ist.

4. Dann müssen Sie die Klasse mit einer Anmerkung versehen, die den eingehenden Abfrageparameter der Eigenschaft zuordnet, die Sie erstellt haben.

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

5. Starten Sie die App, und wählen Sie die Registerkarte Körper aus.

6. Wählen Sie die Schaltfläche Sonne aus. Es sollten die Details für die Sonne angezeigt werden. Die Navigationsleiste sollte einen Zurück-Pfeil enthalten, mit dem Benutzer*innen zur Liste der Himmelskörper zurückkehren kann. Die übrigen Registerkarten sind weiterhin sichtbar und aktiv:

   

7. Schließen Sie die App und kehren Sie zu Visual Studio oder Visual Studio Code zurück.