Add Xamarin Forms TabView to middle of the ContentPage

dush 21

I am using Xamarin community toolkit TabView for my app. I want to add static StackLayout to top of the page and then the TabView bottom to that view. And tabs headers to bottom of the page. In Android it is working as I want. But not in the iOS. TabView items getting hide by static StackLayout.

I want something like this.

<?xml version="1.0" encoding="UTF-8"?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"  
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"  
             x:Class="B_Connect_revamp.Challenges.General.GC2021.views.Tab1View">  
  
    <ContentPage.ToolbarItems>  
        <ToolbarItem  Name="Settings" Icon="iconSetting.png" Priority="0" Order="Primary" Clicked="Settings_Clicked" />  
    </ContentPage.ToolbarItems>  
  
    <ContentPage.Content>  
  
        <Grid>  
  
            <Grid>  
  
                <StackLayout Orientation="Vertical">  
  
                    <StackLayout Margin="0" Orientation="Vertical" IsVisible="{Binding hasData}">  
  
                            <yummy:PancakeView BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1" VerticalOptions="Start" Padding="10" CornerRadius="0,0,15,15" HorizontalOptions="FillAndExpand">  
  
                                <yummy:PancakeView.Shadow>  
  
                                    <yummy:DropShadow Offset="0,1" Color="Gray">  
  
                                        <yummy:DropShadow.Opacity>  
  
                                            <OnPlatform x:TypeArguments="x:Single">  
  
                                                <On Platform="Android" Value="0.1" />  
                                                <On Platform="iOS" Value="0.1" />  
  
                                            </OnPlatform>  
  
                                        </yummy:DropShadow.Opacity>  
  
                                    </yummy:DropShadow>  
  
                                </yummy:PancakeView.Shadow>  
  
                                <yummy:PancakeView.BackgroundGradientStops>  
  
                                    <yummy:GradientStopCollection>  
  
                                        <yummy:GradientStop Color="{StaticResource NavigationBarBackColor}" Offset="0"/>  
  
                                        <yummy:GradientStop Color="{StaticResource NavigationBarBackColor}" Offset="0.5"/>  
  
                                        <yummy:GradientStop Color="#00818c" Offset="1"/>  
  
                                    </yummy:GradientStopCollection>  
  
                                </yummy:PancakeView.BackgroundGradientStops>  
  
                                <StackLayout Orientation="Vertical">  
  
                                    <Label Text="{Binding agName}" FontFamily="{StaticResource RalewayM}" Margin="0,2,0,0" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" FontSize="20" TextColor="White"/>  
  
                                    <Label Text="{Binding agCategory}" FontFamily="{StaticResource quicksandsMedium}" Margin="0" HorizontalOptions="CenterAndExpand" FontSize="16" TextColor="White"/>  
  
                                    </StackLayout>  
  
                                </StackLayout>  
  
                            </yummy:PancakeView>  
  
                    </StackLayout>  
  
                    <xct:TabView VerticalOptions="FillAndExpand" IsVisible="{Binding hasData}" IsSwipeEnabled="True" TabStripPlacement="Bottom">  
  
                        <xct:TabViewItem Text="MONTHLY" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">  
  
                            <xct:TabViewItem.Content>  
  
                                <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">  
  
                                    <StackLayout Orientation="Vertical" Spacing="0">  
  
                                        <Label Text="{Binding monthHeading}" FontSize="18" TextColor="Black" FontFamily="{StaticResource quicksandsMedium}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>  
  
                                    </StackLayout>  
  
                                </Frame>  
  
                            </xct:TabViewItem.Content>  
  
                        </xct:TabViewItem>  
  
                        <xct:TabViewItem Text="SIX MONTH" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">  
  
                            <xct:TabViewItem.Content>  
  
                                <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">  
  
                                    <StackLayout Orientation="Vertical" Spacing="0">  
  
                                        <Label Text="{Binding sixMonthHeading}" FontSize="18" TextColor="Black" FontFamily="{StaticResource quicksandsMedium}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>  
  
                                    </StackLayout>  
  
                                </Frame>  
  
                            </xct:TabViewItem.Content>  
  
                        </xct:TabViewItem>  
  
                        <xct:TabViewItem Text="SUMMIT" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">  
  
                            <xct:TabViewItem.Content>  
  
                                <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">  
  
                                    <StackLayout Orientation="Vertical" Spacing="0">  
  
                                        <Label Text="{Binding sixMonthHeading}" FontSize="18" TextColor="Black" FontFamily="{StaticResource quicksandsMedium}" HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>  
  
                                        <Label Text="New business total" FontSize="15" Margin="0,15,0,0" HorizontalOptions="CenterAndExpand" FontFamily="{StaticResource quicksandsMedium}" TextColor="#546e7a"/>  
              
                                    </StackLayout>  
  
                                </Frame>  
  
                            </xct:TabViewItem.Content>  
  
                        </xct:TabViewItem>  
  
                    </xct:TabView>  
  
                    <StackLayout VerticalOptions="Center" HorizontalOptions="Center" IsVisible="{Binding noData}">  
  
                        <Image Source="not_available.jpg" VerticalOptions="Center" HorizontalOptions="Center"/>  
  
                    </StackLayout>  
  
                </StackLayout>  
  
            </Grid>  
  
            <StackLayout>  
                  
            </StackLayout>  
  
        </Grid>  
  
    </ContentPage.Content>  
  
