image - 导航栏剪切模态中的全宽图像

Question

我正在尝试在模态框内创建全角图像，但该图像位于某些 iOS 设备上的导航栏后面。

<?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="MyApp.ModalWithFullWidthImage" 
             NavigationPage.HasNavigationBar="True">
    <ContentPage.Content>
        <StackLayout Grid.Column="0" Grid.Row="0" >
            <Image Source="fullWithImage" Aspect="AspectFill" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

问题出在 iPhone 11 上：导航栏挡住了图像的顶部。图像看起来好像位于导航栏后面。在 iPhone 8 上，图像很好。

我需要图像保持其纵横比，但在宽度上边到边。高度可以是可变的，并且可以在较小的设备上被切断。

我希望找到一个只使用 Xaml 的解决方案。我已经看到了在代码隐藏中调整图像的解决方案，但我必须相信有一个更简单的解决方案或解决方法。

Answer 1

尝试添加HorizontalOptions和：VerticalOptionsFillAndExpand

<StackLayout>
    <!-- Place new controls here -->
    <Image Source="Images" Aspect="AspectFill" HorizontalOptions="FillAndExpand"
   VerticalOptions="FillAndExpand"/>
</StackLayout>

参考：带有 AspectFill和xamarin-forms-image-fill-width-with-proper-aspect 的图像

Answer 2

您是否尝试过On<iOS>().SetUseSafeArea(true);在 ContentPage 上使用？https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout