Navigate between pages inside tabbed page tab, but without losing the tab page tabs

Question

I am working on a Xamarin.Forms application for iOS and Android (cross-platform)

I am working with a tabbed page which has 5 tabs at the bottom (custom render from the tabbed page)

My problem is, when I push another page on top of a tab page, the tabs at the bottom disappears.

Is there any way to keep the tabs visible when pushing new pages?

Below xaml code and photos:

<xf:BottomBarPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="qfix.Views.mPage"
             xmlns:local="clr-namespace:qfix.Behaviors"
             xmlns:pg="clr-namespace:qfix.Views"
             xmlns:controls="clr-namespace:qfix.CustomRenders;assembly=qfix"
             xmlns:xf="clr-namespace:BottomBar.XamarinForms;assembly=BottomBar.XamarinForms"
                  >
    <ContentPage Title="Home" IconImageSource="home.png"  BackgroundImageSource="background.jpg" />
    <ContentPage Title="Category" IconImageSource="category.jpg"   BackgroundImageSource="background.jpg">
        <ContentPage.Content>
            <pg:categories/>
        </ContentPage.Content>
        
    </ContentPage>
    <ContentPage Title="Request" IconImageSource="plus.png" BackgroundImageSource="background.jpg" >
        <StackLayout Spacing="40" Padding="25">
            <Image Source="logo.png" Aspect="AspectFit" HeightRequest="100"></Image>
            <local:DateTimePicker2></local:DateTimePicker2>
            <StackLayout Spacing="10">
                <Label Text="שם היישוב בו נדרש השירות:" VerticalOptions="End" FontSize="Medium"/>
                <controls:EntryAddress TextColor="Black" WidthRequest="300" x:Name="Address"  PlaceholderText="כתובת" BorderWidth="10"  BorderColor="CadetBlue"></controls:EntryAddress>
            </StackLayout >
            <StackLayout Spacing="10">
                <Label Text="מתי ניתן להתקשר אליך?" VerticalOptions="End" FontSize="Medium"/>
                <controls:MyPicker x:Name="Time_picker" Title="עכשוי"   SelectedItem="Phone_List_ItemSelected" BorderColor="CadetBlue" BorderWidth="10"  >
                    <controls:MyPicker.ItemsSource >
                        <x:Array Type="{x:Type x:String}">
                            <x:String>בעוד שעה</x:String>
                            <x:String>מחר בבוקר-8:00</x:String>
                            <x:String>מחר בבוקר-9:00</x:String>
                            <x:String>מחר אח"צ-13:00</x:String>
                            <x:String>מחר אח"צ-14:00</x:String>
                            <x:String>מחר בערב-20:00</x:String>
                            <x:String>מחר בערב-21:00</x:String>
                            
                        </x:Array>
                    </controls:MyPicker.ItemsSource>
                </controls:MyPicker>
            </StackLayout>
 
            <StackLayout Spacing="10">
                <Label Text="מהו סוג העבודה הנדרשת?" VerticalOptions="End" FontSize="Medium"/>
                <controls:MyEntry  x:Name="kindOfWork" Placeholder="סוג העבודה"  FontSize="20" BorderColor="CadetBlue"  BorderWidth="10"></controls:MyEntry>
            </StackLayout>
            <StackLayout BackgroundColor="#a2D5C6" Opacity="0.3" VerticalOptions="EndAndExpand">
                <Button Text="הגש בקשה"    BorderColor="CadetBlue" BackgroundColor="LightSkyBlue" Clicked="Button_Clicked"  TextColor="Black" FontSize="Large"  ></Button>
            </StackLayout>
        </StackLayout>
    </ContentPage>
    <ContentPage Title="Profile" IconImageSource="profile.png" BackgroundImageSource="background.jpg"/>
    <ContentPage Title="settings" IconImageSource="setting.png" BackgroundImageSource="background.jpg"/>
    
</xf:BottomBarPage>

here is the page within the tab, there is a list view with 2 photos, upon clocking it moves to other page ( photo below after this one)

achived this image by doing "await Navigation.PushModalAsync(new StartupPage());"

Answer 1

1.You should warp your ContentPage with a NavigationPage like:

<NavigationPage Title="Home">
    <x:Arguments>
        <ContentPage Title="Home" IconImageSource="home.png"  BackgroundImageSource="background.jpg" />
    </x:Arguments>
</NavigationPage>

<NavigationPage Title="Home">
    <x:Arguments>
        <ContentPage Title="Category" IconImageSource="category.jpg"   BackgroundImageSource="background.jpg">
            <ContentPage.Content>
                <pg:categories/>
            </ContentPage.Content>
        </ContentPage>
    </x:Arguments>
</NavigationPage>

2. You should use await Navigation.PushAsync(new StartupPage()); instead of Navigation.PushModalAsync.

Modal a page is different from pushing a page.