Cvičení: Implementace navigace na kartách

Dokončeno

V aplikaci astronomie se zobrazí výzva ke kombinování karet s informačním rámečkem, který vám pomůže s navigaci mezi různými stránkami.

První věc, kterou se rozhodnete udělat, je odebrat všechny stránky z informačního rámečku a přidat je do , TabBarabyste viděli, jak se aplikace cítí.

Přidání panelu karet

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

2. Na stránce kódu XAML odstraňte všechno uvnitř <Shell>souboru .

3. Vytvoření <TabBar> a prázdné <Tab>.

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">
   
       <TabBar>
           <Tab>
   
           </Tab>
       </TabBar>
   </Shell>
   

4. Dále přidejte ShellContent do Tab souboru a nastavte jeho obsah na MoonPhasePagehodnotu .

   <TabBar>
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
   </TabBar>
   

5. Teď dejte kartě název, který se má zobrazit, a ikonu pomocí vlastností Title a Icon vlastností.

   <Tab Title="Moon Phase" Icon="moon.png">
   

6. Přidejte do jiného Tab SunrisePagesouboru . Nastavte jeho Title východ slunce a jeho Icon sun.png. Dokončený XAML vypadá takto:

   <?xml version="1.0" encoding="UTF-8" ?>
   <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">  
   
       <TabBar>
           <Tab Title="Moon Phase" Icon="moon.png">
               <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
           </Tab>
           <Tab Title="Sunrise" Icon="sun.png">
               <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}"/>
           </Tab>
       </TabBar>
   </Shell>
   

7. Spusťte aplikaci a podívejte se, jak vypadá.

   

Kombinování stránek karet s informačním rámečkem

Rozhodnete se, že je vhodné mít na stejné stránce karty stránky fáze měsíce a východ slunce. Má také smysl udržovat stránku o stránce oddělené. Takže se rozhodnete informační nabídku přidat zpátky. První kontextová položka zobrazí stránku karty a druhou stránku s informacemi o stránce.

1. TabBar Odstraňte všechny podřízené položky obsažené v ní.

2. Na svém místě přidejte do souboru <FlyoutItem>. Nastavte jeho Title vlastnost na Astronomy a jeho ikonu na moon.png.

   <FlyoutItem Title="Astronomy" Icon="moon.png">
   
   </FlyoutItem>
   

3. V části <FlyoutItem>, přidejte <ShellContent> odkaz na MoonPhasePage. Nastavte jeho Title vlastnost na Fázi Měsíce a Icon vlastnost na moon.png.

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

4. Do stejného <FlyoutItem>souboru přidejte další <ShellContent> odkaz na SunrisePage. Nastavte jeho Title vlastnost na Východ slunce a Icon vlastnost na sun.png.

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

   Klepnutím na tuto položku informačního rámečku se teď zobrazí stránka karty se dvěma kartami.

5. Chcete-li vytvořit novou kontextovou položku, která odkazuje na AboutPagepoložku , přidejte novou <FlyoutItem>. Nastavte jeho Title vlastnost na About a Icon vlastnost na question.png.

6. V této <FlyoutItem>části přidejte odkaz <ShellContent> na AboutPage.

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

7. Spusťte aplikaci znovu. V informačním rámečku by se měly zobrazit dvě položky. První otevře stránku karty, která obsahuje MoonPhasePage SunrisePage Druhá zobrazí AboutPage sám sebe.

Potřebujete pomoc?

Konečný kód XAML pro AppShell.xaml by měl vypadat jako v tomto příkladu:

<?xml version="1.0" encoding="UTF-8" ?>
<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">

    <!-- You can add this back in for the header -->
    <!--<Shell.FlyoutHeader>
        <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
            <Image Source="moon.png"/>
        </Grid>
    </Shell.FlyoutHeader>-->

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

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

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