Xamarin Forms – Create MasterDetailPage Navigation drawer

In this post we will see How we can create Navigation drawer in Xamarin forms using MasterDetailPage. In Xamarin forms it is called MasterDetailPage. This example can be used for both Android and iOS. The navigation drawer will contain a Profile image and two labels adjacent to the navigation image. So let’s start.

DOWNLOAD SOURCE CODE.

 

In your Xamarin forms application project create a new MasterDetailPage with name MasterPage.xaml and edit it as below:

MasterPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigationDrawerDemo.MasterPage"
xmlns:pages="clr-namespace:NavigationDrawerDemo">
<MasterDetailPage.Master>
<ContentPage Title="Menu" BackgroundColor="#fff">
<StackLayout Orientation="Vertical">
<ScrollView VerticalOptions="Start">
<StackLayout Orientation="Vertical" BackgroundColor="White">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" Margin="5,50,5,5"
BackgroundColor="White" HorizontalOptions="FillAndExpand">
<Image Source="profile.png" BackgroundColor="Transparent" HeightRequest="100"
WidthRequest="100" VerticalOptions="Center" />

<StackLayout Orientation="Vertical">
<Label Text="Panda Profile" HorizontalTextAlignment="Start" FontSize="Large"
Margin="2,0,0,0" HorizontalOptions="Start" VerticalOptions="EndAndExpand" TextColor="Black"/>
<Label Text="Xamarin Forms" HorizontalTextAlignment="Start"
FontSize="Small" Margin="2,0,0,0" HorizontalOptions="Start"
VerticalOptions="StartAndExpand"
TextColor="#16161d" />
</StackLayout>
</StackLayout>

<StackLayout BackgroundColor="Black"
MinimumHeightRequest="1" Orientation="Vertical"
HeightRequest="1"
HorizontalOptions="FillAndExpand">
<Label Text="fff" FontSize="1" TextColor="Black"
BackgroundColor="Black"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>

<ListView x:Name="navigationList" Margin="0" SeparatorVisibility="Default"
VerticalOptions="Start" ItemTapped="Item_Tapped" >

<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand"
VerticalOptions="Center">

<Image Source="option_pointer.png"
HorizontalOptions="Start"
VerticalOptions="Center" Margin="15,0,5,2"
HeightRequest="25"
WidthRequest="25"/>
<Label Text="{Binding OptionName}" FontAttributes="Bold"
FontSize="Default" Margin="10,0,5,2"
HorizontalOptions="Start" VerticalOptions="Center"
TextColor="#4a4848"/>

</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>

<MasterDetailPage.Detail>
<ContentPage>
<Label Text="Welcome to Panda App" FontSize="Large"/>
</ContentPage>
</MasterDetailPage.Detail>

</MasterDetailPage>

This MasterDetailPage contains a header with user profile image and Name. And below navigation header will be ListView.

For Profile image please go the iconfinder link below:

ICONSOURCE

Now edit the .cs page as below:

MasterPage.xaml.cs:

using System;
using System.Collections.Generic;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace NavigationDrawerDemo
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MasterPage : MasterDetailPage
{
List<MenuItems> menu;
public MasterPage()
{
InitializeComponent();
menu = new List<MenuItems>();

menu.Add(new MenuItems { OptionName="Browse Products" });
menu.Add(new MenuItems { OptionName = "Your orders" });
menu.Add(new MenuItems { OptionName = "Categories" });
menu.Add(new MenuItems { OptionName = "Profile" });
menu.Add(new MenuItems { OptionName = "Settings" });
menu.Add(new MenuItems { OptionName = "Logout" });
navigationList.ItemsSource = menu;
Detail = new NavigationPage(new BrowseProducts());
}

private void Item_Tapped(object sender, ItemTappedEventArgs e)
{
try
{
var item = e.Item as MenuItems;

switch (item.OptionName)
{
case "Browse Products":
{
Detail = new NavigationPage(new BrowseProducts());
IsPresented = false;
}
break;
case "Categories":
{
Detail = new NavigationPage(new Categories());
IsPresented = false;
}
break;
case "Profile":
{
Detail.Navigation.PushAsync(new Profile());
IsPresented = false;
}
break;
}
}
catch (Exception ex)
{

}
}
}

public class MenuItems
{
public string OptionName { get; set; }
}
}

Create following ContentPages for Navigation drawer and edit as below:

1. BrowseProducts.xaml
2. Categories.xaml
3. Profile.xaml

BrowseProducts.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Products"
x:Class="NavigationDrawerDemo.BrowseProducts">
<ContentPage.Content>
<StackLayout>
<Label Text="Browse Products"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Categories.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Categories"
x:Class="NavigationDrawerDemo.Categories">
<ContentPage.Content>
<StackLayout>
<Label Text="Welcome to Categories"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

Profile.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="User Profile"
x:Class="NavigationDrawerDemo.Profile">
<ContentPage.Content>
<StackLayout>
<Label Text="This is your Profile Page"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>

You can edit these forms according to your needs in the Xamarin application. These forms can be used as Detail to Masterdetail page or as Navigation stack. It depends on your requirements.

To set page as Detail to MasterDetailPage use:

Detail = new NavigationPage(new Categories());

And to open it as Navigation Stack use:

Detail.Navigation.PushAsync(new Profile());

You can download source code for this tutorial here:

DOWNLOAD SOURCE CODE.

Also see:

Xamarin forms creating Pie Charts

Xamarin forms creating Bar Graphs using Oxyplot library.

Xamarin forms creating Splash Screen.