Add Xamarin Forms TabView to middle of the ContentPage

Question

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.

XAML...

<?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.

Answer 1

First,your xmal is not correct,Element is not closed.

Second,you didn't use Grid.Row to constraint the placement of the layout.

You could define the Grid.RowDefinitions like below,and redesign.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <StackLayout Grid.Row="0" 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>


    </yummy:PancakeView>

    </StackLayout>
    <xct:TabView Grid.Row="1"  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" Grid.RowSpan="2" IsVisible="{Binding noData}">


        <Image Source="not_available.jpg" VerticalOptions="Center" HorizontalOptions="Center"/>

    </StackLayout>
</Grid>