CODEWITHSUNDEEP
c#xamlxamarinxamarin.formsscrollview
DirtyNative
DirtyNative

Reputation: 2834

Xamarin.Forms ScrollView adds extra space

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.

enter image description here

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

Upvotes: 3

Views: 4166

Answers (2)

nevermore
nevermore

Reputation: 15796

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

Upvotes: 19

MatthewLC
MatthewLC

Reputation: 311

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">`

Upvotes: 2

Related Questions