FlexLayout y Navigation Page en Xamarin

Si estás construyendo apps móviles con Xamarin y necesitas un menú lateral que se despliegue junto a una pantalla principal, el FlexLayout Page y el Navigation Page son las dos piezas que vas a usar todo el tiempo. Aquí entiendes cómo se estructuran, cómo se combinan y cómo lucen en Visual Studio.

¿Qué es un FlexLayout Page y para qué sirve?

El FlexLayout Page es la base de esas aplicaciones que tienen un menú lateral a la izquierda y un área de contenido a la derecha. Tú haces clic en una opción del menú y la pantalla principal cambia para mostrar lo que el usuario pidió.

Es una arquitectura súper común en apps de productividad: contactos, to-do list, reminders, ajustes. Cada opción del menú dispara una vista distinta sin sacar al usuario del flujo principal.

¿Cuándo conviene usar un FlexLayout Page? Cuando tu app tiene varias secciones que el usuario alterna con frecuencia y necesitas un menú lateral persistente. Si solo tienes una pantalla, te sobra.

¿Cómo se construye un FlexLayout Page en XAML?

La clase parte cambiando la etiqueta ContentPage por FlexLayoutPage. Como toda etiqueta XAML, se abre y se cierra, y todo lo que metas vive adentro [04:18].

La estructura tiene dos zonas claras:

• FlexLayoutPage.Flyout: aquí declaras la página que funciona como menú lateral.
• FlexLayoutPage.Detail: aquí declaras la página que muestra el contenido principal.

Dentro del flyout referencias la página del menú con un alias. Por ejemplo, declaras un alias views que apunta a la ruta Views/Pages/FlexLayoutExample de tu proyecto, y desde ahí accedes a MenuPage sin escribir la ruta completa cada vez.

¿Qué es un Navigation Page y cómo funciona su pila?

El Navigation Page es una página en blanco que te da una navegación simple pero muy efectiva entre pantallas. Su lógica es jerárquica: avanzas hacia adelante, regresas hacia atrás.

Por dentro funciona como una pila tipo LIFO, last in, first out. La última página que entra es la primera en salir cuando el usuario presiona atrás [02:05].

¿Qué significa LIFO en Navigation Page? Que la última página apilada es la primera que se quita. Si entras a Inicio → Detalle → Edición, al regresar sales primero de Edición.

Lo interesante es que un Navigation Page se puede anidar dentro del detail de un FlexLayout Page. Le pasas como argumento una página inicial, por ejemplo MainPage, y desde ahí el usuario navega hacia adelante manteniendo el menú lateral disponible.

¿Cómo se arma el menú dentro del Flyout?

La página que actúa como menú es un ContentPage normal con un CollectionView adentro. No hace falta dominar CollectionView todavía, pero sí saber qué piezas necesita.

El CollectionView se alimenta de tres elementos clave:

• ItemsSource: la fuente de datos que llena la lista.
• Una clase modelo que define los campos de cada ítem.
• Un ItemTemplate que define cómo se ve cada fila.

En el ejemplo, la clase modelo es pública y tiene tres atributos: Title, Icon y TargetType. El TargetType es el que indica a qué página debe navegar esa opción cuando el usuario la toca.

¿Cómo luce el modelo de cada opción de menú?

Cada fila del menú combina un ícono al inicio y una label con el texto descriptivo. Eso es lo que defines en el ItemTemplate: un layout horizontal con la imagen y el texto, repetido por cada elemento de la lista [06:42].

El resultado en el emulador es directo: tocas el botón de menú, se despliega el panel lateral con las opciones, eliges una y el panel se esconde mientras la pantalla principal se actualiza.

¿Qué archivos componen el ejemplo completo?

Para que el engranaje funcione, el ejemplo en Visual Studio se apoya en tres archivos que conviene tener claros:

1. SamplePage: la página raíz tipo FlexLayoutPage que conecta menú y detalle.
2. MenuPage: el ContentPage con el CollectionView que pinta las opciones.
3. Clase modelo: define Title, Icon y TargetType para cada ítem del menú.

Dentro del detail, el Navigation Page recibe como argumento la MainPage que ya construiste en la clase anterior con ContentPage. Esto confirma algo importante: los distintos tipos de página se pueden mezclar sin problema, y de hecho esa mezcla es la que te da flexibilidad real para diseñar la app.

La referencia local que ves en el XAML es otro alias, igual que el de views, pero apuntando a la raíz del proyecto para acceder a páginas que viven fuera de la carpeta de ejemplos.

Juega con el código: cambia un ícono, agrega una opción nueva al menú, conecta una página distinta en el TargetType y cuéntame en los comentarios qué armaste.