Implementieren der Registerkartennavigation mit der .NET MAUI-Shell

Die Registerkartennavigation ist ein Navigationsmuster, bei dem eine Registerkarte (eine Reihe von berührbaren Bedienelementen) dauerhaft oben oder unten auf dem Bildschirm angezeigt wird. Registerkartennavigation bietet einem Benutzer einen Mechanismus zur Auswahl zwischen Seiten in einer App mit mehreren Seiten.

In dieser Lektion erfahren Sie, wie Sie eine App erstellen, die Registerkartennavigation implementiert.

Was ist Registerkartennavigation?

In einer App, die Registerkartennavigation verwendet, stellt jede Registerkarte einen bestimmten Abschnitt oder eine bestimmte Seite der App dar. Benutzer wählen Registerkarten in der Registerkartenleiste aus, um zwischen den Inhalten in der Anwendung zu navigieren. Die folgende Abbildung zeigt beispielhaft die Verwendung der Registerkartennavigation in der iOS-App „Uhr“. Mit den unten auf der Seite hervorgehobenen Symbolen können Sie zwischen verschiedenen Ansichten wechseln. Diese Symbole entsprechen Registerkarten, und die Ansichten sind Registerkartenseiten:

Da die Registerkartenleiste immer sichtbar ist, kann der Benutzer über die Registerkartennavigation schnell zwischen den Inhalten in einer Anwendung wechseln. Die Registerkartennavigation ist ideal, wenn eine Anwendung aus mehreren Abschnitten besteht, die ein Benutzer wahrscheinlich häufig verwendet. Uhrenanwendungen sind ein hervorragendes Beispiel dafür. Die Uhr, der Wecker und die Stoppuhr werden wahrscheinlich häufig verwendet.

Auf mobilen Geräten ist für die Registerkartenleiste in der Regel nur wenig Platz vorhanden, und es können je nach Gerätegröße und Ausrichtung nur eine feste Anzahl von Registerkarten angezeigt werden. Es wird empfohlen, nur drei bis vier Registerkarten zu verwenden. Wenn Sie mehr Registerkarten hinzufügen, ist nicht garantiert, dass Sie genügend Platz haben, um alle Registerkarten auf allen Geräten anzuzeigen. Die von .NET MAUI unterstützten Betriebssysteme lassen einen Überlaufbereich zu. Dieser Bereich bietet einen „Mehr“-Bereich für den Zugriff auf Registerkarten, die nicht auf den Bildschirm passen. Die Navigation zu diesen Überlaufregisterkarten erfordert jedoch extra Schritte durch den Benutzer. Diese Abschnitte sind schwerer zu finden.

Wenn Sie mehr als vier Registerkarten benötigen, sollten Sie ein anderes Navigationsmuster, z. B. Flyoutelementnavigation, verwenden. Darüber hinaus ist die Registerkartennavigation nicht die beste Option, wenn Ihre Daten eine natürliche Master-Detail-Hierarchie bilden. In diesen Fällen sollten Sie die Stapelnavigation in Betracht ziehen.

Registerkartennavigation in einer .NET MAUI-App

Sie verwenden das TabBar-Objekt, um die Registerkartennavigation in einer .NET MAUI-Shell-App zu implementieren. Das TabBar-Objekt zeigt eine Reihe von Registerkarten an und wechselt automatisch den angezeigten Inhalt, wenn der Benutzer eine Registerkarte auswählt. Die folgende Abbildung zeigt die Benutzeroberflächenbereiche.

Um Registerkarten in einer .NET MAUI-Shellanwendung zu verwenden, erstellen Sie eine Instanz der TabBar-Klasse als untergeordnetes Element der Shell-Klasse. Fügen Sie dann der TabBar Tab-Objekte hinzu. Innerhalb des Tab-Objekts sollte ein ShellContent-Objekt auf ein ContentPage-Objekt festgelegt werden.

Erstellen einer TabbedPage

Sie können eine TabBar-Instanz als untergeordnetes Element der Shell-Klasse erstellen. Fügen Sie der TabBar bei Bedarf Tab-Objekte als untergeordnete Elemente hinzu. Innerhalb des Tab-Objekts sollte ein ShellContent-Objekt auf ein ContentPage-Objekt festgelegt werden.

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

Registerkarten in einem Flyoutmenü

Ein Flyoutelement kann eine Seite mit einer Registerkartenleiste öffnen, auf der eine oder mehrere Registerkarten angezeigt werden.

Um dieses Design zu implementieren, fügen Sie ein <ShellContent>-Element innerhalb von <FlyoutItem> für jede Registerkarte hinzu, die angezeigt werden soll.

Legen Sie den Title und das Icon auf <ShellContent> fest, um den Titel und das Symbol der Registerkarte zu steuern.

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