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 [email protected], 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

Why do you use Grid in Row=2, if you don't have any RowDefinitions for it? Replace it with StackLayout at least and see what would change. — Денис Чорный
It's because I need to layer the image and StackLayout inside the inner Grid. This could be done with a StackLayout, but I'm pretty sure changing this will not fix this issue, nor is there any advantage — DirtyNative
You can also try to play around with margins of controls inside the Grid — Денис Чорный

Jack Hua Jack Hua · Accepted Answer · 2019-04-29T05:30:01

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

Xamarin.Forms ScrollView adds extra space

2 Answers