Erstellen einer .NET MAUI-Shell-App

Durchsuchen Sie das Beispiel

Eine .NET Multi-Platform App UI (.NET MAUI)-Shell-App kann mit der .NET MAUI App-Projektvorlage erstellt werden. Anschließend wird die visuelle Hierarchie der App in der AppShell-Klasse beschrieben.

Eine Schritt-für-Schritt-Anleitung zum Erstellen einer Shell-App finden Sie unter Erstellen einer .NET MAUI-App.

Beschreiben der visuellen Hierarchie der App

Die visuelle Hierarchie einer .NET MAUI Shell-Anwendung wird in der untergeordneten Klasse Shell beschrieben, die in der Projektvorlage den Namen AppShell trägt. Eine in Unterklassen untergliederte Shell-Klasse besteht aus drei hierarchischen Hauptobjekten:

1. FlyoutItem oder TabBar Ein FlyoutItem steht für ein oder mehrere Elemente im Flyout und sollte verwendet werden, wenn das Navigationsmuster für die App ein Flyout erfordert. Eine TabBar steht für die Registerkartenleiste am unteren Rand und sollte verwendet werden, wenn das Navigationsmuster für die App mit Registerkarten am unteren Rand beginnt und kein Flyout erforderlich ist. Jedes FlyoutItem- oder TabBar-Objekt ist ein untergeordnetes Objekt des Shell-Objekts.
2. Das Tab-Objekt stellt gruppierte Inhalte dar, durch die über untere Registerkarten navigiert werden kann. Jedes Tab-Objekt ist ein untergeordnetes Element eines FlyoutItem- oder TabBar-Objekts.
3. ShellContent, das die ContentPage-Objekte für jede Registerkarte darstellt. Jedes ShellContent-Objekt ist ein untergeordnetes Element eines Tab-Objekts. Wenn mehr als ein ShellContent-Objekt in einem Tab-Objekt vorhanden ist, sind die Objekte über obere Registerkarten navigierbar.

Diese Objekte stellen keine Benutzeroberfläche dar, sondern die Organisation der visuellen Hierarchie der App. Die Shell wird diese Objekte übernehmen und die Benutzeroberfläche für die Navigation der Inhalte erstellen.

Der folgende XAML-Code zeigt ein Beispiel für eine Shell-Klasse mit Unterklassen:

<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">
    ...
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <!--
        Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified.
        This is possible because a subclassed Shell object can only ever contain a FlyoutItem object or a TabBar object,
        which can only ever contain Tab objects, which can only ever contain ShellContent objects.

        The implicit conversion automatically wraps the ShellContent objects below in Tab objects.
        -->
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>
    ...
</Shell>

Wenn er ausgeführt wird, zeigt dieser XAML-Code das Element CatsPage an, da es das erste Inhaltselement ist, das in der Shell-Klasse mit Unterklassen deklariert ist:

Wird auf das Hamburger-Symbol gedrückt oder von links gewischt, wird das Flyout angezeigt:

Im Flyout werden mehrere Elemente angezeigt, da die FlyoutDisplayOptions-Eigenschaft auf AsMultipleItems festgelegt ist. Weitere Informationen finden Sie unter Anzeigeoptionen für Flyouts.

Wichtig

In einer Shell-App werden Seiten bei Bedarf als Reaktion auf die Navigation erstellt. Dies wird mithilfe der DataTemplate-Markuperweiterung erreicht, um die ContentTemplate-Eigenschaft der einzelnen ShellContent-Objekte auf ein ContentPage-Objekt festzulegen.