Tworzenie aplikacji .NET MAUI Shell

Przeglądanie przykładu

Aplikację powłoki interfejsu użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) można utworzyć przy użyciu szablonu projektu .NET MAUI App , a następnie opisując hierarchię wizualizacji aplikacji w AppShell klasie.

Aby zapoznać się z instrukcjami krok po kroku dotyczącymi tworzenia aplikacji powłoki, zobacz Tworzenie aplikacji MAUI platformy .NET.

Opisywanie hierarchii wizualnej aplikacji

Hierarchia wizualizacji aplikacji .NET MAUI Shell jest opisana w klasie podklasy Shell , którą szablon projektu nazywa AppShell. Klasa podklasowana Shell składa się z trzech głównych obiektów hierarchicznych:

1. Usługa FlyoutItem lub TabBar. Element FlyoutItem reprezentuje co najmniej jeden element w oknie wysuwanym i powinien być używany, gdy wzorzec nawigacji dla aplikacji wymaga wysuwanego elementu. Element TabBar reprezentuje dolny pasek karty i powinien być używany, gdy wzorzec nawigacji dla aplikacji zaczyna się od kart dolnych i nie wymaga wysuwanego menu wysuwanego. Każdy FlyoutItem obiekt lub TabBar obiekt jest elementem podrzędnym Shell obiektu.
2. Tab, który reprezentuje pogrupowaną zawartość, nawigację według kart dolnych. Każdy Tab obiekt jest elementem podrzędnym FlyoutItem obiektu lub TabBar obiektu.
3. ShellContent, który reprezentuje ContentPage obiekty dla każdej karty. Każdy ShellContent obiekt jest elementem podrzędnym Tab obiektu. Gdy w obiekcie Tabznajduje się więcej niż jeden ShellContent obiekt , obiekty będą nawigowalne przez górne karty.

Te obiekty nie reprezentują żadnego interfejsu użytkownika, ale raczej organizacji hierarchii wizualnej aplikacji. Powłoka przejmie te obiekty i utworzy interfejs użytkownika nawigacji dla zawartości.

Poniższy kod XAML przedstawia przykład klasy podklasowanej Shell :

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

Po uruchomieniu CatsPageten kod XAML wyświetla element , ponieważ jest to pierwszy element zawartości zadeklarowany w podklasowanej Shell klasie:

Naciśnięcie ikony hamburgera lub przesunięcie z lewej strony powoduje wyświetlenie wysuwanego menu:

Na wysuwaniu jest wyświetlanych wiele elementów, ponieważ właściwość jest ustawiona FlyoutDisplayOptions na AsMultipleItemswartość . Aby uzyskać więcej informacji, zobacz Opcje wyświetlania wysuwane.

Ważne

W aplikacji Shell strony są tworzone na żądanie w odpowiedzi na nawigację. Jest to realizowane przy użyciu DataTemplate rozszerzenia znaczników, aby ustawić ContentTemplate właściwość każdego ShellContent obiektu na ContentPage obiekt.