Ćwiczenie: Zaimplementuj nawigację za pomocą kart

W aplikacji astronomicznej poproszono Cię o połączenie kart z menu wysuwanym, aby ułatwić nawigację między różnymi ekranami.

Pierwszą rzeczą, jaką postanawiasz zrobić, jest usunięcie wszystkich stron z menu wysuwanego i dodanie ich do TabBar, aby zobaczyć, jakie sprawia wrażenie aplikacja.

Dodawanie paska tabulatora

1. W oknie Eksplorator rozwiązań otwórz stronę AppShell.xaml.

2. Na stronie znaczników XAML usuń wszystkie elementy wewnątrz elementu <Shell>.

3. Utwórz element <TabBar> i pusty element <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. Następnie dodaj element ShellContent do elementu Tab i ustaw jego zawartość na MoonPhasePage.

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

5. Teraz nadaj karcie tytuł, który będzie wyświetlany, oraz ikonę za pomocą właściwości Title i Icon.

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

6. Dodaj kolejny Tab dla SunrisePage. Ustaw Title na wschód słońca, a Icon na sun.png. Gotowy kod XAML wygląda następująco:

   <?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. Uruchom aplikację, aby zobaczyć, jak wygląda.

   

Połącz karty z menu wysuwanym

Decydujesz, że sensowne jest umieszczenie stron faz księżyca i wschodu słońca na tej samej karcie. Warto również zachować oddzielną stronę O nas. Postanawiasz więc ponownie dodać wysuwane menu. Pierwszy element wysuwany wyświetla stronę karty, a drugą stronę z informacjami.

1. Usuń element TabBar oraz wszystkie zawarte w nim elementy podrzędne.

2. W jego miejsce dodaj <FlyoutItem>. Ustaw jej Title właściwość na Astronomia, a jej ikonę na moon.png.

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

3. W elemencie <FlyoutItem> dodaj element <ShellContent>, który wskazuje na MoonPhasePage. Ustaw jej Title właściwość na Moon Phase i Icon właściwość na moon.png.

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

4. W tym samym pliku <FlyoutItem> dodaj kolejny <ShellContent>, aby wskazywał na SunrisePage. Ustaw jej Title właściwość na Sunrise i Icon właściwość 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>
   

   Teraz dotknięcie tego elementu menu wysuwanego wyświetla stronę z dwiema kartami.

5. Aby utworzyć nowy element menu wysuwanego wskazujący na AboutPage, dodaj nowy <FlyoutItem>. Ustaw jej Title właściwość na About, a Icon właściwość na question.png.

6. W obrębie <FlyoutItem> dodaj <ShellContent>, który wskazuje na AboutPage.

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

7. Ponownie uruchom aplikację. Powinny być widoczne dwa elementy w menu wysuwanym. Pierwsza otwiera kartę zawierającą elementy MoonPhasePage i SunrisePage. Drugi wyświetla tylko AboutPage.

Potrzebujesz pomocy?

Końcowy kod XAML dla pliku AppShell.xaml powinien wyglądać następująco:

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