Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can We add content Above tabbed page in xamarin forms?

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 enter image description here

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

like image 244
Theodorus Agum Gumilang Avatar asked Oct 18 '22 00:10

Theodorus Agum Gumilang


1 Answers

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;
}
like image 60
Mayur Kerasiya Avatar answered Oct 21 '22 08:10

Mayur Kerasiya