</ContentPage>

In iOS, top part of the swipe area gets hidden by the static StackLayout.

Accepted answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 29,381 Microsoft Vendor

Hello,
Welcome to our Microsoft Q&A platform!

You say "TabView items getting hide by static StackLayou" and "top part of the swipe area gets hidden by the static StackLayout". I am afraid that there are two issues.
First, I noticed you used Grid, however you didn't use Grid.RowDefinitions.
Second, you could use SafeArea in iOS.
You can have a try with following code:

<?xml version="1.0" encoding="utf-8" ?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
              xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"  
              xmlns:xct="http://xamarin.com/schemas/2020/toolkit"  
              x:Class="CommunityTableViewDemo.MainPage"  
             xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"  
              ios:Page.UseSafeArea="true">  
  
    <ContentPage.ToolbarItems>  
        <ToolbarItem  Name="Settings" Icon="iconSetting.png" Priority="0" Order="Primary"  />  
    </ContentPage.ToolbarItems>  
  
    <ContentPage.Content>  
  
        <!--<Grid>-->  
  
            <Grid>  
                <Grid.RowDefinitions height="*"></Grid.RowDefinitions>  
                <Grid.RowDefinitions height="500"></Grid.RowDefinitions>  
  
                <!--<StackLayout  Orientation="Vertical">-->  
  
                    <StackLayout BackgroundColor="red" Grid.Row="0" Margin="0" Orientation="Vertical" IsVisible="true">  
  
                        <yummy:PancakeView BackgroundGradientStartPoint="0,0" BackgroundGradientEndPoint="0,1" VerticalOptions="Start" Padding="10" CornerRadius="0,0,15,15" HorizontalOptions="FillAndExpand">  
  
                            <yummy:PancakeView.Shadow>  
  
                                <yummy:DropShadow Offset="0,1" Color="Gray">  
  
                                    <yummy:DropShadow.Opacity>  
  
                                        <OnPlatform x:TypeArguments="x:Single">  
  
                                            <On Platform="Android" Value="0.1" />  
                                            <On Platform="iOS" Value="0.1" />  
  
                                        </OnPlatform>  
  
                                    </yummy:DropShadow.Opacity>  
  
                                </yummy:DropShadow>  
  
                            </yummy:PancakeView.Shadow>  
  
                            <yummy:PancakeView.BackgroundGradientStops>  
  
                                <yummy:GradientStopCollection>  
  
                                    <yummy:GradientStop Color="Pink" Offset="0"/>  
  
                                    <yummy:GradientStop Color="Pink" Offset="0.5"/>  
  
                                    <yummy:GradientStop Color="#00818c" Offset="1"/>  
  
                                </yummy:GradientStopCollection>  
  
                            </yummy:PancakeView.BackgroundGradientStops>  
  
                            <StackLayout BackgroundColor="Pink" Orientation="Vertical">  
  
                                <Label Text="Binding agName"  Margin="0,2,0,0" HorizontalOptions="CenterAndExpand" HorizontalTextAlignment="Center" FontSize="20" TextColor="White"/>  
  
                                <Label Text="Binding agCategory" Margin="0" HorizontalOptions="CenterAndExpand" FontSize="16" TextColor="White"/>  
  
                            </StackLayout>  
  
                        </yummy:PancakeView>  
  
                </StackLayout>  
  
                <xct:TabView Grid.Row="1" VerticalOptions="FillAndExpand"  TabStripPlacement="Bottom">  
  
                    <xct:TabViewItem Text="MONTHLY" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">  
  
                        <xct:TabViewItem.Content>  
  
                            <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">  
  
                                <StackLayout Orientation="Vertical" Spacing="0">  
  
                                    <Label Text="Binding monthHeading" FontSize="18" TextColor="Black"  HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>  
  
                                </StackLayout>  
  
                            </Frame>  
  
                        </xct:TabViewItem.Content>  
  
                    </xct:TabViewItem>  
  
                    <xct:TabViewItem Text="SIX MONTH" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">  
  
                        <xct:TabViewItem.Content>  
  
                            <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">  
  
                                <StackLayout Orientation="Vertical" Spacing="0">  
  
                                    <Label Text="Binding sixMonthHeading" FontSize="18" TextColor="Black"  HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>  
  
                                </StackLayout>  
  
                            </Frame>  
  
                        </xct:TabViewItem.Content>  
  
                    </xct:TabViewItem>  
  
                    <xct:TabViewItem Text="SUMMIT" TextColor="WhiteSmoke" TextColorSelected="#ff8478" BackgroundColor="#008A95">  
  
                        <xct:TabViewItem.Content>  
  
                            <Frame Padding="10,20,10,20" HasShadow="False" CornerRadius="15" Margin="10,0,10,5" BackgroundColor="#ECF0F1">  
  
                                <StackLayout Orientation="Vertical" Spacing="0">  
  
                                    <Label Text="Binding sixMonthHeading" FontSize="18" TextColor="Black"  HorizontalTextAlignment="Center" HorizontalOptions="CenterAndExpand"/>  
  
                                    <Label Text="New business total" FontSize="15" Margin="0,15,0,0" HorizontalOptions="CenterAndExpand" TextColor="#546e7a"/>  
  
                                </StackLayout>  
  
                            </Frame>  
  
                        </xct:TabViewItem.Content>  
  
                    </xct:TabViewItem>  
  
                </xct:TabView>  
  
                    <!--<StackLayout Grid.Row="0" VerticalOptions="Center" HorizontalOptions="Center" IsVisible="false">  
  
                    <Image Source="not_available.jpg" VerticalOptions="Center" HorizontalOptions="Center"/>  
  
                </StackLayout>-->  
  
                <!--</StackLayout>-->  
  
            </Grid>  
  
            <!--<StackLayout>  
  
            </StackLayout>-->  
  
        <!--</Grid>-->  
  
    </ContentPage.Content>  
  
</ContentPage>

For more information you can refer to:
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout
https://learn.microsoft.com/en-us/xamarin/get-started/tutorials/grid/?tabs=vswin&tutorial-step=2
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

Best Regards,
Wenyan Zhang

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Add Xamarin Forms TabView to middle of the ContentPage

0 additional answers