Xamarin.Forms ScrollView adds extra space

Question

My ScrollView adds extra spaces above the first child and under the last on my iPhone X. It is the blue gap above that Image. There is no padding or margin.

I gave the ScrollView a blue background to see it's dimensions better. If I remove the ScrollView, the spacing also is gone. Here`s the code I am using

        <ScrollView>
            <!-- The MenuItems -->
            <Grid RowSpacing="0"
                  ColumnSpacing="0"
                  Margin="0, 0, 0, 0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="200" />
                    <RowDefinition Height="20" />
                    <RowDefinition Height="350" />
                    <RowDefinition Height="300" />
                    <RowDefinition Height="300" />
                    <RowDefinition Height="300" />
                    <RowDefinition Height="300" />
                    <RowDefinition Height="200" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <!--<ColumnDefinition Width="*" /> -->
                </Grid.ColumnDefinitions>
<animatedViews:SavannahCanvasView HorizontalOptions="Center"
                                                  Grid.Row="0" />

                <Grid Grid.Row="2"
                      BackgroundColor="#fbc531">
                    <Image HeightRequest="100"
                           VerticalOptions="End"
                           HorizontalOptions="FillAndExpand"
                           Aspect="Fill"
                           Source="{imageExtensions:ImageResource Source=Cheetah.Forms.Assets.Images.Background_Torque.png, TheAssembly=Cheetah.Forms}" />

                    <StackLayout VerticalOptions="Center"
                                 HorizontalOptions="Center"
                                 Margin="0,-100,0,0">

                        <StackLayout.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding ShowMyPingsPageCommand}" />
                        </StackLayout.GestureRecognizers>

                        <Image Source="{imageExtensions:ImageResource Source=Cheetah.Forms.Assets.Images.Radar@256px.png, TheAssembly=Cheetah.Forms}"
                               HeightRequest="150"
                               WidthRequest="150" />
                        <Label VerticalOptions="Center"
                               HorizontalOptions="Center"
                               Style="{StaticResource WhiteLabel}"
                               Text="My Pings" />
                    </StackLayout>

                </Grid>
....

Is this maybe a bug or does it result by the iOS Statusbar rendering? Also there is no spacing on my UWP project

Answer 1

After iOS 11, there is a property called contentInsetAdjustmentBehavior added to the scrollView.

From document :

This property specifies how the safe area insets are used to modify the content area of the scroll view.

So, you need to use a custom renderer to config this property:

In code behiend:

public class myScrollView : ScrollView {

}

In custom renderer:

[assembly: ExportRenderer(typeof(myScrollView), typeof(MyScrollviewRender))]

namespace App308.iOS
{
    class MyScrollviewRender : ScrollViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
            {
                return;
            }

            if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
            {
                this.ContentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentBehavior.Never;
            }
        }
    }
}

And in Xaml:

  <local:myScrollView>
        <!-- The MenuItems -->
        <Grid x:Name="myGrid" RowSpacing="0"
                  ColumnSpacing="0"
                  Margin="0, 0, 0, 0">

            ....
        </Grid>
    </local:myScrollView>

Refer: uiscrollviewcontentinsetadjustmentbehavior

custom-renderer

Answer 2

Row 1 is missing

Change this

<animatedViews:SavannahCanvasView HorizontalOptions="Center" Grid.Row="0" />
    <Grid Grid.Row="2" BackgroundColor="#fbc531">

To this

<animatedViews:SavannahCanvasView HorizontalOptions="Center" Grid.Row="0" />
    <Grid Grid.Row="1" BackgroundColor="#fbc531">`