Navegación con menú lateral en Xamarin

Para navegar entre pestañas primero crearemos una «Masterpage» (Menu de hamburguesa), ahí tenemos una listview con las pestañas que queramos navegar.  

La masterpage tiene un elemento Detail para cargar una pagina como principal. 

Tutorial: 

1. Creamos una pagina «Master Page» sobre el proyecto común 
   1. También se puede crear una pagina «Content Page» 
   2. Cambiamos la definicion del xaml de «ContentPage» a «MasterDetailPage» 
   3. Hacemos que la pagina de .cs extienda de «MasterDetailPage» en vez de «ContentPage» 
2. En el xaml inluimos un listview:

 <MasterDetailPage.Master>        

<ContentPage Title=»Menu principal»>

             <StackLayout> 

               <Label Text=»titulo del menu» FontSize=»25″/>

<StackLayout Orientation=»Vertical»>

                   <ListView x:Name=»lsvmenu»>                        

<ListView.ItemTemplate>

                             <DataTemplate>                                

<ViewCell>

                                     <Label Text=»{Binding Titulo}»                                           

FontSize=»20″                                           

TextColor=»Black»/>                                

</ViewCell>

                             </DataTemplate>                        

</ListView.ItemTemplate>

                     </ListView> 

                </StackLayout>

             </StackLayout>

         </ContentPage>

   </MasterDetailPage.Master>  

3. Creamos un modelo de pagina de menu:

    public class MenuPagina 

    { 

        public String Titulo { get; set; } 

        public Type Pagina { get; set; } 

    } 

1. En el archivo cs de la masterpage creamos una lista de paginas hijas y añadimos las paginas: 

  public partial class PaginaPrincipal : MasterDetailPage 

    { 

        public List<MenuPagina> MiMenu { get; set; } 

        public PaginaPrincipal() 

        { 

            InitializeComponent(); 

            MiMenu = new List<MenuPagina>(); 

            MenuPagina pag1 = new MenuPagina() { Titulo = «Home», Pagina = typeof(PaginaHija1) }; 

            MiMenu.Add(pag1); 

        } 

    } 

Repetimos las ultimas lineas tantas veces como pestañas querramos en nuestro menuprincipal. 

El typeof indicamos cual es el nombre de la pagina y el titulo muestra el nombre en el listview. 

1. A continuacion incluimos la lista de paginas como origen de datos del listview: 

this.lsvmenu.ItemsSource = MiMenu; 

1. Indicamos cual es la pagina a cargar por defecto con el detalle:  

 Detail = new NavigationPage((Page)Activator.CreateInstance(typeof(PaginaHija1))); 

            this.lsvmenu.ItemSelected += Lsvmenu_ItemSelected; 

1. Para cambiar de pagina tenemos que capturar el evento de seleccionar elemento: 

private void Lsvmenu_ItemSelected(object sender, SelectedItemChangedEventArgs e) 

        { 

            MenuPagina pagina = e.SelectedItem as MenuPagina; 

            Detail = new NavigationPage((Page)Activator.CreateInstance(pagina.Pagina)); 

            IsPresented = false; 

        } 

Aquí estamos capturando la pagina asociada al click y poniendola como detail. Despues escondemos el menu lateral. 

1. Para que se ejecute tenemos que ponerlo como pantalla principal de esta forma: 
   1. En la pagina App.xaml.cs pambiamos la linea de MainPage por esta: 
    MainPage = new NavigationPage(new PaginaPrincipal ()); 

Autor/a: Enrique González

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin 

Centro: Tajamar 

Año académico: 2018-2019 

Código / recursos utilizados / Otros datos de interés: Enlace a GitHub