Open new Page withing a tab-navigation

Question

Iam using a tab navigation and withing a page and want to open a new one.

In my app.xaml.cs I create the Navigation page:

public App()
{
    InitializeComponent();
    MainPage = new NavigationPage(new RootPage());
}

In the RootPage I fill the Navigation:

public RootPage()
{
        NavigationPage.SetHasNavigationBar(this, false);

        Children.Add(new TestPage1
        {
            Title = "TestPage1"
        });

        Children.Add(new TestPage2
        {
            Title = "TestPage2"
        });
        Children.Add(new TestPage3
        {
            Title = "TestPage3"
        });
}

This type of navigation works pretty well already and looks nice. Now I want to open a new page within the TestPage3: TestPage3.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="DemoApplication.TestPage3">
  <Button x:Name="openSetup"  Clicked="ItemClicked" Text="open Settings"/>
</ContentPage>

TestPage3.xaml.cs:

namespace DemoApplication
{
    public partial class TestPage3 : ContentPage
    {
        public TestPage3()
        {
            InitializeComponent();
        }
        void ItemClicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new TestPage4());
        }
    }
}

This also works but doesnt look nice.

The new Content loads below the original tab navigation and after it's loaded the tab navigation disappears - so the content of Page4 is kind of jumping around :)

In other apps like soundcloud they do the same but it looks way more smooth.

Is there any way to like shift the tab-navigation between the back-navigation more smooth?

Thanks for your help :)

Answer 1

if you want to navigate within a tab, each tab should have it's own NavigationPage. The TabbedPage itself should not be within a NavigationPage.

MainPage = new RootPage();

and

Children.Add(new NavigationPage(new TestPage3
        {
            Title = "TestPage3"
        }));