Как центрировать изображение в Xamarin.Forms, не растягивая его

Question

У меня есть это ContentPage:

<ContentPage.Content>
    <Grid>
        <Image
            Source="background.png"
            Aspect="AspectFill"
        />
        <Image
            Source="logo.png"
            VerticalOptions="Center"
            HorizontalOptions="Center"
        />
    </Grid>
</ContentPage.Content>

Но logo.png (при вводе по вертикали и горизонтали) растягивается на всю ширину экрана.

Как мне помешать растяжению и сохранению первоначального размера? И да, решение XAML определенно предпочтительнее.

Редактировать 1 (основываясь на ответе Пола Керчера):
Если для источника изображения установить URL-адрес (например, https://via.placeholder.com/450x300.png?text=Computer+Says+No),, я получу ожидаемый результат, т. Е. Изображение не растягивается. Однако, если я сохраню это же изображение в каталоге конкретной платформы (например, Resources / ComputerSaysNo.png) для iOS), он растягивается, чтобы занять всю ширину экрана. Протестировано на симуляторе iPhone 7.

Редактировать 2
Если я создаю @ 2x и @ 3x копии своего logo.png в каталоге ресурсов iOS и у всех трех изображений одинаковый размер, это работает по-разному; логотип не растягивается на всю ширину страницы.

Answer 1

Другой вариант, который я использую довольно часто, - это AbsoluteLayout. Объединение PositionProportional (LayoutFlags) с LayoutBounds = "0.5,0.5, -1, -1 (X, Y, Width, Height) поместит изображение в центр экрана. LayoutBounds" 0.5 "означает, что оно будет в центре X и Y, а «-1» поможет игнорировать ширину и высоту. Убедитесь, что VerticalOptions установлен в вашем AbsoluteLayout.

Вот код:

<AbsoluteLayout VerticalOptions="FillAndExpand">
    <StackLayout  AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1" AbsoluteLayout.LayoutFlags="PositionProportional">
        <Image Source="http://lorempixel.com/output/abstract-q-c-200-200-6.jpg" />
    </StackLayout>
</AbsoluteLayout>

Надеюсь, это поможет.

Answer 2

Из документации о AspectFill

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

Вместо этого следует использовать AspectFit, оно не растягивает изображение, чтобы заполнить элемент управления, а помещает все изображение в элементе управления:

Масштабируйте изображение, чтобы оно соответствовало виду. Некоторые части могут быть оставлены пустыми (почтовый бокс).

EDIT

Я пробовал следующее

<Grid>
    <Image HorizontalOptions="Center" 
           VerticalOptions="Center" 
           Source="http://lorempixel.com/output/abstract-q-c-200-200-6.jpg" />
</Grid>

и получилось следующее расположение:

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

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

Используйте систему сетки, чтобы определить размер изображения

В пределах Grid вы можете определить столбцы и строки. Столбцы (и строки соответственно), определенные с шириной (высотой) *, будут занимать все доступное пространство. Если имеется несколько столбцов или строк размером *, они будут равномерно разделять оставшееся пространство. Кроме того, вы можете указать * веса столбцов и строк. Столбец Ar с шириной 2* будет иметь вдвое большую ширину, чем столбец с шириной *. Следовательно, вы можете определить столбцы с шириной 3*, * и 3* и поместить свое изображение во второй столбец (индекс столбца 1), чтобы изображение занимало 1/7th ширины экрана.

Используйте AbsoluteLayout

В AbsoluteLayout вы можете определить позиции и размеры дочерних элементов. Вместо того, чтобы размещать изображения в Grid, вы можете сделать следующее

<AbsoluteLayout>
    <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1" /> <!-- Background -->
    <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds=".5,.5,.2,.2" /> <!-- Logo with 20% width/height  -->
</AbsoluteLayout>

Если вы предпочитаете устанавливать размер изображения абсолютно, вы можете сделать следующее

<Image AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds=".5,.5,150,150" />