Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Creación de proyecto Master – Detail con menú lateral.
Master
Detail
Empezamos creando un proyecto de tipo Xamarin forms en Visual Studio.
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Presionamos el botón siguiente.
Configuramos el nombre y la ruta de instalación de nuestro proyecto, de preferencia una unidad
diferente a C:
Presionamos el botón Crear.
Seleccionamos una plantilla en blanco:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Presionamos el botón Crear.
Nuestra aplicación estará conformada de la siguiente estructura de archivos:
Agregamos un ContentPage (página de contenido) para el Master:
Presionamos el botón derecho sobre appMasterDetail.
El proyecto nos quedaría de la siguiente forma:
El frontEnd “[Link]” y el BackEnd “[Link]”
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Ahora agregamos el Detail, de la misma forma:
Nos situamos en appMasterDetail.
Presionamos el botón derecho sobre appMasterDetail.
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
El proyecto nos quedaría con los archivos: Master y Detail
Abrimos el código de nuestro [Link]
Cambiamos la estructura de contentPage por MasterDetailPage
Nos debería de quedar de la siguiente forma:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Las líneas resaltadas en azul son un indicador de advertencia que la propiedad Detail no admite
etiquetas StackLayout, así que borramos la estructura StackLayout.
Nos debería de quedar de la siguiente forma:
Ahora vamos al BackEnd del MainPage
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Nos mostraría el error en la clase MainPage ya que no es de tipo ContentPage, debemos cambiarlo
por MasterDetailPage.
Nos quedaría de la siguiente forma:
Debajo de InitializeComponent() agregaremos referencias a las clases Master y NavigationPage:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Ahora abrimos nuestro FrontEnd “[Link]” y agregamos la propiedad Title
Guardamos y ejcutamos algún emulador donde desplegar el proyecto:
Gennymotion
MemuPlay, etc
Nos debería quedar de la siguiente forma:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Lo que estaríamos viendo sería el detail, si presionamos el botón de menú deberíamos ver las
opciones del menú lateral del Master.
Vamos a agregar un título visible y una imagen a nuestro Página principal:
Para agregar estos dos elementos lo haremos con la propiedad TitleView. En la página de Detail.
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
La imagen la proporcionará el instructor del curso ([Link]) de preferencia 48x36 px, si se tiene
una puede utilizar el siguiente link para cambiar el tamaño de una imagen a otro:
Cambiar tamaño de imagen Online:
[Link]
La imagen debe subirse a la carpeta drawable dentro de Resources de Android, se puede arrastrar
directamente del explorador de Windows.
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Ahora vamos a configurar el archivos [Link] para configurar el comportamiento del Master
Detail.
El contenido actual:
Ahora vamos a agregar una propiedad MasterDet para controlar si está activo el Master o Detail:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Ahora regresamos a nuestro BackEnd de nuestro [Link]
Este sería el código actual:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Nos ubicamos en la línea 18 para utilizar la propiedad que hemos creado a nivel de App.
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Ahora agregamos las opciones que tendrá nuestro menú lateral:
Eso lo haremos en nuestra página Master (FrontEnd).
Este sería nuestro código actual:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Borramos la etiqueta y diseñamos los botones que se mostrarán como menú.
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Hay que tener en consideración que cuando creamos el método asociado al evento Clicked hay que ir
a la definición para que se cree el código en el BackEnd (CS).
Esto hay que hacerlo por cada uno de los métodos asignados a los Button.
El resultado de la creación de botones en el menú lateral nos debería arrojar el siguiente resultado:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Ahora vamos a crear el contenido (Detail) para cada una de las opciones creadas.
Creamos un ContentPage para la carrera de Ingeniería de software:
Nuestra aplicación estará conformada de la siguiente estructura de archivos:
Agregamos un ContentPage (página de contenido) para el Master:
Presionamos el botón derecho sobre appMasterDetail.
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Este sería el código que nos crea Visual Studio.
Le damos un texto de ejemplo:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Ahora asociamos el nuevo ContentPage de la carrera de Ingeniería de software con el backEnd
([Link])
Nos ubicamos en el evento btnSobreIngenieria
Hacemos los cambios respectivos para invocar el nuevo ContentPage ([Link])
Cambiamos a método asincrónico todos los eventos.
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Ahora documentamos el ContentPage ([Link])
Probamos el contenido de Ingeniería de software:
Diseño y Desarrollo de Aplicaciones Móviles
Mostrar contenido utilizando Master – detail y menú de navegación en Xamarin Forms
Inst. Rafael Quevedo Mogollón
Realizamos el mismo proceso para el resto de las carreras.