Implementować nawigację wysuwaną

Ukończone

Nawigacja wysuwana to typ nawigacji, w której okno elementów menu przesuwa się (lub wylatuje) z boku ekranu urządzenia. Jest uruchamiane po stuknięciu menu „hamburger”, ikony z trzema poziomymi liniami ułożonymi jedna nad drugą.

W tej lekcji dowiesz się, jak utworzyć aplikację, która wykorzystuje nawigację typu flyout w .NET Multi-platform App UI (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 typu flyout w aplikacji .NET MAUI

Używasz klasy FlyoutItem do implementacji nawigacji wysuwanej w platformie .NET MAUI. FlyoutItem jest częścią paradygmatu tworzenia aplikacji Shell, oferowanego przez platformę .NET MAUI.

Nawigacja za pomocą menu wysuwanego w platformie .NET MAUI następuje po stuknięciu elementu FlyoutItem. 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. A możesz mieć tyle FlyoutItem, ile chcesz.

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>

Utwórz menu wysuwane

Do menu wysuwanego można dodać jeden lub więcej elementów menu wysuwanego. Obiekt FlyoutItem reprezentuje każdy element menu wysuwanego. 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 wizualnej powłoki Shell. To uproszczenie jest możliwe, ponieważ obiekt Shell będący podklasą może zawierać wyłącznie obiekty FlyoutItem albo obiekt TabBar, który może zawierać wyłącznie obiekty Tab, które z kolei mogą zawierać wyłącznie obiekty ShellContent.

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 menu wysuwanego z dwoma elementami. Wartość CatsPage jest wyświetlana domyślnie po otwarciu aplikacji. Naciśnięcie drugiego powoduje wyświetlenie elementu DogsPage.

Elementy rozwijanego menu

Elementy menu można opcjonalnie dodać do menu wysuwanego. 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 obiektów MenuItem w wysuwanym menu zależy od kolejności ich deklaracji w hierarchii wizualnej powłoki Shell. W związku z tym wszystkie obiekty MenuItem, zadeklarowane przed obiektami FlyoutItem, pojawią się przed obiektami FlyoutItem w menu wysuwanym, a wszystkie obiekty MenuItem, zadeklarowane po obiektach FlyoutItem, pojawią się po obiektach FlyoutItem w menu wysuwanym.

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

Wysuwany nagłówek i stopka

Nagłówek menu wysuwanego to treść, która może opcjonalnie pojawiać się u góry menu wysuwanego. 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 wysuwanego okna to treść, która może opcjonalnie pojawić się u dołu wysuwanego okna. Wygląd stopki definiuje się przez ustawienie obiektu za pomocą właściwości wiązalnej Shell.FlyoutFooter:

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