The menu page is a Xamarin.Forms page that will be shown when the user clicks the menu button.

In this example, our MenuPage is a simple content page with a StackLayout containing a label and a ListView of our menu items:

public class MonkeyMenuPage : ContentPage 
{ 
  public ListView MonkeyMenu { get; set; } 
  
  public MonkeyMenuPage () 
  { 
    Icon = "ourMenuButton.png"; 
    Title = "menu"; // The Title property must be set. If we don't the
    application will throw an error 
 
    MonkeyMenu = new MenuListView (); 
  
    var menuLabel = new ContentView { 
      Content = new Label { 
        Text = "MENU"  
      } 
    }; 
  
    var layout = new StackLayout {  
      Spacing = 0,  
      VerticalOptions = LayoutOptions.FillAndExpand 
    }; 
 
    layout.Children.Add (menuLabel); 
    layout.Children.Add (MonkeyMenu); 
  
    Content = layout; 
  } 
} 

Menu items will contain our menu data. The most important data type is Target.

When a user clicks on a menu item, the NavigateTo method will create a new page from TargetType and push that page onto the stack:

 
    public class MonkeyMenuItem 
    { 
        public string Title { get; set; } 
 
        public string IconSource { get; set; } 
 
        public Type TargetType { get; set; } 
    } 

We can create three pages, which we will call Species, History, and Settings, where we can put the content we want to see in the detail page.

If we right-click on the project and click on the New File menu item, the New File dialog will open. We can select Cross-Platform on the left-hand list and select Forms ContentPage on the right-hand list and name it as SpeciesPage, shown as follows:

This will create a hello world page for us to show a simple message on screen.

The SpeciesPage will appear like this:

using Xamarin.Forms; 
 
namespace XBE 
{ 
    public class SpeciesPage : ContentPage 
    { 
        public SpeciesPage  () 
        { 
            Content = new StackLayout {  
                Children = { 
                    new Label { Text = "Hello ContentPage" } 
                } 
            }; 
        } 
    } 
}  

You may also add HistoryPage and SettingsPage and continue to the next step.

The MenuListData class is the data structure that contains our application's navigation.

We can get this data from the database or configuration file.

The menu structure of this example is done by adding the code below to the list of pages we want to show:

public class MonkeyMenuListData : List<MonkeyMenuItem> 
    { 
        public MonkeyMenuListData  () 
        { 
            this.Add (new MonkeyMenuItem () {  
                Title = "Species",  
                IconSource = "species.png",  
                TargetType = typeof(SpeciesPage) 
            }); 
 
            this.Add (new MenuItem () {  
                Title = "History",  
                IconSource = "history.png",  
                TargetType = typeof(HistoryPage) 
            }); 
 
            this.Add (new MenuItem () {  
                Title = "Settings",  
                IconSource = "settings.png",  
                TargetType = typeof(SettingsPage) 
            }); 
        } 
    } 

The menu list models the ListView defining the appearance of the cells:

public class DrawerMenuListView : ListView 
{ 
  public MonkeyMenuListView () 
        { 
            List<MonkeyMenuItem> data = new MonkeyMenuListData (); 
 
            ItemsSource = data; 
            VerticalOptions = LayoutOptions.FillAndExpand; 
            BackgroundColor = Color.Transparent; 
 
            var cell = new DataTemplate (typeof(ImageCell)); 
            cell.SetBinding (TextCell.TextProperty, "Title"); 
        }  
} 

The root page needs to inherit from MasterDetailPage and set in the constructor the initialization of the view. We can set the instance of MonkeyMenu as Master and the first page we want to show (SpeciesPage) as Detail:

using Xamarin.Forms; 
 
namespace XBE 
{ 
    public class RootPage : MasterDetailPage 
    { 
        public RootPage () 
        { 
            var menuPage = new MonkeyMenu (); 
 
            menuPage.Menu.ItemSelected += (sender, e) =>
            NavigateTo (e.SelectedItem as MonkeyMenuItem); 
 
            Master = menuPage; 
            Detail = new NavigationPage (new SpeciesPage ()); 
        } 
 
        void NavigateTo (MonkeyMenuItem menu) 
        { 
            Page displayPage = (Page)Activator.CreateInstance
            (menu.TargetType); 
 
            Detail = new NavigationPage (displayPage); 
 
            IsPresented = false; 
        } 
    } 
} 

If we set the root page as the main page in the application file, we can already deploy it on our cross platform devices.

The constructor of our app should now appear like this:

public App () 
{ 
     // The root page of your application 
     MainPage = new RootPage (); 
} 

We can use the push and pop  methods of the INavigation interface to navigate between different pages. Calling those methods creates a stack of pages. When we call the push methods, a page will be added on top of this stack making the stack bigger. It's very important to pop in order to remove the page from the stack when we want to go back to other pages. On the navigation pages, the back button will pop the current page from the stack revealing the page beneath it.

When we pop all the pages and we arrive in the root page, the back button will not be available and the pop methods cannot be used. In the INavigation interface, there is also a pop to root method that will remove all the pages of the stack except the root page.