Add Xamarin Forms TabView to middle of the ContentPage

dush 21 Reputation points
2021-07-07T11:20:44.613+00:00

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.

112581-untitled-1.png

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

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,291 questions
0 comments No comments
{count} votes

Accepted answer
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 25,996 Reputation points Microsoft Vendor
    2021-07-08T08:16:00.41+00:00

    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>  
    

    112866-image.png
    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful