如何修复主详细信息页面在选项卡式页面中不起作用？

Question

我试图在选项卡式页面中显示主详细信息页面，但是在尝试执行此操作后，似乎主详细信息页面无法正常工作。

我已经对此进行了谷歌搜索，但是似乎出现的唯一问题是关于人们试图在主详细信息页面中显示选项卡式页面的问题，但是我正试图做相反的事情。 我从xamarin表单下载了主详细信息页面的示例代码，并尝试从那里进行修改，以查看此问题在默认示例代码上是否可重现，并且看起来确实如此。

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

然后将主页中的代码移植到另一个新创建的名为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;
    }
}

}

然后将mainpage.xaml移植到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>

然后在mainpage.cs上进行编辑

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

并编辑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>

运行代码。 然后单击显示。 您应该能够看到主显示页面。 单击主显示页面，然后在其中选择一个项目。 链接到该项目的页面被调用并显示在屏幕上，但主要详细信息页面消失了，我无法导航以查看主要详细信息页面上的其他项目。 我的预期结果是主详细信息页面的导航应该仍然可以导航到其中的其他项。

Answer 1

从文档

重要

MasterDetailPage被设计为根页面，在其他页面类型中将其用作子页面可能会导致意外和不一致的行为。

Answer 2

如何修复主详细信息页面在选项卡式页面中不起作用？

我尝试将MasterDetailPage添加到TabbedPage ，并且可以工作，但是您需要修改MasterDetailPage和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;
}

有关更多详细信息，请参考此完整示例 。