Xamarin.Forms: отрегулируйте размер изображения по ширине родителя в BindableLayout.

Я пытаюсь настроить размер Image на ширину родительского контейнера в BindableLayout, но не нашел способа добиться этого.

Для этого я использую другую тему.

Сначала я попытался встроить Image в контейнер Grid следующим образом:

<StackLayout x:Name="NewsList"
             BindableLayout.ItemsSource="{Binding News}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Frame>
                <Grid Padding="0" Margin="0"
                      VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                      BackgroundColor="Red">
                    <Image Source="{Binding Image}" Aspect="AspectFit"/>
                </Grid>
                <Label Text="Description" />
            </Frame>
        </DataTemplate>
    </BindableLayout>
</StackLayout

=› но мы видим, что вокруг изображений появляются красные полосы (сверху/снизу или слева/справа): ImageInGrid< /а>

Затем я попытался использовать CachedImage из FFImageLoading следующим образом:

<Grid Padding="0" Margin="0"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand"
        BackgroundColor="Orange">
    <ffimageloading:CachedImage Source="{Binding Image}"
                    HorizontalOptions="Fill"
                    VerticalOptions="Fill"
                    Aspect="AspectFill"
                    DownsampleToViewSize="True"/>
</Grid>

=› но в этом случае изображения видны не полностью или обрезаны CachedImage

=› Есть ли другой способ, позволяющий мне отобразить изображение во всю ширину родительского контейнера и сохранить исходное соотношение сторон?

Обновление 1:

Отображаемые изображения взяты из сообщений Facebook. Вот четвертые изображения, которые отображаются:

  1. https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-9/s720x720/118713552_3623822074306674_9076571821151026884_n.jpg?_nc_cat=110&_nc_sid=110474&_nc_ohc=8xcbXj0tf5IAX-b_jE9&_nc_ht=scontent-cdt1-1.xx&tp=7&oh=60af4b756944856e28327736fd542c65&oe=5F98D58D
  2. https://scontent-cdg2-1.xx.fbcdn.net/v/t15.13418-10/96415113_248439429597332_6367448024599232512_n.jpg?_nc_cat=100&_nc_sid=ad6a45&_nc_ohc=2jBGHupMA20AX-8Y-M8&_nc_ht=scontent-cdg2-1.xx&oh=918470153ca23c927b921b2f1a61d4a5&oe=5F97D9C7
  3. https://scontent-cdg2-1.xx.fbcdn.net/v/t15.5256-10/95397765_284933452664428_1743250590344937472_n.jpg?_nc_cat=111&_nc_sid=ad6a45&_nc_ohc=LWajKszkHiMAX-sqkeZ&_nc_oc=AQmqjn5ykjy2tYfmRvpQChhtdsJZgk9_Smn3oU9weGt5xe9QY4933u_sNV1qAnZrIFc&_nc_ht=scontent-cdg2-1.xx&oh=c93af2de18eb417b224d8ea211197cda&oe=5F98A096
  4. https://scontent-cdg2-1.xx.fbcdn.net/v/t1.0-9/s720x720/95921743_3263337923688426_3234683279575613440_o.jpg?_nc_cat=102&_nc_sid=8024bb&_nc_ohc=AkRxtEdIyU8AX99QWmR&_nc_ht=scontent-cdg2-1.xx&tp=7&oh=6dc746bd0ea30097aee78f57a6395fb4&oe=5F980B69

Обновление 2:

Я пробовал решение, данное @Leo:

<StackLayout Orientation="Vertical" x:DataType="model:News">
    <Image Source="{Binding Image}" Aspect="AspectFill"/>
    <Label Text="Description" />
</StackLayout>

Но результат все равно плохой, так как первое и четвертое изображения обрезаны: усеченное изображение


person Gold.strike    schedule 28.09.2020    source источник
comment
Извините, вы можете выбрать только один вариант из этих трех, если ваше радио изображения отличается от вашего кадра/сетки на странице. 1. AspectFit: оставить пустым, как ваше первое изображение. 2. AspectFill: полная ширина с зажимом, как у второго. 3. Fill: полная ширина с неправильным радио. (Или отредактируйте свое изображение, чтобы оно соответствовало вашему макету, если это то, что вы преследуете.)   -  person Shaw    schedule 28.09.2020


Ответы (2)


Я загружаю изображение и делаю, как показано ниже, вы можете проверить это:

<StackLayout x:Name="NewsList" BackgroundColor="Red"
         BindableLayout.ItemsSource="{Binding News}">
     <BindableLayout.ItemTemplate>
            <DataTemplate>
                    <StackLayout Orientation="Vertical">
                        <Image Source="{Binding .}" Aspect="AspectFill"/>
                        <Label Text="Description" />
                    </StackLayout>
                </DataTemplate>
     </BindableLayout.ItemTemplate>
</StackLayout>

эффект как:

введите здесь описание изображения

person Leo Zhu - MSFT    schedule 29.09.2020
comment
У меня это не работает:/ Возможно ли, что это связано с источниками изображений? В моем случае изображения берутся из сообщений Facebook, и некоторые из них содержат текст, поэтому мне нужно, чтобы изображение было полностью видно... - person Gold.strike; 29.09.2020
comment
Вы пытались удалить сетку и рамку, как указано выше. - person Leo Zhu - MSFT; 29.09.2020
comment
Это не работает, поскольку я использую URL-адреса изображений в качестве источника изображений. Это наверное нормально в данном случае? - person Gold.strike; 29.09.2020
comment
Чжу: Я обновил свой пост с вашим предложением, это все еще не ожидаемый результат. - person Gold.strike; 30.09.2020

Наконец-то я нашел решение, которое сработало для меня здесь, это решение предоставлено Frankvans:

class ImageFit : Image {
    protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint) {
        SizeRequest sizeRequest = base.OnMeasure(double.PositiveInfinity, double.PositiveInfinity);

        var innerRatio = sizeRequest.Request.Width / sizeRequest.Request.Height;

        if (double.IsNaN(innerRatio))
            return sizeRequest;

        // Width needs to be adjusted
        if (double.IsInfinity(heightConstraint)) {
            // Height needs to be adjusted
            if (double.IsInfinity(widthConstraint)) {
                widthConstraint = sizeRequest.Request.Width;
                heightConstraint = sizeRequest.Request.Height;
            } else {
                // Adjust height
                heightConstraint = widthConstraint * sizeRequest.Request.Height / sizeRequest.Request.Width;
            }
        } else if (double.IsInfinity(widthConstraint)) {
            // Adjust width
            widthConstraint = heightConstraint * sizeRequest.Request.Width / sizeRequest.Request.Height;
        } else {
            // strech the image to make it fit while conserving it's ratio
            var outerRatio = widthConstraint / heightConstraint;

            var ratioFactor = (innerRatio >= outerRatio) ?
                (widthConstraint / sizeRequest.Request.Width) :
                (heightConstraint / sizeRequest.Request.Height);

            widthConstraint = sizeRequest.Request.Width * ratioFactor;
            heightConstraint = sizeRequest.Request.Height * ratioFactor;
        }
        sizeRequest = new SizeRequest(new Size(widthConstraint, heightConstraint));
        return sizeRequest;
    }
}
person Gold.strike    schedule 09.10.2020