Oefening: Flyoutnavigatie implementeren

7 minuten

In het voorbeeldscenario hebt u een TENANT-app die pagina's bevat voor het weergeven van informatie over astronomische lichamen, de fasen van de maan en de tijden van zonsopgang/zonsondergang. De app bevat ook een infopagina. Deze pagina's zijn momenteel allemaal zelfstandig, maar u wilt een logische manier bieden om tussen de pagina's te schakelen.

In deze oefening voegt u flyoutnavigatie toe aan de app.

In deze module wordt de .NET 8.0 SDK gebruikt. Zorg ervoor dat .NET 8.0 is geïnstalleerd door de volgende opdracht uit te voeren in de opdrachtterminal van uw voorkeur:

dotnet --list-sdks

Uitvoer die vergelijkbaar is met het volgende voorbeeld wordt weergegeven:

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

Zorg ervoor dat er een versie wordt vermeld die begint met 8 . Als er geen wordt vermeld of de opdracht niet wordt gevonden, installeert u de meest recente .NET 8.0 SDK.

Open de startersoplossing

Kloon of download de oefeningsopslagplaats.

Notitie

Het is raadzaam om de inhoud van de oefening te klonen of te downloaden naar een kort mappad, zoals C:\dev, om te voorkomen dat door de build gegenereerde bestanden de maximale padlengte overschrijden.
Ga naar de map oefening1 in de gekloonde opslagplaats en ga vervolgens naar de beginmap .
Gebruik Visual Studio om de oplossing Astronomie.sln of de map in Visual Studio Code te openen.
Vouw in het venster Solution Explorer in het project Astronomie de map Pagina's uit. Deze map bevat de volgende pagina's:
- AboutPage. Deze pagina wordt weergegeven over informatie voor de app.
- MoonPhasePage. Op deze pagina wordt specifieke informatie weergegeven over de fasen van de maan, zoals te zien is vanaf de aarde.
- SunrisePage. Op deze pagina worden zonsopkomst- en zonsondergangtijden weergegeven voor locaties op aarde. De gegevens worden geleverd door de Sunrise Sunset-webservice.
Bouw de app en voer deze uit. Wanneer de app wordt gestart, wordt de MoonPhasePage weergegeven, maar momenteel is er geen manier om de gebruiker in staat te stellen naar de andere pagina's te navigeren.

In de volgende afbeelding ziet u de app die wordt uitgevoerd op de Android-emulator:
Sluit de app en ga terug naar Visual Studio of Visual Studio Code.

Open in het venster Solutions Explorer de pagina AppShell.xaml .
Plaats in de XAML-opmaakeditor het bestaande <ShellContent> item om met een <FlyoutItem>. Stel de Title eigenschap van het <Flyout> item in op Maanfase. De opmaak moet er als volgt uitzien:
```
<FlyoutItem Title="Moon Phase">
    <ShellContent
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/> 
</FlyoutItem>
```

Voeg een FlyoutIcon eigenschap toe aan het <Shell> knooppunt om een afbeelding weer te geven. Standaard worden er drie horizontale balken weergegeven, maar we kunnen deze wijzigen in wat we willen. De opmaak moet er als volgt uitzien:

<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages"
    FlyoutIcon="moon.png">

Voer de toepassing uit. U ziet nu een maanafbeelding in de linkerbovenhoek van de app.

Tik op het pictogram en de flyout wordt weergegeven.
Voeg nu meer flyoutopties toe. Maak een nieuw <FlyoutItem> onder de nieuwe die u zojuist hebt gemaakt en stel deze in Title op Sunrise. Het ShellContent moet verwijzen naar de SunrisePage pagina.

Voeg nog een <FlyoutItem>toe, stel de titel ervan in op Info. Deze keer stelt u het in ShellContent op AboutPage. De XAML voor deze twee items moet er als volgt uitzien:

<FlyoutItem Title="Sunrise">
    <ShellContent
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

Voer de app opnieuw uit en nu zijn er drie opties in de flyout. Als u op het flyout-item tikt, wordt de desbetreffende pagina weergegeven.

Notitie

Als u werkt op een ander platform dan Windows, moet u mogelijk locatiemachtigingen inschakelen voor uw app op dat platform, zodat de pagina Sunrise/Sunset Times werkt. Stel bijvoorbeeld op een Android-apparaat locatietoegang in op Alleen toestaan tijdens het gebruik van de app.

Pictogrammen toevoegen

Mogelijk hebt u gezien dat de flyout-items er leeg uitzien. U kunt pictogrammen toevoegen aan de flyout-items met behulp van de Icon eigenschap.

Sommige afbeeldingen zijn al toegevoegd aan de map Resources\Images die u kunt gebruiken.

Stel de eigenschap van de Icon eerste FlyoutItem in op moon.png.

<FlyoutItem Title="Moon Phase" Icon="moon.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:MoonPhasePage}" />
</FlyoutItem>

Herhaal dit voor de andere twee flyoutitems, respectievelijk met sun.png en question.png .

<FlyoutItem Title="Sunrise" Icon="sun.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

Voer de app uit en open de flyout. Aan elk flyout-item is nu een pictogram gekoppeld.

De flyout-items bevinden zich boven aan het flyoutmenu, waardoor ze moeilijk te onderscheiden zijn. We kunnen wat ruimte toevoegen aan de bovenkant, en zelfs een hele met View behulp van de <Shell.FlyoutHeader>.

Voeg een flyoutheader toe als onderliggend element van het <Shell> knooppunt:
```
<Shell.FlyoutHeader>
</Shell.FlyoutHeader>
```

U kunt elke gewenste weergavehiërarchie maken in de <Shell.FlyoutHeader>. Laten we eens Grid met een Image.

<Shell.FlyoutHeader>
    <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
        <Image Source="moon.png" />
    </Grid>
</Shell.FlyoutHeader>

Screenshot of the app running with the flyout open, this time there's a header on the flyout with an icon of the moon.

Doorgaan

Open de startersoplossing

Flyoutnavigatie toevoegen

Pictogrammen toevoegen

Een flyout-header toevoegen

Feedback