Static header in tabbed page and bottom navigation?

Question

Is there any way to create a static header that is fixed at top of the screen when using a bottom navigation based on tabbed pages? When navigating, the pages are swiping left/right, with the current header following with it. The header is created by a template with the following code:

<ResourceDictionary>
        <ControlTemplate x:Key="Template">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="0.1*" />
                </Grid.RowDefinitions>
                <BoxView Color="Black" />
                <Label 
                    Text="xyz"
                    TextColor="White"
                    FontSize="15"
                    FontFamily="Helvetet"
                    VerticalOptions="Center"
                    HorizontalOptions="Start"/>
                <ContentPresenter Grid.Row="1" VerticalOptions="Center"/>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>

What changes should be done, so that the header is stuck at top, despite the pages being swiped left/right?

Here's an example of how it currently looks like

Answer 1

You could set the MainPage as a NavigationPage , then set its RootPage as a TabbedPage . Then you will get a static Header even switch the tab item.

For example, the App.Xaml.cs is:

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

And the Xaml of CustomTabbedPage is:

<?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:local="clr-namespace:AppForms19"
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:TabbedPage.ToolbarPlacement="Bottom"
             Title="Main Title"
             x:Class="AppForms19.Views.CustomTabbedPage">
    <local:MainPage Title="One" IconImageSource="icon.png"/>
    <local:SecondPage Title="Two" IconImageSource="icon.png" />
</TabbedPage>

The effect: