Xamarin.Forms XAML отображает другой результат на физическом устройстве

Question

Поэтому я пытаюсь создать макет в XAML, который имеет макет сверху, по центру (контент) и снизу. Предварительный просмотр XAML в Visual Studio показывает правильную вещь, где он соответствует 100% высоты, но при развертывании на моем физическом iPhone небольшая часть дна почему-то не используется.

Что вызывает это часть, которую нельзя использовать на физических телефонах?

<ContentPage.Content>
        <Grid>
            <Image Source="{StaticResource Image_Background}" Aspect="AspectFill" />

            <StackLayout>
                <!-- TOP -->
                <StackLayout VerticalOptions="Start" HeightRequest="60" BackgroundColor="{StaticResource JFGrey}">

                </StackLayout>

                <!-- CONTENT -->
                <StackLayout VerticalOptions="FillAndExpand">

                </StackLayout>

                <!-- BOTTOM -->
                <StackLayout VerticalOptions="End" HeightRequest="50" BackgroundColor="{StaticResource JFGreen}">

                </StackLayout>
            </StackLayout>
        </Grid>
    </ContentPage.Content>

Левое изображение: XAML Previwer (заполняет всю высоту 100%)

Правое изображение: Физический iPhone (есть небольшая часть дна, которая вообще не используется)

Answer 1

Это SafeArea в iPhone X и выше. Где вы не должны делать что-то с этим, кроме цвета фона, потому что именно здесь пользователь будет взаимодействовать с приложением, чтобы сделать какой-то жест (например, выйти из приложения, проводя пальцем вверх)

Если вы хотите установить фон для этого SafeArea + вся страница. Установите цвет фона в ContentPage.

Но если каким-то образом вы все еще хотите сделать некоторые элементы пользовательского интерфейса в этой области, вот ответ: Как установить макет безопасной области в iPhone x