Xamarin Forms Image со 100% ширины родительского контейнера и автоматической высотой для сохранения соотношения сторон

Question

Возможно ли, чтобы Image занимал 100% ширины родительского контейнера при фактической подгонке всего изображения в этом контейнере без обрезки и при автоматической регулировке высоты для сохранения соотношения сторон?

I читал похожие вопросы как на SO, так и на форумах Xamarin, но, по-видимому, это невозможно сделать без использования пользовательских средств визуализации или ручного вычисления правильных размеров в коде. Но чтобы рассчитать это в коде, вам понадобятся либо размеры изображения, либо соотношение сторон. Для приложений, где ни один из них не известен перед заголовком, это проблема.

Что касается CSS, то решение, которое я ищу, похоже на то, чтобы иметь

width:100%; height:auto;

Реализация пользовательского средства визуализации для такой тривиальной задачи - это излишество и огромное затруднение для Xamarin. на мой взгляд; если я не понимаю что-то не так.

Answer 1

Мне не удалось найти чисто XAML-решение этой проблемы, и поэтому я решил использовать событие ffimageloading * Success, чтобы узнать исходную ширину и высоту загруженного изображения и получить соотношение сторон из этих значения, сохраните его и используйте в событии SizeAllocated, чтобы сохранить соотношение сторон изображения, убедившись, что его ширина составляет 100% от родительского контейнера.

Пример кода:

    private void testImage_OnSuccess(object sender, CachedImageEvents.SuccessEventArgs e)
    {
        var image = sender as CachedImage;
        double width = e.ImageInformation.OriginalWidth;
        double height = e.ImageInformation.OriginalHeight;

        ratio = width / height; // store it in a variable

    }


    protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);

        if (this.Width > 0 && ratio != 0) // width of the parent container
            testImage.HeightRequest = this.Width / ratio;
    }

Answer 2

Поместите ваше изображение в рамку. А затем установите высоту и ширину изображения в соответствии с рамкой.

 <Frame>
        <Image></Image>
    </Frame>

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

Преобразователи привязки значений: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/data-binding/converters

Сначала задайте имя для своего кадра.

<Frame
…………
x:Name="frame"/>

Создайте MyConverter. Вы можете изменить процент значения в методе Convert. MyConverter.cs

public class MyConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
    return (double)value;
}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
    throw new NotImplementedException();
}
}

Установить StaticResource.

<ContentPage.Resources>
<ResourceDictionary>
    <local:MyConverter x:Key="MyConverter" />
</ResourceDictionary>

Привязка к вашему изображению.

 <Image WidthRequest="{Binding Source={x:Reference frame},Path=Width,Converter={StaticResource MyConverter}}"
                    HeightRequest="{Binding Source={x:Reference frame},Path=Height,Converter={StaticResource MyConverter}}"></Image>

Answer 3

Предполагается, когда вы говорите:

и при этом автоматически настраивается высота ..

Вы имеете в виду высоту контейнера. Да, это вполне возможно в Xamarin.Forms.

Давайте представим, что у меня есть Grid в качестве родительского контейнера. Вот как я бы это сделал.

 <!-- remove all the padding & margin & spacing on Grid -->
<Grid RowSpacing="0"
      ColumnSpacing="0"
      Margin="0"
      Padding="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" /> <!-- the containers height will now adjust --> 
        <RowDefinition Height="56"/> <!-- This one is for the other content in your view etc -->
    </Grid.RowDefinitions>
    <!-- Put your image inside your parent container and apply properties -->
    <Image Source="some_source.png"
           HorizontalOptions="FillAndExpand"
           VerticalOptions="FillAndExpand"/>
</Grid>

Горизонтальные и вертикальные параметры такие, как будто вы устанавливаете ширину: 100% и высоту: 100% в CSS.