¡Hola a todos nuevamente! en este post escribiré una manera de crear un bonito Menú Hamburguesa, como se conoce.
Bueno, este será el resultado final de nuestro proyecto, así que comencemos…
Lo primero que haremos es crear el proyecto, darle un nombre y escoger la ruta donde se guardará.
Lo siguiente es escoger el tipo de proyecto que utilizaremos, no importa si estás usando PCL o .Net Standard…
Ahora lo primero que haremos dentro del proyecto es crear una página de contenido para que se usará como plantilla que contendrá nuestra lista de opciones del menú, yo le llamé HamburgerMenu
En su contenido de XAML, cambiaremos las etiquetas del archivo y pondremos que será una MasterDetailPage o en español «Página Maestra».
Las estiquetas de ContentPage.Conten las sustituiremos de la siguiente manera MasterDetailPage.Master
Y dentro de estas etiquetas tendremos un ContentPage que es donde diseñaremos la lista de opciones del Menú.
El diseño de nuestro Menú quedará más o menos de la siguiente manera, tendremos un ListView que como mencioné antes este tendrá todas las opciones laterales que le queramos dar y pasaremos su contenido con Bindings.
Algo muy importante a modificar es la herencia de nuestra clase, ya no será ContentPage Sino MasterDetailPage, y si no cambiamos esto nuestro proyecto no funcionará.
Ahora dentro de código de HamburgerMenu crearemos una clase llamada Menu, la cual contendrá todas las propiedades de las opciones del menú. Así como el titulo, el detalle y su icono.
NOTA IMPORTANTE: Ya tenemos que tener las imagenes descargadas y copiadas en sus respectivas carpetas, en el post de Menu Grid lo expliqué.
Ahora podemos proceder a crear todas las Content Pages que tendrá nuestra aplicación… es decir todas las pantallas, para este ejemplo solo crearé una que se llamará Feed
Ahora un método que será el que llenará los elementos (opciones) del menú.
Esta será la primer linea de código que tendrá el método y en esta básicamente indicamos que detrás de nuestra Página Maestra o Menú tendremos a nuestra pantalla llamada Feed.
Y seguidamente podremos llenar la clase Menu con una lista donde establecemos todas las propiedades con su respectivo valor.
Donde se agrega la propiedad Page tenemos que poner cada una de nuestras pantallas a donde se irá al dar clic en la opción.
Y no hay que olvidarnos de inicializar nuestra App con el Menú de hamburguesa.
Esto lo configuramos en la clase App.xaml.cs
Si ejecutamos esto en un dispositivo Android o iOS esto funciona sin problema pero si queremos agregar el evento de selección de las opciones del menú agregaremos el evento ItemSelected en el ListView de HamburgerMenu.xaml y por parte de Code-Behind agregaremos el siguiente código para navegar entre las opciones.
Como resultado de la App tendremos el siguiente Menú de Hamburgesa:
Menu en Android:
Menu en iOS:
Recuerden que sólo agregué una página así que sólo estaré navegando entre esa página cada vez que cambie de opción del menú.
¡Espero que hayan disfrutado de este post express! y sobre todo que hayas aprendido algo nuevo y te sea de mucha utilidad!
Clic aquí para descargar el proyecto!
Luis David De La Cruz | Blog 
Os faltó subir el cómo se ve en Windows 10.
Me gustaLe gusta a 1 persona
Tienes razón amigo, se comenzará a publicar también, saludos y gracias por tu sugerencia!
Me gustaMe gusta
[…] con el post… si es el primer blog que lees, anteriormente se realizó un tutorial de Hamburger Menú, y este ejemplo lo haremos con esta […]
Me gustaMe gusta
Hola Luis. De pura casualidad me topé con este gran blog. Super interesante y desde ya, estoy probando las cosas que explicas. Sobre el diseño hamburguesa, podrías hacer una pequeña explicación de cómo jalar ítems desde una base de datos, de modo q las opciones no seas estáticas. Gracias. Te seguiré
Me gustaMe gusta
Qué onda bro! Que bien que hayas encontrado el post, ahora contestando tu pregunta
Supongo que ya tienes tu web service creado, y tendríamos que ver primero no se si sea Rest o Soap… básicamente lo que tendríamos que hacer es contar el número de “opciones” que traemos de la base de datos y crear un ciclo for/ foreach para ir poniendo los valores en su posición por ejemplo
For (int i =0;i< cantidadElementos ; i ++)
{
New menu { Page = new Página(), menutitle = cantidadElemento[i] , MenuDetail=cantidadElementos[i], icon=cantidadElementos[i]}
}
Pero variaría bro por cuestiones de que no se precisamente cómo obtienes los datos de la BD
Me gustaMe gusta
https://luisdavidxamshap.wordpress.com/2018/03/09/multilenguaje-en-xamarin-forms/ puedes checar este post para que más o menos entiendas lo que explique bro jejeje saludos 🙂 !
Me gustaMe gusta
Hola Luis tu blog esta muy bien me esta ayudando mucho si antes de la panatalla de menu hamburguesa tengo una login y esta es mi main page y despues de loguearme paso a esta como lo haria poque lo que tengo me da error
Me gustaMe gusta
Qué tal Roberto Rubio, muchas gracias
Me gustaMe gusta
Qué tal Roberto, de casualidad tienes asignado el navigationpage en tu App.xml.cs??? Es decir de la siguiente manera
MainPage =New NavigationPage(new MainPage ());
Verifica eso ya que no debería de dar problemas amigo
Me gustaMe gusta
Excelente Blog bro!. Una pregunta
Unos de los items de mi menu es cerrar sesion este tiene la funcion de devolver al usuario hasta la pagina del login, el problema que tengo es que al regresar al login mantiene el menu Hamburguesa, hay una forma de hacer esa excepcion, debido a que este menu se me mantiene; en el login se me desacomodan ciertos objetos. Saludos
Me gustaMe gusta
Ya probaste de la siguiente manera?
Al dar click en la opción de cerrar sesión en tu método
Void cerrarSesion()
{
Application.Current.MainPage = NavigationPage(new LoginPage());
}
Inténtalo bro y me comentas
Muchas gracias por tu buen comentario bro
Me gustaMe gusta
Luis!!!!
Salvame la vida…
Estoy haciendo el ejercicio pero cuando corro el programa me aparece un error (Master and Detail must be set before adding MasterDetailPage to a container).
<!—->
———————-
Muchas gracias.
Me gustaMe gusta
Agregaste el NavigationPage?
Me gustaMe gusta
Hola Carlos, el problema es que en los paso a paso, no se muestra que se debe colocar una llamada al metodo MyMenu() debajo del InitializeComponent () en la clase HamburguerMenu. Si no colocas eso, te sale el mensaje que muestras.
public HamburgerMenu ()
{
InitializeComponent ();
MyMenu(); //Esta linea
}
Me gustaMe gusta
Hola Carlos, el problema es que en los paso a paso, no se muestra que se debe colocar una llamada al metodo MyMenu() debajo del InitializeComponent () en la clase HamburguerMenu. Si no colocas eso, te sale el mensaje que muestras.
public HamburgerMenu ()
{
InitializeComponent ();
MyMenu(); //Esta linea
}
Me gustaMe gusta
Hola, soy nueva en xamarin y quisiera saber cómo agregar submenú a las opciones del menu. Gracias
Me gustaMe gusta
Hola Cindy, puedes guiarte con este útil post
https://www.c-sharpcorner.com/article/xamarin-forms-expandable-listview-with-a-sub-listview-mvvm-pattern/
Saludos, estamos en contacto 🙂
Me gustaMe gusta
Saludos amigo, excelente artículo. Quería hacerte una consulta por cuanto soy nuevo en el mundo de xamarin. Estoy intentando ampliar tu ejemplo de modo de anteceder el menú con una pantalla de inicio de sesión, la cual me funciona, el problema radica en que en la pantlla del menú me coloca la barra de navegación, la cual desplaza todo hacia abajo. He intentado quitarle la barra con las opciones NavigationPage.HasNavigationBar=»False» y NavigationPage.HasBackButton=»False» pero lo que realmente hace es quitar el menú de la hamburguesa. Cómo puedo hacer para eliminar el menú de navegación y que sólo quedé el menú que diseñaste?
Me gustaMe gusta
Tienes que tener el NavigationBar bro, o en otro caso tienes que hacer un custom render
Me gustaMe gusta
Hola Luis muy bueno el post, tengo una duda, en mi proyecto el MainPage en App.xaml es un Log In page y no el HamburguerMenu, por lo que al iniciar da un error «Master and Detail must be set before MasterDetailPage», soy nuevo en Xamarin y no he podido corregir este error, agradeceria tu ayuda.
Me gustaMe gusta
malísimo tu ejemplo, está incompleto y tiene errores, si pones en el masterdetailpage el listview te genera 2 y a pesar de que compila, te deja el error.
Me gustaMe gusta