Xamarin Forms How-to: Navigation with Slide Out Menu

Historical Post: This article was originally written in 2017. The technology discussed may be outdated or deprecated. Keeping it here for historical reference and to show I’ve been blogging since 2015!

Introduction

Xamarin Forms is a powerful, cross platform mobile application framework. A key challenge in cross-platform development is maintaining consistent user experience across platforms. This tutorial demonstrates creating a MasterDetailPage application featuring a hamburger-style slide-out menu.

Prerequisites

The solution requires a functional Xamarin development environment. The tutorial uses Visual Studio for Mac but remains framework-agnostic, allowing adaptation to various MVVM frameworks.

Project Setup

Create a new Xamarin Forms Multi Platform application via File > New Solution > Multiplatform > App > Blank Forms App. Both PCL and shared project approaches work equally well for this implementation.

Implementation Structure

Directory Organization

Create a ‘Pages’ directory within the shared project to organize application pages.

Key Components

The MainMenu class inherits from MasterDetailPage and manages menu navigation logic:

1
public partial class MainMenu : MasterDetailPage
2
{
3
    public List<MainMenuItem> MainMenuItems { get; set; }
4

5
    public MainMenu()
6
    {
7
        BindingContext = this;
8
        MainMenuItems = new List<MainMenuItem>()
9
        {
10
            new MainMenuItem() { Title = "Page One", Icon = "menu_inbox.png", TargetType = typeof(PageOne) },
11
            new MainMenuItem() { Title = "Page Two", Icon = "menu_stock.png", TargetType = typeof(PageTwo) }
12
        };
13
        Detail = new NavigationPage(new PageOne());
14
        InitializeComponent();
15
    }
16

17
    public void MainMenuItem_Selected(object sender, SelectedItemChangedEventArgs e)
18
    {
19
        var item = e.SelectedItem as MainMenuItem;
20
        if (item != null)
21
        {
22
            if (item.Title.Equals("Page One"))
23
                Detail = new NavigationPage(new PageOne());
24
            else if (item.Title.Equals("Page Two"))
25
                Detail = new NavigationPage(new PageTwo());
26
            MenuListView.SelectedItem = null;
27
            IsPresented = false;
28
        }
29
    }
30
}

XAML Structure

The interface uses a MasterDetailPage with a ContentPage master containing a StackLayout and ListView for menu items, styled with specific background colors (#616161 for header, #f5f5f5 for menu).

Technical Context

Xamarin is using the code inside the shared project/PCL to transpile versions of iOS and Android, leveraging XAML design patterns familiar to .NET desktop developers.

Resources

Complete code is available on GitHub for free use as a foundation for mobile applications.