Изображение полной ширины в модальном режиме, обрезанное панелью навигации

Я пытаюсь создать полноразмерное изображение внутри модального окна, но на некоторых устройствах 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: панель навигации загораживает верхнюю часть изображения. Изображение выглядит так, как будто оно находится за панелью навигации. На айфоне 8 изображение нормальное.

Мне нужно, чтобы изображение сохраняло свой аспект, но шло от края до края по ширине. Высота может быть переменной и может быть обрезана на небольших устройствах.

Я надеюсь найти решение, которое просто использует Xaml. Я видел решения, которые настраивают изображение в коде программной части, но я должен верить, что есть более простое решение или обходной путь.


xamarin xamarin.forms image full-width
person User970008    schedule 13.10.2020    source источник
comment
BackgroundImageSource вы пробовали с этим на странице контента   -  person Shubham Tyagi    schedule 13.10.2020
comment
Привет, нет, я не пробовал. Как это сработает? Применяется ли фон только ко всей странице или я могу назначить его и для области содержимого сетки или стека? Как узнать высоту, если она переменная?   -  person User970008    schedule 13.10.2020
comment
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.ModalWithFullWidthImage" NavigationPage.HasNavigationBar="True" BackgroundImageSource="myImage.png"> примерно так   -  person Shubham Tyagi    schedule 13.10.2020
comment
Похоже, это не работает, потому что изображение мозаично (повторяется), а также требуется специальный рендерер для масштабирования изображения на различные устройства.   -  person User970008    schedule 13.10.2020

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте добавить HorizontalOptions и VerticalOptions с FillAndExpand:

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

См.: Изображение с AspectFill и xamarin-forms-image-fill-width-with-proper-aspect

person Jack Hua    schedule 14.10.2020

arrow_upward
0
arrow_downward

Вы пытались использовать On<iOS>().SetUseSafeArea(true); на ContentPage? https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout

person Bandi Tóth    schedule 13.10.2020
comment
Я только что попробовал это сейчас, и iPhone 11 по-прежнему закрывает верх. - person User970008; 13.10.2020