Ćwiczenie: Implementowanie nawigacji na karcie

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

Pierwszą rzeczą, którą chcesz zrobić, jest usunięcie wszystkich stron z wysuwanego elementu i dodanie ich do TabBarelementu , aby zobaczyć, jak działa 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 <Tab>element .

   <?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 Tab elementu i ustaw jego zawartość na MoonPhasePagewartość .

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

5. Teraz nadaj karcie tytuł do wyświetlenia i ikonę przy użyciu Title właściwości i Icon .

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

6. Dodaj inny Tab element dla elementu SunrisePage. Ustaw jego Title na wschód słońca i jego Icon wartość, aby 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.

   

Łączenie stron tabulacji z wysuwanym

Decydujesz, że na tej samej stronie karty ma sens faza księżyca i strony wschodu słońca. Warto również zachować oddzielną stronę. Dlatego decydujesz się dodać okno wysuwane z powrotem. Pierwszy element wysuwany wyświetla stronę karty, a drugą stronę z informacjami.

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

2. W swoim miejscu dodaj element w elemecie <FlyoutItem>. Ustaw jej Title właściwość na Astronomię i jej ikonę, aby moon.png.

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

3. W pliku <FlyoutItem>dodaj element wskazujący <ShellContent> element MoonPhasePagena . 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 <FlyoutItem>pliku dodaj inny element <ShellContent> , aby wskazać element 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 naciśnięcie tego elementu wysuwanego powoduje wyświetlenie strony karty z dwiema kartami.

5. Aby utworzyć nowy element wysuwany wskazujący element AboutPage, dodaj nowy <FlyoutItem>element . Ustaw jej Title właściwość na About (Informacje) i property (Informacje ) Icon na wartość question.png.

6. W tym <FlyoutItem>elemecie dodaj element wskazujący <ShellContent> element AboutPage.

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

7. Ponownie uruchom aplikację. Powinny zostać wyświetlone dwa elementy w wysuwaniu. Pierwszy otwiera stronę karty zawierającą elementy MoonPhasePage i SunrisePage. Drugi wyświetla AboutPage sam element .

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>