How to embed MasterDetailPage inside TabbedPage?

I want to embed MasterDetailPage inside TabbedPage.Children using XAML.
On samples page I did not find sample with such situation.
Is there any sample?

Best Answer

Answers

  • BillyLiuBillyLiu Member, Xamarin Team Xamurai

    @amaranth

    You could create a new Xamarin.Forms project using Master-Detail template.
    And you add a new Tabbed Page in the Forms project.
    Then change the MainPage in App.xaml.cs

     MainPage = new TabbedPage1();
    

    And change the Tabbed Page children to your MasterDetailPage. For example:

    <?xml version="1.0" encoding="utf-8" ?>
    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:views="clr-namespace:MasterDetailinTabbedPage.Views"
                x:Class="MasterDetailinTabbedPage.TabbedPage1">
      <!--Pages can be added as references or inline-->
        <NavigationPage Title="Browse">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage Title="Browse">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage>
    

    And the result:

  • amaranthamaranth Member ✭✭
    edited October 2018

    @BillyLiu, thank you for your reply!
    Sorry for my mistake in first post. I want to put on TabbedPage Children only ItemsPage without ADD button, when item selected in this page open ItemDetailPage:

        <?xml version="1.0" encoding="utf-8" ?>
        <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    xmlns:views="clr-namespace:MasterDetailinTabbedPage.Views"
                    x:Class="MasterDetailinTabbedPage.TabbedPage1">
          <!--Pages can be added as references or inline-->
            <NavigationPage Title="Browse">
                <x:Arguments>
                    <views:ItemsPage />
                </x:Arguments>
            </NavigationPage>
            <NavigationPage Title="Browse">
                <x:Arguments>
                    <views:ItemsPage />
                </x:Arguments>
            </NavigationPage>
        </TabbedPage>
    

    I have 3 questions here:
    1. Why in when item selected, in ItemDetailPage, item text and back button (<-) is showing above TabbedPage headers?
    2. How to remove free space above TabbedPage headers named "Browse"?
    3. How to open ItemsDetailPage on fullscreen without show TabbedPage headers?

  • amaranthamaranth Member ✭✭
    edited October 2018

    @BillyLiu Thank you for your help!
    Last question for this UI:
    How to move back button and title below TabbedPage headers in ItemDetailPage page when selected one item?

Sign In or Register to comment.