6

I have xamarin form application that has login page. When user login successfully, the application navigate to MainPageMenu which is a master detail page. I have the same problem. This is my code in app.cs:

public App ()
{
    InitializeComponent();
    if (ApplicationSettings.NotLogin()) // Method to check if use if logged in or not
       MainPage = new LoginPage();            
    else            
       MainPage = new NavigationPage(new MainPageMenus());
}

In login Page, I write this code:

//Some code for login .....

MasterDetailPage fpm = new MasterDetailPage
{
      Master = new MainPageMenus(),
      Detail = new NavigationPage(new MainPage())
};
Application.Current.MainPage = fpm;

The application navigate to fpm page correctly, but the problem is that when I press menu icon, I get the detail page not the master page.

This problem is similar to one described in this post. And the code above is the selected as the answer to the question. But code doesn't work for me. In stack Overflow, there is a similar question and the answer was to use this:

Application.Current.MainPage = new NavigationPage(new MainPageMenus());

But in this case the menu icon is hidden.

Here is the Xml of MainPageMenus:

<?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="XProject.Menus.MainPageMenus"                                    
                  xmlns:local="clr-namespace:XProject"
                  Title="E-Clinic"
                  >
    <MasterDetailPage.Master>
        <ContentPage Title="Menu">
            <StackLayout Orientation="Vertical">
                <Button Clicked="GoToApplicationSettingsPage" Text="Application Settings"></Button>
                <Button Clicked="GoToHxSettingsPage" Text="Medical History Settings"></Button>
                <Button Clicked="GoToVisitsSettingsPage"  Text="Visits Settings"></Button>
                <Button Clicked="GoToCustomFieldsPage" Text="Custom Fields"></Button>
                <Button Clicked="GoToAddCustomFieldsPage" Text="Add Custom Fields"></Button>
                <Button Clicked="GoToAddCommonInfoPage" Text="Common Info"></Button>
                <Button Clicked="GoToAddStatisticsPage" Text="Statistics"></Button>
                <Button Clicked="GoToBackupPage" Text="Create Backup"></Button>
                <Button Clicked="GoToRestoreBackupPage" Text="Restore Backup"></Button>
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>

    <MasterDetailPage.Detail>
        <local:MainPage></local:MainPage>
    </MasterDetailPage.Detail>
</MasterDetailPage>
3

2 Answers 2

7

This:

Application.Current.MainPage = new NavigationPage(new MainPageMenus());

is definitely wrong. Here you are assigning a NavigationPage with a MasterDetailPage as a root page. This is not gonna work, because only the detail page of the MasterDetailPage can be a navigation page. The Master Page should not be affected by the navigation.

What you should actually do is having the DETAIL PAGE of your MasterDetailPage a NavigationPage with child Pages (ContentPages).

This code is actually looking well, but the only problem is: You are setting "MainPageMenus" (which is in fact your MasterDetailPage) as the master page of ANOTHER MasterDetailPage.

//Some code for login .....

MasterDetailPage fpm = new MasterDetailPage
{
      Master = new MainPageMenus(),
      Detail = new NavigationPage(new MainPage())
};
Application.Current.MainPage = fpm;

What you should do is: Create a ContentPage that is the same as MainPageMenus and lets name it as MainPageMenusAsContentPage. The Xaml of MainPageMenusAsContentPage is:

<?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="XProject.Menus.MainPageMenusAsContentPage"
             Title="Menu"
             >
    <ContentPage.Content>
        <StackLayout Orientation="Vertical">
            <Button Clicked="GoToApplicationSettingsPage" Text="Application Settings"></Button>
            <Button Clicked="GoToHxSettingsPage" Text="Medical History Settings"></Button>
            <Button Clicked="GoToVisitsSettingsPage"  Text="Visits Settings"></Button>
            <Button Clicked="GoToCustomFieldsPage" Text="Custom Fields"></Button>
            <Button Clicked="GoToAddCustomFieldsPage" Text="Add Custom Fields"></Button>
            <Button Clicked="GoToAddCommonInfoPage" Text="Common Info"></Button>
            <Button Clicked="GoToAddStatisticsPage" Text="Statistics"></Button>
            <Button Clicked="GoToBackupPage" Text="Create Backup"></Button>
            <Button Clicked="GoToRestoreBackupPage" Text="Restore Backup"></Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Then use this code:

var masterDetailPage = new MasterDetailPage()
{
    Master =new MainPageMenusAsContentPage(), 
    Detail = new NavigationPage(new MainPage())
};

Application.Current.MainPage = masterDetailPage;

EDIT: For navigation:

either masterDetailPage.Detail.PushAsync(new CoolPage()); or masterDetailPage.Detail = new NavigationPage(new CoolPage());

They behave different, the first pushes a page to the stack, the second replaces the current detail page

10
  • First I think you have error in this code Master = masterPage() you define masterPage as a content page and then you use it as a method. Also, I don't understand your solution correctly. What do you mean by the 2 ContentPages? What I should do for my master and detail pages (MainPageMenus and MainPage) ? Feb 21, 2018 at 10:08
  • Also what you mean by AnotherDetailPage()? Feb 21, 2018 at 10:10
  • Oh yeah, i fixed this method error, the brackets where wrong. And you seem to misunderstand the master and detail concept. Master = Menu that slides in from the side. Detail: presented page. Your "MainPageMenus" is a MasterDetailPage in itself, and you are setting it as a MasterPage of a MasterDetailPage. Got that? Your Master and DetailPage are 2 different ContentPages that you add to a MasterDetailPage.Master and MasterDetailPage.Detail
    – Csharpest
    Feb 21, 2018 at 10:11
  • AnotherDetailPage() could be your "ApplicationSettingsPage" or your "HxSettingsPage"
    – Csharpest
    Feb 21, 2018 at 10:14
  • 1
    I want you to create a MasterPage (Side menu page) and a DetailPage (the page that you actually want to show, for example ApplicationSettingsPage). Then create a new MasterDetailPage and set its DetailPage to ApplicationSettingsPage instance and the masterpage to your sidemenupage instance
    – Csharpest
    Feb 21, 2018 at 10:24
3

For the reference, from the official documentation:

A MasterDetailPage is designed to be a root page, and using it as a child page in other page types could result in unexpected and inconsistent behavior. In addition, it's recommended that the master page of a MasterDetailPage should always be a ContentPage instance, and that the detail page should only be populated with TabbedPage, NavigationPage, and ContentPage instances. This will help to ensure a consistent user experience across all platforms.

Commonly, mobile applications communicate with APIs using an authentication token which may expire or get rejected any moment. Which means that you also have to be prepared for user re-authentication any moment. In this case, your MainPage can be freely a MasterDetailPage and a login page could come as a modal page on a top of it when it or any other page when it is required.

1
  • I tried your solution before asking the question, it is work fine. But in my application I can't use this solution. So I give +1, because it is actually a good solution. Feb 21, 2018 at 10:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.