有什么方法可以在Xamarin.Forms的同一页上插入导航栏和标签栏？

Question

I'm into a new project and have been stuck trying to insert a Navigation Bar and a Tab Bar in the same page on Xamarin Forms, as the title says. The problem is: I've only been able to insert one or another, never both. Do you guys know any way to solve this, maybe with a custom renderer, or something like this?

Either the XAML code starts with

<ContentPage ... />

or it starts with

<TabbedPage ... />

I'd be glad if someone could help!

Answer 1

Is there any way to insert a Navigation Bar and a Tab Bar in the same page on Xamarin.Forms?

Of course you can implement it! You can populate the TabbedPage with a collection of child Page objects, such as a collection of ContentPage or NavigationPage instances.Refer to the following code.

in App.xaml.cs (HomePage is a TabbedPage)

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        MainPage =new HomePage(); 
    }

    protected override void OnStart()
    {
        // Handle when your app starts
    }

    protected override void OnSleep()
    {
        // Handle when your app sleeps
    }

    protected override void OnResume()
    {
        // Handle when your app resumes
    }
}

in HomePage.xaml.cs (Mypage and MyPage1 are ContentPages)

public partial class HomePage : TabbedPage
{
    public HomePage()
    {
        InitializeComponent();


        var contentPage = new MyPage1();
        contentPage.Title = "Page1";
        contentPage.Icon = "Mine.png";

        var navigationPage = new NavigationPage(new MyPage());
        navigationPage.Icon = "Mine.png";
        navigationPage.Title = "Page2";

        Children.Add(contentPage);
        Children.Add(navigationPage);

    }

  }
}

Or you can implement it with XAML code in HomePage.xaml

<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:xxx" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="xxx.HomePage">
  <local:MyPage Title="Page1" Icon="xxx.png"/>    
  <NavigationPage Title="Page2" Icon="xxx.png">
    <x:Arguments>
        <local:MyPage1 />
    </x:Arguments>
  </NavigationPage>
</TabbedPage>

Now the TabbedPage is populated with two child Page objects. The first child is a ContentPage instance, and the second tab is a NavigationPage containing a ContentPage instance. Just like the following images.

effect1

effect2

Answer 2

a TabbedPage is a container for other pages. Each tab can contain a NavigationPage as it's child

TabbedPage
  Tab 1 - NavigationPage(ContentPage)
  Tab 2 - ContentPage
  Tab 3 - NavigationPage(ContentPage)