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

Nawigacja na karcie to wzorzec nawigacji, w którym pasek tabulacji (wiersz kontrolek z możliwością dotykania) jest trwale wyświetlany w górnej lub dolnej części 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 użycie nawigacji na karcie w aplikacji zegara systemu iOS. Ikony wyróżnione w bazie strony umożliwiają przełączanie się między różnymi widokami. Te ikony odpowiadają kartom, a widoki są stronami kart:

Ponieważ pasek tabulacji jest zawsze widoczny, nawigacja na karcie umożliwia użytkownikom szybkie przełączanie się między zawartoś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 zawiera więcej obszarów dostępu 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 wzorca nawigacji, takiego jak nawigacja elementów wysuwanych. Ponadto nawigacja na kartach nie jest najlepszą opcją, jeśli dane tworzy naturalną hierarchię szczegółów wzorca. W takich przypadkach należy rozważyć nawigację stosu.

Nawigacja na karcie w aplikacji MAUI platformy .NET

Obiekt służy TabBar do implementowania nawigacji na kartach w aplikacji powłoki .NET MAUI. Obiekt TabBar wyświetla zestaw kart i automatycznie przełącza wyświetlaną zawartość po wybraniu karty przez użytkownika. Na poniższej ilustracji przedstawiono obszary interfejsu użytkownika.

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

Tworzenie elementu TabbedPage

Wystąpienie można utworzyć TabBar jako element podrzędny Shell klasy. Dodaj Tab obiekty jako obiekty podrzędne do obiektu zgodnie z potrzebami TabBar . Tab W obiekcie ShellContent należy ustawić obiekt na ContentPage obiekt.

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

Karty w menu wysuwanym

Element wysuwany może otwierać stronę z paskiem tabulacji, który wyświetla co najmniej jedną kartę.

Aby zaimplementować ten projekt, dodaj <ShellContent> element w obrębie każdej wyświetlonej <FlyoutItem> karty.

Ustaw kontrolkę Title i Icon na , <ShellContent> aby kontrolować 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>