模态中的全宽图像被导航栏截断

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>

问题出在iPhone11：导航栏挡住图片顶部。图像看起来好像在导航栏后面。在iPhone 8 上，图像很好。

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

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

Answer 1

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

Answer 2

尝试用 FillAndExpand 添加 HorizontalOptions 和 VerticalOptions:

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

参考：Image with AspectFill and xamarin-forms-image-fill-width-with-proper-aspect

模态中的全宽图像被导航栏截断

Full Width Image in Modal Clipped by Navigation Bar

image

xamarin

xamarin.forms

full-width