Implementowanie nawigacji wysuwanych

Nawigacja wysuwana to typ nawigacji, w której okno elementów menu przesuwa się (lub wylatuje) z boku ekranu urządzenia. Jest wywoływany przez naciśnięcie menu "hamburger", ikonę z trzema poziomymi liniami ułożone na siebie nawzajem.

W tej lekcji dowiesz się, jak utworzyć aplikację, która implementuje nawigację wysuwaną w interfejsie użytkownika aplikacji wieloplatformowej platformy .NET (MAUI).

Co to jest nawigacja wysuwana?

Nawigacja wysuwana wyświetla menu, które zapewnia szybki sposób przełączania kontekstu w aplikacji.

Menu wysuwane składa się z kilku części: Header, FlyoutItems, MenuItemsi Footer.

Na poniższej ilustracji przedstawiono wizualny przykład części wysuwanych.

Zrzut ekranu menu wysuwanego, w którym każda część jest opatrzona adnotacją.

Ponieważ menu wysuwane nie zawsze jest widoczne, może służyć do przełączania kontekstu między koncepcyjnie różnymi częściami aplikacji. Na przykład jeden element wysuwany może prowadzić do strony wprowadzania danych (lub stron), a drugi do strony z informacjami.

Nawigacja wysuwana w aplikacji MAUI platformy .NET

Klasa służy FlyoutItem do implementowania nawigacji wysuwanych na platformie .NET MAUI. FlyoutItem jest częścią paradygmatu tworzenia aplikacji Shell, oferowanego przez platformę .NET MAUI.

Nawigacja z wysuwanym menu wysuwanym na platformie .NET MAUI występuje po naciśnięciu FlyoutItem elementu. Element FlyoutItem automatycznie przełącza zawartość wyświetlaną w aplikacji. Określasz, co jest wyświetlane po naciśnięciu FlyoutItem elementu, ustawiając jego ShellContent właściwość. Ta właściwość wskazuje stronę w aplikacji.

Element FlyoutItem musi być hostowany na Shell stronie, która służy jako strona główna aplikacji. I możesz mieć tyle, ile FlyoutItemchcesz.

W poniższym przykładzie zostanie utworzone okno wysuwane zawierające dwa elementy wysuwane:

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

Tworzenie wysuwanego

Do wysuwanego elementu można dodać co najmniej jeden element wysuwany. Obiekt FlyoutItem reprezentuje każdy element wysuwany. Każdy FlyoutItem obiekt powinien być elementem podrzędnym podklasowanego Shell obiektu, który służy jako obiekt aplikacji MainPage.

Obiekt Shell ma niejawne operatory konwersji, które umożliwiają uproszczenie hierarchii wizualizacji powłoki. To uproszczenie jest możliwe, ponieważ podklasowany Shell obiekt może zawierać FlyoutItem tylko obiekty lub TabBar obiekt, który może zawierać tylko Tab obiekty, które mogą zawierać ShellContent tylko obiekty.

Te niejawne operatory konwersji mogą służyć do usuwania FlyoutItem obiektów i Tab z poprzedniego przykładu:

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

Ten kod powoduje wyświetlenie wysuwanego z dwoma elementami. Wartość CatsPage jest wyświetlana domyślnie po otwarciu aplikacji. Naciśnięcie drugiego powoduje wyświetlenie elementu DogsPage.

Elementy menu wysuwane

Elementy menu można opcjonalnie dodać do wysuwania. Obiekt MenuItem reprezentuje każdy element menu. Elementy menu są podobne do przycisków w tym naciśnięciu jednego prowadzi do wykonania akcji, a nie strony do wyświetlenia.

Położenie MenuItem obiektów na wysuwaniu zależy od ich kolejności deklaracji w hierarchii wizualizacji powłoki. W związku z tym wszystkie MenuItem obiekty zadeklarowane przed FlyoutItem obiektami pojawią się przed FlyoutItem obiektami w oknie wysuwaym, a wszystkie MenuItem obiekty zadeklarowane po FlyoutItem obiektach pojawią się po FlyoutItem obiektach w wysuwaniu.

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

Nagłówek i stopka wysuwane

Nagłówek wysuwany to zawartość, która opcjonalnie jest wyświetlana w górnej części wysuwanego menu. Wygląd nagłówka definiuje się, ustawiając obiekt z powiązaną właściwością Shell.FlyoutHeader :

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

Stopka wysuwana to zawartość, która opcjonalnie pojawia się w dolnej części okna wysuwanego. Wygląd stopki definiuje się, ustawiając obiekt za pomocą właściwości możliwej Shell.FlyoutFooter do powiązania:

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