Crea una aplicación de Shell de .NET MAUI

Examinar el ejemplo

Se puede crear una aplicación Shell de la interfaz de usuario de .NET MAUI multiplataforma con la plantilla de proyecto Aplicación MAUI de .NET y, a continuación, describir la jerarquía visual de la aplicación en la clase AppShell.

Para ver un tutorial paso a paso sobre cómo crear una aplicación de Shell, consulte Creación de una aplicación MAUI de .NET.

Describir la jerarquía visual de la aplicación

La jerarquía visual de una aplicación de shell de MAUI de .NET se describe en la clase subclasada Shell , que la plantilla de proyecto denomina AppShell. Una clase subclasada Shell consta de tres objetos jerárquicos principales:

1. FlyoutItem o TabBar. FlyoutItem representa uno o varios elementos del control flotante y se debe usar cuando el patrón de navegación de la aplicación requiera un control flotante. TabBar representa la barra de pestañas inferior y se debe usar cuando el patrón de navegación de la aplicación comienza con las pestañas inferiores y no requiere un control flotante. Cada FlyoutItem objeto o TabBar objeto es un elemento secundario del Shell objeto .
2. Tab, que representa contenido agrupado, navegable mediante pestañas en la parte inferior. Cada Tab objeto es un elemento secundario de un FlyoutItem objeto o TabBar objeto .
3. ShellContent, que representa los ContentPage objetos de cada pestaña. Cada ShellContent objeto es un elemento secundario de un Tab objeto . Cuando hay más de un ShellContent objeto en un Tab, los objetos se podrán navegar a través de las pestañas superiores.

Estos objetos no representan ninguna interfaz de usuario, sino la organización de la jerarquía visual de la aplicación. Shell tomará estos objetos y generará la interfaz de usuario de navegación para el contenido.

En el código XAML siguiente se muestra un ejemplo de una clase subclasada 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>

Cuando se ejecuta, este XAML muestra , CatsPageporque es el primer elemento de contenido declarado en la clase subclasada Shell :

Al presionar el icono de hamburguesa o deslizar el dedo desde la izquierda, se muestra el menú desplegable:

Se muestran varios elementos en el control flotante porque la propiedad FlyoutDisplayOptions está establecida en AsMultipleItems. Para obtener más información, consulte Opciones de visualización del menú desplegable.

Importante

En una aplicación de Shell, las páginas se crean a petición en respuesta a la navegación. Esto se logra mediante el uso de la extensión DataTemplate para establecer la propiedad ContentTemplate para cada objeto ShellContent a un objeto de tipo ContentPage.