Introducción al shell de .NET MAUI

Examinar la muestra.

El Shell de interfaz de usuario de aplicaciones multiplataforma de .NET (.NET MAUI) reduce la complejidad del desarrollo de aplicaciones al proporcionar las características fundamentales que requieren la mayoría de las aplicaciones, entre las que se incluyen:

• Un único lugar para describir la jerarquía visual de una aplicación.
• Una interfaz de usuario de navegación común.
• Un esquema de navegación basado en URI que permite la navegación a cualquier página de la aplicación.
• Un controlador de búsqueda integrado.

Jerarquía visual de la aplicación

En una aplicación Shell de .NET MAUI, la jerarquía visual de la aplicación se describe en una clase que subclase la clase Shell. Esta clase puede constar 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. Para obtener más información sobre los elementos de control flotante, consulta Control flotante de Shell de .NET MAUI. Para obtener más información sobre las barras de pestañas, consulta Pestañas del Shell de .NET MAUI.
2. Tab, que representa contenido agrupado, navegable mediante pestañas en la parte inferior. Para obtener más información, consulta Pestañas del Shell de .NET MAUI.
3. ShellContent, que representa los objetos ContentPage de cada pestaña. Para obtener más información, consulta Páginas de Shell de .NET MAUI.

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

Nota:

Las páginas se crean a petición en las aplicaciones de Shell, en respuesta a la navegación.

Para obtener más información, consulta Crear una aplicación de Shell de .NET MAUI.

Experiencia del usuario de navegación

La experiencia de navegación proporcionada por Shell de .NET MAUI se basa en controles flotantes y pestañas. El nivel superior del panel de navegación en una aplicación de shell es un control flotante o una barra de pestañas inferior, según los requisitos de navegación de la aplicación. El ejemplo siguiente muestra una aplicación donde el nivel superior de navegación es un control flotante:

En este ejemplo, algunos elementos de control flotante se duplican como elementos de barra de pestañas. Aunque también hay elementos a los que solo se puede tener acceso desde el control flotante. Al seleccionar un elemento de control flotante, se selecciona y muestra la pestaña inferior que representa el elemento:

Nota:

Cuando el control flotante no está abierto, la barra de pestañas inferior se puede considerar el nivel superior de navegación en la aplicación.

Cada pestaña de la barra de pestañas muestra un ContentPage. Sin embargo, si una pestaña inferior contiene más de una página, las páginas son navegables mediante la barra de pestañas superior:

En cada pestaña, se puede navegar por objetos ContentPage adicionales que se conocen como páginas de detalles:

Shell usa una experiencia de navegación basada en URI que emplea rutas para navegar a cualquier página de la aplicación, sin tener que seguir una jerarquía de navegación establecida. También ofrece la posibilidad de navegar hacia atrás sin tener que visitar todas las páginas de la pila de navegación. Para obtener más información, consulta Navegación en Shell de .NET MAUI.

Buscar

Shell de .NET MAUI incluye la funcionalidad de búsqueda integrada que proporciona la clase SearchHandler. Se puede agregar funcionalidad de búsqueda a una página agregando un objeto SearchHandler con subclases a esta. Esto se traduce en que se agrega un cuadro de búsqueda en la parte superior de la página. Cuando se escriben datos en el cuadro de búsqueda, el área de sugerencias de búsqueda se rellena con datos:

A continuación, cuando se selecciona un resultado en el área de sugerencias de búsqueda, se puede ejecutar la lógica personalizada; por ejemplo, navegar a una página de detalles.

Para obtener más información, consulta Búsqueda en .NET MAUI Shell.