Implementieren von Flyoutnavigation

  • 4 Minuten

Flyoutnavigation ist eine Art von Navigation, bei der ein Fenster mit Menüelementen an der Seite des Bildschirms des Geräts herausgleitet (oder „herausfliegt“). Sie wird durch Tippen auf ein „Hamburger-Menü“, ein Symbol mit drei übereinander gestapelten horizontalen Linien, aufgerufen.

In dieser Lektion erfahren Sie, wie Sie eine App erstellen, die die Flyoutnavigation in einer .NET Multi-Platform App UI (MAUI) implementiert.

Was ist Flyoutnavigation?

Die Flyoutnavigation zeigt ein Menü an, das eine schnelle Möglichkeit zum Wechseln des Kontexts in Ihrer Anwendung bietet.

Das Flyoutmenü besteht aus mehreren Teilen, dem Header, den FlyoutItems, den MenuItems und dem Footer.

Die folgende Abbildung zeigt ein visuelles Beispiel für die Flyoutteile.

Screenshot eines Flyoutmenüs, in dem jeder Teil des Flyouts mit Anmerkungen versehen ist.

Da das Flyoutmenü nicht immer sichtbar ist, kann es verwendet werden, um den Kontext zwischen konzeptuell unterschiedlichen Teilen Ihrer Anwendung zu wechseln. Beispielsweise kann ein Flyoutelement zu einer Dateneingabeseite (oder Seiten) führen, und ein anderes zu einer Infoseite.

Flyoutnavigation in einer .NET MAUI-App

Sie verwenden die FlyoutItem-Klasse, um die Flyoutnavigation in .NET MAUI zu implementieren. FlyoutItem ist Teil des Shell-App-Entwicklungsparadigmas, das von .NET MAUI bereitgestellt wird.

Die Navigation mit einem Flyout in .NET MAUI erfolgt, wenn auf ein FlyoutItem-Element getippt wird. Das FlyoutItem wechselt dann automatisch die angezeigten Inhalte in Ihrer App. Sie geben an, was angezeigt wird, wenn ein FlyoutItem-Objekt angetippt wird, indem Sie seine ShellContent-Eigenschaft festlegen. Diese Eigenschaft verweist auf eine Seite in Ihrer Anwendung.

Das FlyoutItem muss auf einer Shell-Seite gehostet werden, die als Hauptseite Ihrer Anwendung dient. Außerdem können Sie so viele FlyoutItems haben, wie Sie möchten.

Im folgenden Beispiel wird ein Flyout erstellt, das zwei Flyoutelemente enthält:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <FlyoutItem Title="Cats"
                Icon="cat.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:CatsPage}" />
       </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
       <Tab>
           <ShellContent ContentTemplate="{DataTemplate views:DogsPage}" />
       </Tab>
    </FlyoutItem>
</Shell>

Erstellen eines Flyouts

Ein oder mehrere Flyoutelemente können dem Flyout hinzugefügt werden. Ein FlyoutItem-Objekt stellt jedes Flyoutelement dar. Jedes FlyoutItem-Objekt sollte ein untergeordnetes Objekt des Unterklassenobjekts Shell sein, das als MainPage Ihrer App dient.

Das Shell-Objekt verfügt über implizite Konvertierungsoperatoren, mit denen die visuelle Hierarchie der Shell vereinfacht werden kann. Diese Vereinfachung ist möglich, da ein Unterklassenobjekt Shell nur FlyoutItem Objekte oder ein TabBar-Objekt enthalten kann, das nur Objekte enthalten können, die nur Tab-Objekte enthalten können, die nur ShellContent-Objekte enthalten können.

Diese impliziten Konvertierungsoperatoren können verwendet werden, um die Objekte FlyoutItem und Tab aus dem vorherigen Beispiel zu entfernen:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
   <ShellContent Title="Cats"
                 Icon="cat.png"
                 ContentTemplate="{DataTemplate views:CatsPage}" />
   <ShellContent Title="Dogs"
                 Icon="dog.png"
                 ContentTemplate="{DataTemplate views:DogsPage}" />
</Shell>

Dieser Code führt zu einem Flyout mit zwei Elementen. Die CatsPage wird standardmäßig angezeigt, wenn die App geöffnet wird. Durch Tippen auf die zweite wird die DogsPage angezeigt.

Screenshot eines Flyouts mit zwei Optionen.

Flyoutmenüelemente

Menüelemente können optional zum Flyout hinzugefügt werden. Ein MenuItem-Objekt stellt jedes Menüelement dar. Menüelemente ähneln Schaltflächen, da das Tippen darauf eine Aktion ausführt, statt eine Seite anzuzeigen.

Die Position von MenuItem-Objekten auf dem Flyout hängt von der Deklarationsreihenfolge in der visuellen Shell-Hierarchie ab. Daher werden alle MenuItem-Objekte, die vor FlyoutItem-Objekten deklariert wurden, vor den FlyoutItem-Objekten im Flyout angezeigt, und alle MenuItem-Objekte, die nach FlyoutItem-Objekten deklariert wurden, werden nach den FlyoutItem-Objekten im Flyout angezeigt.

<Shell ...>
    ...            
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://learn.microsoft.com/dotnet/maui/fundamentals/shell" />    
</Shell>

Die Flyoutkopfzeile ist der Inhalt, der optional oben im Flyout angezeigt wird. Sie definieren die Darstellung der Kopfzeile, indem Sie ein Objekt mit der Shell.FlyoutHeader-bindungsfähigen Eigenschaft festlegen:

<Shell ...>
    <Shell.FlyoutHeader>
        <Grid>
            <Image Source="header-image.png" />
        </Grid>
    </Shell.FlyoutHeader>
</Shell>

Die Flyoutfußzeile ist der Inhalt, der optional am unteren Rand des Flyouts angezeigt wird. Sie definieren die Darstellung der Fußzeile, indem Sie ein Objekt mit der Shell.FlyoutFooter-bindungsfähigen Eigenschaft festlegen:

<Shell ...>
    <Shell.FlyoutFooter>
        <Grid>
            <Image Source="footer-image.png" />
        </Grid>
    </Shell.FlyoutFooter>
</Shell>