Can We add content Above tabbed page in xamarin forms?

Question

I want to add some label and image above tabbed page in xamarin forms, so when i slide to another tabbed page the content above tabbed page will remain the same here is the design

can i achieve this because i cant find any reference to do that ?

Answer 1

You can not add label above in tabbed page if you want to add label above tabbed page you have to crate your own tabbed page.

You can create a layout that show/hide based on your selection for your selection create tab design and tap gesture to tabs and manage show/hide of layouts

Demo Code Xaml file

<!--Tab Design-->
<StackLayout Orientation="Horizontal">
 <Grid HorizontalOptions="FillAndExpand"
          VerticalOptions="FillAndExpand"
          ColumnSpacing="0"
          RowSpacing="0"
          Padding="0">

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>

        <!--Details Tab-->

        <StackLayout Grid.Row="0"
                     Grid.Column="0"
                     Padding="7.5"
                     VerticalOptions="FillAndExpand">
           <Button Clicked="Tab1Clicked" Text="Tab1">

        </StackLayout>

        <!-- Tab 2 -->
        <StackLayout Grid.Row="0"
                     Grid.Column="2"
                     Padding="7.5"
                     VerticalOptions="FillAndExpand">
            <Button Clicked="Tab2Clicked" Text="Tab2">
        </StackLayout>
    </Grid>
</StackLayout>

    <!-- tab 1 container -->
    <StackLayout x:Name="stkTab1">
    </StackLayout>

    <!-- tab 2 container -->
    <StackLayout x:Name="stkTab2" IsVisible="false">
    </StackLayout>

Demo Code cs file

private void Tab1Clicked(object sender, EventArgs e)
{
    stkTab1.IsVisible=true;
    stkTab2.IsVisible=false;
}

private void Tab2Clicked(object sender, EventArgs e)
{
    stkTab1.IsVisible=false;
    stkTab2.IsVisible=true;
}

Answer 2

One of the ways is to create a control template, add the top section in any layout and insert the tab page in content presenter.

https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/templates/control-templates/creating/