Cvičení: Implementace kontextové navigace

Dokončeno

V ukázkovém scénáři máte aplikaci .NET MAUI, která obsahuje stránky pro zobrazení informací o astronomických tělech, fázích měsíce a časech východů/západu slunce. Aplikace obsahuje také stránku O aplikaci. V současné době jsou tyto stránky samostatné, ale chcete poskytnout logický způsob, jak se uživatel mezi nimi pohybovat.

V tomto cvičení přidáte do aplikace kontextové navigace.

Tento modul používá sadu .NET 10.0 SDK. Spuštěním následujícího příkazu v upřednostňovaném příkazovém terminálu se ujistěte, že máte nainstalované rozhraní .NET 10.0:

dotnet --list-sdks

Zobrazí se výstup podobný následujícímu příkladu:

9.0.100 [C:\Program Files\dotnet\sdk]
10.0.100 [C:\Program Files\dotnet\sdk]

Ujistěte se, že je uvedená verze, na 10 které začíná. Pokud není uvedený žádný nebo příkaz nebyl nalezen, nainstalujte nejnovější sadu .NET 10.0 SDK.

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

1. Naklonujte nebo stáhněte úložiště cvičení.

   Poznámka:

   Nejlepší je naklonovat nebo stáhnout obsah cvičení do krátké cesty ke složce, jako je C:\dev, aby se zabránilo překročení maximální délky cesty vygenerovaných sestavením.

2. Přejděte do složky cvičení1 v naklonovaném úložišti a přejděte do počáteční složky.

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

4. V okně Průzkumník řešení rozbalte v projektu Astronomy složku Pages. Tato složka obsahuje následující stránky:

   • AboutPage. Tato stránka zobrazuje informace o aplikaci.
   • MoonPhasePage. Tato stránka zobrazuje konkrétní informace o fázích Měsíce, jak je vidět ze Země.
   • SunrisePage. Tato stránka zobrazuje časy východů a západu slunce pro místa na Zemi. Data poskytuje webová služba Sunrise Sunset.

5. Sestavte a spusťte aplikaci. Když se aplikace spustí, zobrazí se stránka MoonPhasePage , ale v současné době neexistuje žádný způsob, jak uživateli umožnit navigaci na další stránky.

   Následující obrázek ukazuje aplikaci spuštěnou v emulátoru Androidu:

   

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

Přidání navigačního rámečku

1. V okně Průzkumník řešení otevřete stránku AppShell.xaml .

2. V editoru revizí XAML ohraničí existující <ShellContent> položku pomocí ovládacího <FlyoutItem>prvku . Title Nastavte vlastnost <Flyout> položky na fázi Měsíce. Revize by měla vypadat takto:

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

3. FlyoutIcon Přidejte do <Shell> uzlu vlastnost pro zobrazení obrázku. Ve výchozím nastavení se zobrazují tři vodorovné pruhy, ale můžeme ho změnit tak, aby vypadala tak, jak se nám líbí. Revize by měla vypadat takto:

   <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">
   

4. Aplikaci spusťte. Teď byste měli vidět obrázek měsíce v levém horním rohu aplikace.

   

   Klepněte na ikonu a zobrazí se informační panel.

   

5. Teď přidejte další možnosti informačního rámečku. Vytvořte nový <FlyoutItem> pod právě vytvořeným objektem a nastavte ho Title na Východ slunce. Měl ShellContent by odkazovat na SunrisePage stránku.

6. Přidejte další <FlyoutItem>, nastavte jeho název na O aplikaci. Tentokrát nastavte ShellContent hodnotu AboutPage. Xaml pro tyto dvě položky by měl vypadat takto:

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

7. Spusťte aplikaci znovu a v informačním rámečku jsou tři možnosti. Klepnutím na položku informačního rámečku se zobrazí příslušná stránka.

   

   Poznámka:

   Pokud používáte jinou platformu než Windows, možná budete muset povolit oprávnění k poloze pro aplikaci na této platformě, aby stránka Východ/Západ slunce fungovala . Například na zařízení s Androidem nastavte přístup k poloze na Povolit jenom při používání aplikace.

Přidání ikon

Možná jste si všimli, že položky s rozevíracím rámečkem vypadají trochu prázdné. Pomocí vlastnosti můžete do kontextových položek Icon přidat ikony.

Některé obrázky už byly přidány do složky Resources\Images , kterou můžete použít.

1. Icon Nastavte vlastnost prvního FlyoutItem na moon.png.

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

2. Opakujte pro ostatní 2 kontextové položky pomocí sun.png a 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>
   

3. Spusťte aplikaci a otevřete informační nabídku. Každá položka s informačním rámečkem má teď přidruženou ikonu.

   

Přidání informačního rámečku

Položky informačního rámečku jsou v horní části kontextové nabídky, což ztěžuje jejich rozlišení. Můžeme přidat nějaké místo na vrchol, a dokonce i celý View pomocí .<Shell.FlyoutHeader>

1. Přidejte záhlaví informačního rámečku <Shell> jako podřízenou část uzlu:

   <Shell.FlyoutHeader>
   </Shell.FlyoutHeader>
   

2. Můžete vytvořit libovolnou hierarchii zobrazení, kterou si přejete v rámci <Shell.FlyoutHeader>. Grid Pojďme si dát s sebou .Image

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