How to fix master detail page not working in tabbed page?

Question

I am trying to display a master detail page in a tabbed page but it seems like the master detail page is not working normally after I tried doing this.

I have googled about this but it seems like the only questions which showed up was about people trying to display a tabbed page in a master detail page but I am trying to do the inverse. I downloaded the sample code for master detail page from xamarin forms and tried modifying from there to see if this issue is reproducible on a default sample code and seems like it was.

Download https://developer.xamarin.com/samples/xamarin-forms/Navigation/MasterDetailPage/

Then port the code in the main page to another newly created page called submainpage.cs

 public partial class SubMainPage : MasterDetailPage
 {
public SubMainPage()
{
    InitializeComponent();

    masterPage.listView.ItemSelected += OnItemSelected;

    if (Device.RuntimePlatform == Device.UWP)
    {
        MasterBehavior = MasterBehavior.Popover;
    }
}

void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    var item = e.SelectedItem as MasterPageItem;
    if (item != null)
    {
        Detail = new 
      NavigationPage((Page)Activator.CreateInstance(item.TargetType));
        masterPage.listView.SelectedItem = null;
        IsPresented = false;
    }
}

}

Then port the mainpage.xaml to submainpage.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" 
xmlns:local="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.SubMainPage">
<MasterDetailPage.Master>
    <local:MasterPage x:Name="masterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <local:ReminderPage />
        </x:Arguments>
    </NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>

Then on the edit the mainpage.cs

public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();
        }        
    }

and edit the mainpage.xaml

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:masterDetailPageNavigation="clr-namespace:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
            mc:Ignorable="d"
            x:Class="MasterDetailPageNavigation.MainPage">

    <ContentPage Title="FirstTab" >
        <StackLayout Orientation="Vertical">
            <Button Text="Sample Text" TextColor="White" BackgroundColor="Gray"   FontSize="40"/>
            <Label Text="Test" FontSize="40"/>
        </StackLayout>
    </ContentPage>
    <masterDetailPageNavigation:SubMainPage x:Name="Drawer" Title="Display"  >       
    </masterDetailPageNavigation:SubMainPage>

</TabbedPage>

Run the code. Then click on Display. You should be able to see the master display page. Click on the master display page and select on an item in it. The page linked to the item gets called and shown on screen but the master detail page disappears and I am unable to navigate to view the other items on the master detail page. My expected result was that the navigation for master detail page should still be there for me to nav to the other items contained in it.

Answer 1

from the docs

Important

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.

Answer 2

How to fix master detail page not working in tabbed page?

I try add MasterDetailPage into TabbedPage, and it works, but you need modify part code for MasterDetailPage and TabbedPage.

TabbedPage

<TabbedPage.Children>
    <NavigationPage Title="Browse">
        <NavigationPage.Icon>
            <OnPlatform x:TypeArguments="FileImageSource">
                <On Platform="iOS" Value="tab_feed.png" />
            </OnPlatform>
        </NavigationPage.Icon>
        <x:Arguments>
            <views:ItemsPage />
        </x:Arguments>
    </NavigationPage>

    <NavigationPage Title="About">
        <NavigationPage.Icon>
            <OnPlatform x:TypeArguments="FileImageSource">
                <On Platform="iOS" Value="tab_about.png" />
            </OnPlatform>
        </NavigationPage.Icon>
        <x:Arguments>
            <views:AboutPage />
        </x:Arguments>
    </NavigationPage>

  <!--MasterDetailPage-->

    <NavigationPage Title="Master">
        <NavigationPage.Icon>
            <OnPlatform x:TypeArguments="FileImageSource">
                <On Platform="iOS" Value="tab_about.png" />
            </OnPlatform>
        </NavigationPage.Icon>
        <x:Arguments>
            <local:RooterMasterDetailPage Title="Master" />
        </x:Arguments>
    </NavigationPage>
</TabbedPage.Children>

MasterDetailPage

private void ListView_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    var item = e.SelectedItem as RooterMasterDetailPageMenuItem;
    if (item == null)
        return;

    var page = (Page)Activator.CreateInstance(item.TargetType);
    page.Title = item.Title;

    // remove navigationpage

    Detail = page;
    IsPresented = false;

    MasterPage.ListView.SelectedItem = null;
}

For more detail please refer this is complete sample.