如何将详细信息页面转换为母版页面？

Question

我有一个Xamarin.Forms UWP应用程序，具有Master-Detail体系结构和多个Detail页面。我想将一个“详细信息页面”制作为一个母版页面，从而创建一个嵌套的“主-细节”对。我怎样才能做到这一点？

以下是一些代码：

    public MainMDPageMaster()
    {
        InitializeComponent();

        BindingContext = new MainMDPageMasterViewModel();
        ListView = MenuItemsListView;
    }

    class MainMDPageMasterViewModel : INotifyPropertyChanged
    {
        public ObservableCollection<MainMDPageMenuItem> MenuItems { get; set; }

        public MainMDPageMasterViewModel()
        {
            MenuItems = new ObservableCollection<MainMDPageMenuItem>(new[]
            {
                new MainMDPageMenuItem { Id = 0, Title = "Videos", TargetType = typeof(LaticreteVideoPage), IconSource = @"Assets\film-strip.jpg" },
                new MainMDPageMenuItem { Id = 1, Title = "Products", TargetType = typeof(ProductsPage), IconSource = @"Assets\products.jpg" }, // the Products page should become a new Master page
            });
        }

   ...
    }

... ProductsPage.xaml

 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="clr-namespace:CustomerKiosk.Custom"
         xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
         x:Class="CustomerKiosk.ProductsPage" >
  <ContentPage.Resources>
  <ResourceDictionary>
    <Style x:Key="NavButton" TargetType="Button">
      <Setter Property="VerticalOptions" Value="CenterAndExpand" />
      <Setter Property="HorizontalOptions" Value="Center" />
      <Setter Property="TextColor" Value="White" />
      <Setter Property="BackgroundColor"
            Value="{StaticResource BackgroundColor}"></Setter>
      <Setter Property="WidthRequest" Value="80" />
    </Style>
  </ResourceDictionary>
  </ContentPage.Resources>    
    <ContentPage.Content>
      <StackLayout>
        <ListView x:Name="ProductView" Margin="20">
          <ListView.ItemTemplate>
              <DataTemplate>
                  <ViewCell>
                      <Grid>
                          <Grid.ColumnDefinitions>
                              <ColumnDefinition Width="50" />
                              <ColumnDefinition Width="*" />
                          </Grid.ColumnDefinitions>

                            <ffimageloading:CachedImage 
                            Grid.Column="0"
                            HorizontalOptions="Center" 
                            VerticalOptions="Center"
                            DownsampleToViewSize="true"
                            Source="{Binding Front_Image, StringFormat='https://cdn.laticrete.com{0}'}">
                            </ffimageloading:CachedImage>
                          <Label Text="{Binding Name}" Grid.Column="1" FontAttributes="Bold" VerticalOptions="Center" />
                      </Grid>
                  </ViewCell>
              </DataTemplate>
          </ListView.ItemTemplate>
      </ListView>
    <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
      <Button x:Name="Prev" Text="Previous" Style="{StaticResource NavButton}" Clicked="OnPrevClicked" IsEnabled="false" />
      <Button x:Name="Next" Text="Next" Style="{StaticResource NavButton}" Clicked="OnNextClicked" />
    </StackLayout>
  </StackLayout>

ProductsPage.xaml.cs

public partial class ProductsPage : ContentPage
{
    private int PageNumber { get; set; } = 1;
    private const int pageSize = 100;

    public ProductsPage ()
    {
        InitializeComponent();

        ProductView.ItemsSource = Product.GetProducts(PageNumber, pageSize);
    }

    private void OnPrevClicked(object sender, EventArgs args)
    {
        ProductView.ItemsSource = Product.GetProducts(--PageNumber, pageSize);
        Prev.IsEnabled = PageNumber > 1;
    }

    private void OnNextClicked(object sender, EventArgs args)
    {
        ProductView.ItemsSource = Product.GetProducts(++PageNumber, pageSize);
        Prev.IsEnabled = true;
    }
}