Answers

• BillyLiu Member, Xamarin Team Xamurai

  October 2018

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

  1
• amaranth Member ✭✭

  October 2018 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?

  

  0
• BillyLiu Member, Xamarin Team Xamurai

  October 2018 Accepted Answer

  @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))));
  

  

  5
• amaranth Member ✭✭

  October 2018 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?

  0