Create Hamburger menu with dynamic menu list in xamarin form

Hi all,

I have used master detail page to create an hamburger Menu. I would like to have a menu with 3 items initially, once user logged in, the menu should be changed to 4 items.

Initally

once logged in

Mainpage.axml

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:xxx"
x:Class="xxx.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="MasterPage">local:MasterPage>
MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<local:Pages.LoginPage>local:Pages.LoginPage>
x:Arguments>
NavigationPage>
MasterDetailPage.Detail>
MasterDetailPage>

Main Page.axml.cs

public partial class MainPage : MasterDetailPage
{
public MainPage()
{
InitializeComponent();
MasterBehavior = MasterBehavior.Popover;//new
MasterPage.listView.ItemSelected += OnItemSelected;
Master = MasterPage;
NavigationPage page = new NavigationPage(new Pages.LoginPage());
page.BarBackgroundColor = Color.FromHex("#29B6F6");
Detail = page;
}
private void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as ClassFiles.MasterPageItem;
if (item!=null)
{
Page displayPage = (Page)Activator.CreateInstance(item.TargetType);
NavigationPage page = new NavigationPage(displayPage);
page.BarBackgroundColor = Color.FromHex("#29B6F6");
Detail = page;
//Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
MasterPage.listView.SelectedItem = null;
IsPresented = false;
}
}
}

Master Page.axml

xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="xxx.MasterPage"
Padding="0,50,0,0"
Title="Titles">
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="lstScreens" VerticalOptions="FillAndExpand" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Title}">TextCell>
DataTemplate>
ListView.ItemTemplate>
ListView>
StackLayout>
ContentPage.Content>
ContentPage>

Master Page.axml

public partial class MasterPage : ContentPage
{
public ListView listView { get { return lstScreens; } }
public MasterPage()
{
InitializeComponent();
var masterpageItem = new List();
masterpageItem.Add(new ClassFiles.MasterPageItem
{
Title="Login",
TargetType = typeof(Pages.LoginPage)
});
masterpageItem.Add(new ClassFiles.MasterPageItem
{
Title = "Sign Up",
TargetType = typeof(Pages.SignUpPage)
});
listView.ItemsSource = masterpageItem;
}
}

async void Login_Procedure(object sender, EventArgs e)
{
tbl_Login objLogin = new tbl_Login();
objLogin.UserName = EntryUsername.Text;
objLogin.Password = EntryPassword.Text;
if (objLogin.checkInformation())
{
if (data.GetLoginUserDetails(objLogin))
{
Navigation.InsertPageBefore(new Pages.HomePage(), this);//Navigate to Home page in master details relation
await Navigation.PopToRootAsync();
}
else
{
Error_label.IsVisible = true;
Error_label.Text = "Please Enter valid Credentials";
//await DisplayAlert("Login", "Please Enter valid Credentials", "OK");
}
}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Logesh Palani8y ago
If you mean listing the items with different template you can use ListView with TemplateSelector. If you want to use different page template you can use ContentPage or TemplatedPage for both Master and Detail side with setting te property ControlTemplateIf you mean listing the items with different template you can use ListView with TemplateSelector. If you want to use different page template you can use ContentPage or TemplatedPage for both Master and Detail side with setting te property ControlTemplate