Implementowanie nawigacji na kartach za pomocą powłoki MAUI platformy .NET

Nawigacja kartami to wzorzec nawigacji, w którym pasek kart (rząd elementów dotykowych) jest stale wyświetlany u góry lub u dołu ekranu. Nawigacja na karcie udostępnia mechanizm wyboru między stronami w aplikacji wielostronicowej.

W tej lekcji dowiesz się, jak utworzyć aplikację, która implementuje nawigację na kartach.

Co to jest nawigacja na kartach?

W aplikacji korzystającej z nawigacji na karcie każda karta reprezentuje określoną sekcję lub stronę aplikacji. Użytkownicy wybierają karty na pasku karty, aby przechodzić między zawartością w aplikacji. Na przykład poniższa ilustracja przedstawia nawigację za pomocą kart w aplikacji Zegar w systemie iOS. Ikony wyróżnione u dołu strony pozwalają przełączać się między różnymi widokami. Te ikony odpowiadają zakładkom, a widoki to strony z kartami:

Ponieważ pasek kart jest zawsze widoczny, nawigacja za pomocą kart umożliwia użytkownikom szybkie przełączanie się między treścią w aplikacji. Nawigacja na karcie jest idealna, gdy aplikacja ma kilka sekcji, których użytkownik może często używać. Aplikacje zegara są doskonałym przykładem. Sekcje zegara, alarmu i stopera mogą być często używane.

Na urządzeniach przenośnych pasek kart zwykle ma ograniczoną ilość miejsca i może wyświetlać tylko stałą liczbę kart w zależności od rozmiaru i orientacji urządzenia. Zaleceniem jest użycie tylko trzech do czterech kart. Jeśli dołączysz więcej kart, nie masz gwarancji, że masz wystarczająco dużo miejsca, aby wyświetlić wszystkie karty na wszystkich urządzeniach. Systemy operacyjne obsługiwane przez program .NET MAUI umożliwiają przepełnienie obszaru. Ten obszar zapewnia więcej miejsca na dostęp do kart, które nie mieszczą się na ekranie. Jednak przejście do tych kart przepełnienia wymaga dodatkowych kroków przez użytkownika. Te sekcje są mniej wykrywalne.

Jeśli potrzebujesz więcej niż czterech kart, rozważ użycie innego schematu nawigacji, na przykład nawigacji z wysuwanym menu. Ponadto nawigacja za pomocą kart nie jest najlepszym rozwiązaniem, jeśli dane tworzą naturalną hierarchię typu master-detail. W takich przypadkach należy rozważyć nawigację opartą na stosie.

Nawigacja przy użyciu kart w aplikacji platformy .NET MAUI

Obiektu TabBar używa się do implementacji nawigacji za pomocą kart w aplikacji powłoki w platformie .NET MAUI. Obiekt TabBar wyświetla zestaw kart i automatycznie przełącza wyświetlaną zawartość, gdy użytkownik wybierze kartę. Na poniższej ilustracji przedstawiono obszary interfejsu użytkownika.

Aby używać kart w aplikacji powłoki .NET MAUI, utwórz instancję klasy TabBar jako element podrzędny klasy Shell. Następnie dodaj Tab obiekty do obiektu TabBar. W obiekcie Tab obiekt ShellContent należy ustawić na obiekt ContentPage.

Utwórz TabbedPage

Można utworzyć instancję TabBar jako element podrzędny klasy Shell. Dodaj obiekty Tab jako elementy podrzędne do TabBar w razie potrzeby. W obiekcie Tab obiekt ShellContent należy ustawić jako obiekt ContentPage.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <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>

Zakładki w menu wysuwanym

Element wysuwany może otwierać stronę zawierającą pasek kart, który wyświetla co najmniej jedną kartę.

Aby zastosować ten układ, dodaj element <ShellContent> w obrębie <FlyoutItem> dla każdej karty, którą chcesz wyświetlić.

Ustaw Title i Icon w elemencie <ShellContent>, aby określić tytuł i ikonę karty.

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