locked
How to embed MasterDetailPage inside TabbedPage? RRS feed

  • Question

  • User377655 posted

    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?

    Tuesday, October 2, 2018 6:44 AM

Answers

  • User364855 posted

    @amaranth

    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"? There is NavigationBar for the page. You could hide it by using NavigationPage.SetHasNavigationBar(this, false); in ItemsPage.

    3. How to open ItemsDetailPage on fullscreen without show TabbedPage headers? You could use PushModalAsync instead of PushAsync. For example:

            await Navigation.PushModalAsync(new NavigationPage(new ItemDetailPage(new ItemDetailViewModel(item))));
    

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, October 4, 2018 2:44 AM

All replies

  • User364855 posted

    @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:

    Wednesday, October 3, 2018 3:13 AM
  • User377655 posted

    @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?

    Wednesday, October 3, 2018 11:51 AM
  • User364855 posted

    @amaranth

    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"? There is NavigationBar for the page. You could hide it by using NavigationPage.SetHasNavigationBar(this, false); in ItemsPage.

    3. How to open ItemsDetailPage on fullscreen without show TabbedPage headers? You could use PushModalAsync instead of PushAsync. For example:

            await Navigation.PushModalAsync(new NavigationPage(new ItemDetailPage(new ItemDetailViewModel(item))));
    

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, October 4, 2018 2:44 AM
  • User377655 posted

    @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?

    Friday, October 5, 2018 7:42 AM
  • User295945 posted

    Thats a good tutorial! Where can i find more of this topic?

    Monday, April 27, 2020 9:54 AM