Xamarin.forms: [Shell] ContentPage appears under navigation bar

[davidortinau]

Description

A ContentPage with a Grid root element appears under the navigation bar instead of starting below it. If I put the Grid inside a ScrollView it will layout as desired. I can see a situation where I may wish to have my content appearing at 0,0 however then how should I express when I want a page like this to start just below the navigation bar?

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="TheLittleThingsPlayground.Views.AboutPage" 
             xmlns:vm="clr-namespace:TheLittleThingsPlayground.ViewModels" 
             Title="{Binding Title}">

    <ContentPage.BindingContext>
        <vm:AboutViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Primary">#2196F3</Color>
            <Color x:Key="Accent">#96d1ff</Color>
            <Color x:Key="LightTextColor">#999999</Color>
        </ResourceDictionary>
    </ContentPage.Resources>

     <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackLayout BackgroundColor="{StaticResource Accent}" VerticalOptions="FillAndExpand" HorizontalOptions="Fill">
            <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">
                <ContentView Padding="0,40,0,40" VerticalOptions="FillAndExpand">
                    <Image Source="xamarin_logo.png" VerticalOptions="Center" HeightRequest="64" />
                </ContentView>
            </StackLayout>
        </StackLayout>
        <ScrollView Grid.Row="1">
            <StackLayout Orientation="Vertical" Padding="16,40,16,40" Spacing="10">
                <Label FontSize="22">
                    <Label.FormattedText>
                        <FormattedString>
                            <FormattedString.Spans>
                                <Span Text="The Little Things Playground" FontAttributes="Bold" FontSize="22" />
                                <Span Text=" " />
                                <Span Text="1.0" ForegroundColor="{StaticResource LightTextColor}" />
                            </FormattedString.Spans>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Label>
                    <Label.FormattedText>
                        <FormattedString>
                            <FormattedString.Spans>
                                <Span Text="This app is written in C#, XAML, and native APIs using the" />
                                <Span Text=" " />
                                <Span Text="Xamarin Platform" FontAttributes="Bold" TextColor="Blue" TextDecorations="Underline">
                                    <Span.GestureRecognizers>
                                       <TapGestureRecognizer 
                                            Command="{Binding TapCommand, Mode=OneWay}"
                                            CommandParameter="https://docs.microsoft.com/en-us/xamarin/xamarin-forms/"/>
                                     </Span.GestureRecognizers>
                                </Span>
                                <Span Text="." />
                            </FormattedString.Spans>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Label>
                    <Label.FormattedText>
                        <FormattedString>
                            <FormattedString.Spans>
                                <Span Text="It shares code with its" />
                                <Span Text=" " />
                                <Span Text="iOS, Android, and Windows" FontAttributes="Bold" />
                                <Span Text=" " />
                                <Span Text="versions." />
                            </FormattedString.Spans>
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
                <Button Margin="0,10,0,0" Text="Learn more" Command="{Binding OpenWebCommand}" BackgroundColor="{StaticResource Primary}" TextColor="White" />
            </StackLayout>
        </ScrollView>
    </Grid>
</ContentPage>

Expected Behavior

Content starts below the navigation bar by default, or I have a clear way to position it relative to the navigation bar.

Actual Behavior

Control is out of my hands and I'm now looking for margin/padding hacks and guessing at the height of the navigation bar, or nesting unnecessarily within a ScrollView.

Basic Information

• Version with issue: 4.0-pre1

Screenshots

Grid:

ScrollView:

Reproduction Link

Archive.zip
Parent: #2415

[rmarinho]

Just use Shell.SetPaddingInsets="true" this is so we can allow users to scroll behind the page, a User can avoid doing this by wrapping the content page in a ScrollView that magicaly set's the insets on the UIScrollView

[Mephisztoe]

Please excuse me if this is a dumb question - if there is such thing anyway that is - but, how do you set "Shell.SetPaddingInsets" to true? Because, whatever documentation I am looking at, there is no hint. And I just can't find a way of setting this property. Also, wrapping the content page in a scrollview does the job, that's right, but what if I don't want the page to be scrollable?

[markusrambarkus]

Not a dumb question, trying to do the same thing myself

Please excuse me if this is a dumb question - if there is such thing anyway that is - but, how do you set "Shell.SetPaddingInsets" to true? Because, whatever documentation I am looking at, there is no hint. And I just can't find a way of setting this property. Also, wrapping the content page in a scrollview does the job, that's right, but what if I don't want the page to be scrollable?

[markusrambarkus]

@Mephisztoe just found this, it may help

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout

[Mephisztoe]

I'm gonna try out your link. Regarding "SetPaddingInsets", I found out about another discussion about this API getting removed. It seems as if it's gone already.

Not a dumb question, trying to do the same thing myself

Please excuse me if this is a dumb question - if there is such thing anyway that is - but, how do you set "Shell.SetPaddingInsets" to true? Because, whatever documentation I am looking at, there is no hint. And I just can't find a way of setting this property. Also, wrapping the content page in a scrollview does the job, that's right, but what if I don't want the page to be scrollable?

[Mephisztoe]

Thanks @markusrambarkus! This one works perfectly. ;-)

@Mephisztoe just found this, it may help

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout

[titoleru]

Is there any solution for this that works on XamarinForms?

[titoleru]

I am having the same problem in Android, so iOS workaround explained above cannot be applied in this case :(

[wesoos]

I'm having same issue in Android.
@samhouts this needs to be reopened. Using latest Xamarin.Forms stable...

[wesoos]

Actually this is happening when navigating to a contentpage from an AppShell main ShellContent page. When just on the main ShellContent page, it does not happen...

[wesoos]

This must have been introduced again in 4.2, as it was fine before then. Wrapping your content in a ScrollView does not work

[PureWeen]

@wesoos

Fixed with this PR
https://github.com/xamarin/Xamarin.Forms/pull/7265

in upcoming SR

[wesoos]

Awesome thanks!

[anotherlab]

@PureWeen
Any estimated release date for 4.2 SR1?

[Genfood]

And is there a workaround?

[wesoos]

@PureWeen This is not fixed in the latest release....