locked
Image handling cross platform RRS feed

  • Question

  • User309742 posted

    What is the best way to load an image from a URL in Xamarin Forms and display it correctly in Android and iOS?

    I try several things without good results: FFImageLoading library with AspectFill, AspectFit and Fill.

    I want to put an image without knowing your dimensions to fill width container and resizing your height according to the aspect. If the width of the image is smaller than the container width, I want to scale the image to fill container width. If the image width is higher than the container width, I want the same. Of course I don't know the container width because normally it is the width of the screen.

    If possible, I want to do all in the shared project without using custom renderers.

    Thanks!

    Friday, April 17, 2020 2:00 AM

Answers

  • User309742 posted

    @Jarvan said: Sorry for my mistake, I reproduced the issue with the source link. Try 'hard-coding' the size of the image. Get the screen size and the aspect ratio of the image.Then reassign value to the image size.

    Check the link: https://stackoverflow.com/a/60682068/11083277

    Based on this, I bound the SuccessCommand property of the CachedImage object and calculate the aspect ratio of the image using data provided by this Command.

    Then I bound the HeightRequest property of the CachedImage and I update it on the SuccessCommand using the aspect ratio and the screen width: Application.Current.MainPage.Width

    Thanks!

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 22, 2020 9:01 PM

All replies

  • User382871 posted

    I want to put an image without knowing your dimensions to fill width container and resizing your height according to the aspect. You could use Xamarin.Forms.Image to display the url picture. To fill the width container, set Aspect property to AspectFit which entires the image fits into the display area.

    <Image Source="https://aka.ms/campus.jpg" Aspect="AspectFit"/>

    Tutorial: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#download-images https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#display-images

    Friday, April 17, 2020 7:05 AM
  • User309742 posted

    @Jarvan said:

    I want to put an image without knowing your dimensions to fill width container and resizing your height according to the aspect. You could use Xamarin.Forms.Image to display the url picture. To fill the width container, set Aspect property to AspectFit which entires the image fits into the display area.

    <Image Source="https://aka.ms/campus.jpg" Aspect="AspectFit"/>

    Tutorial: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#download-images https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#display-images

    Yes, I tried that.

    But if the image width is smaller than the container width, and again, I don't know the container width because this is the screen width I get the image centered without filling container width in Android and iOS:

    If the image width is greater than the container width it displays OK:

    Friday, April 17, 2020 5:00 PM
  • User309742 posted

    Now I can fill the entire width and get the image resized using

    <Image
        Source="..."
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand"
        Aspect="AspectFit"
    />
    

    But if I do this, appears a margin at the top and bottom of the image:

    The Image is inside a StackLayout which is inside a ScrollView without Padding or Margin:

    <ScrollView>
        <StackLayout>
            <Image
                ... />
    
            ...
        </StackLayout>
    </ScrollView>
    

    How can I delete this margins?

    Friday, April 17, 2020 5:28 PM
  • User382871 posted

    Because you set both HorizontalOptions and VerticalOptions to FillAndExpand. But height of the image is less than the layout. Try to remove the setting code of VerticalOptions. <Image Source="..." HorizontalOptions="FillAndExpand" Aspect="AspectFit" />

    Monday, April 20, 2020 10:21 AM
  • User309742 posted

    @Jarvan said: Because you set both HorizontalOptions and VerticalOptions to FillAndExpand. But height of the image is less than the layout. Try to remove the setting code of VerticalOptions. <Image Source="..." HorizontalOptions="FillAndExpand" Aspect="AspectFit" />

    If I do this, the Image get centered horizontally with large blanks to the left and right side.

    Monday, April 20, 2020 1:30 PM
  • User382871 posted

    If I do this, the Image get centered horizontally with large blanks to the left and right side. I tested the code and it works well as shown.

    Tuesday, April 21, 2020 1:54 AM
  • User309742 posted

    @Jarvan said:

    If I do this, the Image get centered horizontally with large blanks to the left and right side. I tested the code and it works well as shown.

    Yes, it works because the image is big.

    Try with this image: https://salisto.club/gestion/img/propuestas/95_102.jpg and you get the blank to the sides...

    Tuesday, April 21, 2020 12:23 PM
  • User382871 posted

    Sorry for my mistake, I reproduced the issue with the source link. Try 'hard-coding' the size of the image. Get the screen size and the aspect ratio of the image.Then reassign value to the image size.

    Check the link: https://stackoverflow.com/a/60682068/11083277

    Wednesday, April 22, 2020 8:00 AM
  • User309742 posted

    @Jarvan said: Sorry for my mistake, I reproduced the issue with the source link. Try 'hard-coding' the size of the image. Get the screen size and the aspect ratio of the image.Then reassign value to the image size.

    Check the link: https://stackoverflow.com/a/60682068/11083277

    Based on this, I bound the SuccessCommand property of the CachedImage object and calculate the aspect ratio of the image using data provided by this Command.

    Then I bound the HeightRequest property of the CachedImage and I update it on the SuccessCommand using the aspect ratio and the screen width: Application.Current.MainPage.Width

    Thanks!

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, April 22, 2020 9:01 PM