Como hacer un menu con Xamarin – Ejemplo

Programación

¿Estás aprendiendo Xamarin y necesitas implementar un menú en tu aplicación móvil? En esta entrada te muestro el proceso y código necesario para que hoy mismo aprendas como hacer un menu con Xamarin desde cero y que tus apps luzcan geniales.

Nota: Este ejemplo fue desarrollado utilizando Visual Studio Community 2017 con Xamarin  4.6 en Windows 8.

Crear proyecto

Para iniciar con este ejemplo donde aprenderás como hacer un menu con xamarin lo primero que tienes que hacer abrir tu Visual Studio con Xamarin instalado y crear un nuevo proyecto, para esto te debes ir al menú Archivo – Nuevo – Proyecto, en la ventana que te aparecerá eliges Cross-Platform para que tu app esté para Android e iOS (también para Windows si estas en W10) y también seleccionas Cross Plataform App (Xamarin), le asignas un nombre a tu proyecto y das clic en Aceptar.

como hacer un menu con xamarin

Enseguida te aparecerá una nueva ventana en la cual debes seleccionar la plantilla Aplicación en blanco, en el campo Tecnología de IU eliges Xamarin.Forms y la Estrategia de uso compartido de código será Biblioteca de clases portátil (PCL), finalmente das clic en OK.

como hacer un menu con xamarin

Como hacer un menu con Xamarin

Continuando con este ejemplo donde aprenderás como hacer un menu con xamarin una vez que has creado el proyecto te debes ubicar el explorador de soluciones y dar click en el proyecto con el nombre de tu aplicación entre paréntesis Portable, es decir, en mi caso sería MenuConXamarin (Portable) y seleccionas el archivo App.xaml.cs que se ha creado automáticamente. Sino puedes ver dicho archivo debes de dar click en App.xaml para desplegar su contenido.

Lo primero que tienes que hacer es crear una propiedad o variable del tipo MasterDetailPage que ocuparás más adelante para definir cuál será la pantalla Detail dentro del menú, esta la colocas arriba del constructor.

public static MasterDetailPage Modificador { get; set; }

Enseguida seleccionas el archivo MainPage.xaml y cambias el tipo de página de ContentPage por MasterDetailPage.

En el code behind del mismo archivo (MainPage.xaml.cs) asegurate de heredar también de MasterDetailPage y no de ContentPage.

public partial class MainPage : MasterDetailPage

Dentro del constructor de esta clase debes especificar cual será la pantalla Master y Detail, en mi caso he definido Menu e Inicio, las cuales crearé más adelante.

public MainPage()
        {
            InitializeComponent();

            //Definimos nuestra pantalla Master
            Master = new Menu();

            //Definimos nuestra pantalla Detail
            Detail = new NavigationPage(new Inicio());

            App.Modificador = this;
        }

Puedes observar que también se define que esta clase será igual a la propiedad o variable Modificador que creaste anteriormente en el archivo App.xaml.cs.

A continuación debes crear las clases Inicio y Menu, para esto simplemente das clic derecho sobre el proyecto MenuConXamarin (Portable) – Agregar – Nuevo elemento – Xamarin.Forms – Content Page y le asignas un nombre al archivo.

como hacer un menu con xamarin

Una vez que tengas creadas las dos nuevas páginas, trabajaremos sobre la clase Menu.xaml, simplemente dentro de un StackLayout debes declarar cuatro botones: Item1, Item2, Item3 e Item4, estos serán los elementos del menú.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MenuConXamarin.Menu"
             Title="Menu">
    <StackLayout>
        <Button x:Name="Item1" Text="Item-1"/>
        <Button x:Name="Item2" Text="Item-2"/>
        <Button x:Name="Item3" Text="Item-3"/>
        <Button x:Name="Item4" Text="Item-4"/>
    </StackLayout>
</ContentPage>

En el code behind del mismo archivo (Menu.xaml.cs) dentro del constructor crearás los eventos de clic para cada elemento del menú, cabe resaltar que aquí es donde ocuparás la propiedad Modificador que creaste al inicio de este ejemplo en la clase App.xaml.cs ya que por medio de esta se hace el cambio del Detail de nuestro menú.

Puedes ver que con el atributo x:Name establecemos un nombre a cada elemento para poder referirnos a él en su code behind, es decir, en el archivo .xaml.cs.

Para cada elemento del menú se debe crear una pantalla nueva, en este caso puedes ver que se hace referencia a: PantallaItemUno, PantallaItemDos, PantallaItemTres y PantallaItemCuatro.

Estas pantallas las crearás de la misma manera que lo hiciste con la de Menu e Inicio.

public Menu()
        {
            InitializeComponent();

            Item1.Clicked += async (sender, e) =>
            {
                await App.Modificador.Detail.Navigation.PushAsync(new PantallaItemUno());
                App.Modificador.IsPresented = false;
            };

            Item2.Clicked += async (sender, e) =>
            {
                await App.Modificador.Detail.Navigation.PushAsync(new PantallaItemDos());
                App.Modificador.IsPresented = false;
            };

            Item3.Clicked += async (sender, e) =>
            {
                await App.Modificador.Detail.Navigation.PushAsync(new PantallaItemTres());
                App.Modificador.IsPresented = false;
            };

            Item4.Clicked += async (sender, e) =>
            {
                await App.Modificador.Detail.Navigation.PushAsync(new PantallaItemCuatro());
                App.Modificador.IsPresented = false;
            };
        }

Es muy importante incluir la linea App.Modificador.IsPresented = false para que nuestro menú se cierre al dar click sobre un elemento del mismo e ir a una nueva página.

Para este ejemplo solo hemos agregado un título y una etiqueta a la PantallaItemUno, PantallaItemDos, PantallaItemTres y PantallaItemCuatro, que haga referencia a ellas cuando se le da clic en su correspondiente elemento del menú, esto lo hacemos en el .xaml de cada página.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MenuConXamarin.PantallaItemUno"
             Title="Pantalla Item Uno">
    
    <ContentView VerticalOptions="Center" HorizontalOptions="Center">
        <Label Text="Hola estas en la pantalla Item 1"/>
    </ContentView>

</ContentPage>

Finalmente ejecutas tu proyecto y el resultado es el siguiente:

como hacer un menu con xamarin

De esta manera concluimos esta pequeña entrada en la cual te muestro como hacer un menu con Xamarin, si tienes alguna duda ponte en contacto o dejame tus comentarios.

No olvides compartir esta entrada con tus amigos si te ha parecido interesante.

Como hacer un menu con Xamarin – Ejemplo
5 (100%) 8 votos

Leave a Comment

Sígueme en redes sociales
  • como hacer un blog personal desde cero - denisse estrada
    Suscríbete al blog