Uso de páginas con pestañas con páginas de la pila de navegación
La navegación flotante y por pestañas son solo dos maneras de permitir que un usuario navegue por los datos que presenta una aplicación. Otra técnica es usar la navegación apilada. Cada tipo de navegación se adapta a diferentes tipos de relaciones entre las páginas.
Puede usar la navegación apilada junto con la flotante y por pestañas. En esta unidad, repasaremos brevemente las diferencias entre, por un lado, la navegación por pestañas y flotante y, por otro, la navegación apilada, y veremos cómo crear aplicaciones que combinen ambas técnicas.
Revisión de controles flotantes y navegación por pestañas
La navegación flotante y por pestañas ofrecen un mecanismo útil para que el usuario seleccione la página que se va a ver en un momento dado. Para navegar a una página, el usuario tan solo selecciona la pestaña o el elemento flotante correspondientes. Esta forma de navegación es útil para los elementos de datos que tienen una relación del mismo nivel entre sí. En la aplicación de astronomía, las páginas Sol, Luna y Acerca de tienen todas el mismo nivel; no hay ninguna relación directa entre ellos.
Sin embargo, para los datos jerárquicos, la navegación apilada puede ser más adecuada. La navegación apilada permite al usuario explorar en profundidad una serie de páginas, donde la página siguiente de la pila ofrece una vista más detallada de un elemento seleccionado en la página anterior.
Considere el caso siguiente:
Agrega una nueva página a la aplicación de astronomía, que muestra cuerpos astronómicos. Quiere que el usuario pulse uno de esos objetos celestes y aparezca información sobre este. La página que enumera los cuerpos celestes se presentaría mejor en una página con pestañas, como un elemento del mismo nivel que las páginas de fases lunares y amaneceres. La información detallada sobre el cuerpo celeste se presenta mejor en forma de serie de pasos mediante la navegación apilada. Este mecanismo también permitirá al usuario volver a la página principal de cuerpos celestes pulsando un botón Atrás.
Exploración con la navegación apilada
El shell de .NET Multi-Platform App UI (MAUI) incluye una experiencia de navegación basada en URI que usa rutas para navegar a cualquier página de la aplicación, sin tener que seguir una jerarquía de navegación establecida. Además, también permite navegar hacia atrás sin tener que visitar todas las páginas de la pila de navegación.
La clase Shell define las siguientes propiedades relacionadas con la navegación:
BackButtonBehavior, de tipoBackButtonBehavior, una propiedad adjunta que define el comportamiento del botón Atrás.CurrentItem, de tipoShellItem, el valor seleccionado actualmente.CurrentPage, de tipoPage, la página presentada actualmente.CurrentState, de tipoShellNavigationState, el estado de navegación actual deShell.Current, de tipoShell, un alias con el tipo convertido paraApplication.Current.MainPage.
La navegación se realiza mediante la invocación del método GoToAsync, desde la clase Shell.
Rutas
Para navegar en una aplicación shell, se especifica un URI al que navegar. Los URI de navegación pueden tener tres componentes:
- Una ruta, que define la ruta de acceso al contenido que existe como parte de la jerarquía visual de Shell.
- Una página. Las páginas que no existen en la jerarquía visual de shell se pueden insertar en la pila de navegación desde cualquier lugar dentro de una aplicación shell. Por ejemplo, una página de detalles no se definirá en la jerarquía visual de shell, pero se puede insertar en la pila de navegación según sea necesario.
- Uno o varios parámetros de consulta. Los parámetros de consulta son parámetros que se pueden pasar a la página de destino durante la navegación.
Cuando un URI de navegación incluye los tres componentes, la estructura es: //route/page?queryParameters
Registro de rutas
Las rutas se pueden definir en objetos FlyoutItem, TabBar, Tab y ShellContent a través de sus propiedades Route:
<Shell ...>
<FlyoutItem ...
Route = "astronomy">
<ShellContent ...
Route="moonphase" />
<ShellContent ...
Route="sunrise" />
</FlyoutItem>
<FlyoutItem>
<ShellContent ...
Route="about" />
</FlyoutItem>
</Shell>
Para navegar a la ruta moonphase, el URI absoluto de la ruta es //astronomy/moonphase
Registro de rutas detalladas
En el constructor de la subclase Shell, o en cualquier otro lugar que se ejecute antes de invocar una ruta, puede registrar explícitamente una ruta utilizando el método Routing.RegisterRoute para cualquier página de detalles que no esté representada en la jerarquía visual de Shell.
Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
Para navegar a AstronomicalBodyPage, se invocaría:
await Shell.Current.GoToAsync("astronomicalbodydetails");`
Navegación hacia atrás
La navegación hacia atrás se puede llevar a cabo especificando ".." como argumento en el método GoToAsync:
await Shell.Current.GoToAsync("..");
Pasar datos
Los datos primitivos se pueden pasar como parámetros de consulta basados en cadenas al realizar la navegación mediante programación basada en URI. Pase los datos anexando ? después de una ruta, seguido de un identificador de parámetro de consulta, = y un valor:
string celestialName = "moon";
await Shell.Current.GoToAsync($"astronomicalbodydetails?bodyName={celestialName}");
En este ejemplo, la ruta es astronómicabodydetails, el parámetro es bodyName y el valor es de la variable celestialName.
Recuperar datos
Para recibir datos de navegación, se puede decorar la clase receptora con un QueryPropertyAttribute para cada parámetro de consulta basado en cadenas y cada parámetro de navegación basado en objetos:
[QueryProperty(nameof(AstroName), "bodyName")]
public partial class AstronomicalBodyPage : ContentPage
{
string astroName;
public string AstroName
{
get => astroName;
set
{
astroName = value;
}
}
...
}
En este ejemplo, el primer argumento para QueryPropertyAttribute especifica el nombre de la propiedad que recibirá los datos, y en el segundo argumento se especifica el identificador del parámetro.