Mes Xamarin: Enamorate de Xamarin.Forms Shell

Como parte de la celebración del Mes Xamarin quiero compartir con ustedes uno de las funciones que amaras del preview de Xamarin.Forms 4, sin importar si estas iniciando en el desarrollo móvil o tienes años de experiencia estoy seguro que esta actualización te hará muy feliz.

En las pasadas semanas una nueva version preview de Xamarin.Forms fue lanza la cual incluye muchos cambios y mejoras, y enseguida les mostrare una de esas nuevas funciones que sin duda hara que se enamoren de Xamari.Forms.

Xamarin.Forms Shell

Xamarin.Forms Shell es la nueva sencilla forma de crear y arquitecturar tus aplicaciones Xamarin.Forms permitiéndote enfocarte en la parte principal de tu aplicación y dejando al framework para que maneje cuestiones comunes por ti.
Shell provee de un solo lugar en el cual puedes definir la estructura visual de tu aplicación, una navegación de usar común y un servicio de navegación que soporta deep linking.

Nueva estructura de Xamarin.Forms Shell:

Xamarin.Forms Shell tiene 3 niveles de vista, el menu lateral, tabs en la parte baja de la application y en la parte superior de la navegación.

Añadiendo Forms Shell en tu proyecto:

Es muy facil de configurar, basicamente solo necesitas configurar la bandera experimental en tu MainActivity y AppDelegate antes de llamar el metodo Init de Xamarin Forms:

También necesitas de remplazar tu MainPage por una definición Shell:

Eso es todo ahora estas listo para usar Shell en tu aplicación ahora veamos la estructura de los elementos que necesitas saber para poder crear la estructura de tu aplicación.

ShellItem	Uno o mas elementos que forman parte del shell. cada ShellItem es un hijo del Shell
ShellSection	Contenido agrupado que se puede navegar por medio de tabs en la parte inferior de la aplicacion, cada ShellSection es hija de un ShellItem
ShellContent	El contenido de cada pagina, el cual puede ser navegado por medio de tabs en la parte superior, cada ShellContent es hijo de un ShellSection

Siguiendo la estructura anterior podemos definir una UI simple con el siguiente XAML:

Puedes customizar el menu lateral de manera que puede habilitarlo o deshabilitarlo, añadir un encabezado o incluso añadir elementos extras al menu, vamos analizar la estructura del menu.

Header:
Permite usar una Vista asignando la propiedad Header or usar un Tamplate usando la propiedad HeaderTemplate

Shell Items:
Esta sección se genera automáticamente por el framework, indica los hijos asignados a la raíz del Shell, puedes personalizar la celda mediante la propiedad ItemTemplate.

Menu Items:
Si deseas añadir elementos extra al menu lateral puedes hacer mediante la propiedad MenuItem, el cual permite también configurar una vista personalizada mediante la propiedad MenuItemTemplate.

Siguiente la estructura de Shell ahora podemos hablar acerca de las tabs que estan en el segundo y tercer lugar del escalafón visual de Shell y viene representadas como ShellSection(Tabs inferiores) y ShellContent(Tabs superiores)

ShellSection: Son representadas por las tabs inferiores

ShellContent: Hospedan los ContentPage is es la capa minima de Shell, puedes asignar un elemento pero las tabs superiores no se mostraran en casi de querer mostrarla necesitaras tener 2 o mas elementos.

Con esa simple configuración puedes estar creando definiciones de UI para tus aplicaciones de manera muy simple.

Navegacion:

Forms Shell permite navegar entre las paginas utilizando esquemas url y pasando paramatros como query strings y con los siguientes 5 pasos podremos configurar nuestra app para funcionar con esta nueva navegación.

1) Configura la navegacion dentro de tu Shell principal asignando los parametros de los segmentos en cada uno de los elementos de la estructura Shell

2) Si tienes paginas extra que no pertenecen a la estructura Shell puedes registrarlas usando el método  RegisterRoute

3) Navegar a la pagina deseada llamando el método Shell.GoToAsync("uri") mediante el cual puedes enviar tantos parámetros como requieras usando mediante query strings.

4) Para Interceptar parámetros de navegación es necesario decorar nuestra clase con el atributo QueryProperty como se muestra en el siguiente ejemplo:

5) Puedes controlar el comportamiento de la navegación mediante el handler Navigating dentro de tu definición Shell

Con esto ya eres capaz de poder trabajar con Shell creando definiciones gráficas de manera rápida.

Recuerda que Xamarin.Forms Shell ha sido un gran esfuerzo entre la comunidad y Microsoft para poder lograr de la mejor manera lo que requieren los desarrolladores actuales para poder crear aplicaciones asombrosas, cualquier feedback es muy bueno puedes hacerlo en el siguiente enlace: https://github.com/xamarin/Xamarin.Forms/issues/2415

EJEMPLO GITHUB: https://github.com/AlejandroRuiz/XamarinFormsShellDemo

DOCUMENTACION MICROSOFT: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell

TAILWIND TRADERS APP: https://github.com/Microsoft/TailwindTraders-Mobile/