Image filling the container and keeping aspect ratio

AndrewMobileAndrewMobile USMember ✭✭✭✭
edited April 2015 in Xamarin.Forms

In case someone needs this as well, I want to share a simple implementation I made.

Unfortunately there’s no way to display the Image filling the container while keeping its aspect ratio without either clipping it or letterbox’ing it.
This is quite a common task so I created an ImageEx class derived from Image which has an extra Uniform value for Aspect property:

Using other Aspect values Fill, AspectFill, AspectFit works like for the Image class.

You can get a gist for ImageEx class from here: https://gist.github.com/nitescua/c907c2951a719ed3ac34

I wrote a blog post with more info here http://enginecore.blogspot.ro/2015/04/xamarin-forms-image-filling-container.html

Posts

  • adamkempadamkemp USInsider, Developer Group Leader mod

    I don't understand what "Uniform" means. How do you make an image fit an arbitrary rectangle without either clipping, letterboxing, or stretching? Can you show an example screenshot that shows the difference?

  • AndrewMobileAndrewMobile USMember ✭✭✭✭
    edited April 2015

    It works the same way how the Uniform works in Windows development:
    https://msdn.microsoft.com/en-us/library/system.windows.media.stretch(v=vs.110).aspx

    I couldn't achieve this with the Xamarin Forms Image control.

  • AndrewMobileAndrewMobile USMember ✭✭✭✭

    The way it works is the control size is computed such that the image is displayed keeping aspect ratio.

    If you have a 300 x 100 container where you put the ImageEx control with an image of 300 x 700, the ImageEx control will be 43 x 100.
    You can stack it up horizontally or vertically with other elements and it will work nicely.

  • adamkempadamkemp USInsider, Developer Group Leader mod

    That sounds like exactly the same thing as AspectFit, and UniformToFill sounds like exactly the same thing as AspectFill. Notice how the example in that link shows letterboxing for Uniform and clipping for UniformToFill. So what did you add?

  • adamkempadamkemp USInsider, Developer Group Leader mod

    If you have a 300 x 100 container where you put the ImageEx control with an image of 300 x 700, the ImageEx control will be 43 x 100.

    How is that different from AspectFit?

  • AndrewMobileAndrewMobile USMember ✭✭✭✭
    edited April 2015

    It's not the same thing.
    Here's the documentation for Aspect values: http://iosapi.xamarin.com/?link=T:Xamarin.Forms.Aspect
    The Image control in Xamarin Forms either fills container without keeping aspect ratio, clips the image or letter-boxing it.
    It doesn't resize itself such that the image is keeping its aspect ratio.

  • AndrewMobileAndrewMobile USMember ✭✭✭✭

    I might need to work a bit more on the control :)

  • adamkempadamkemp USInsider, Developer Group Leader mod

    As far as the size of the image itself is concerned they are the same thing. There may be a difference in how big the control is around the rendered image, but I'm not convinced you need another control for that. What happens if you set the BackgroundColor of the Image control to Clear?

  • StefanoBaraldiStefanoBaraldi ITMember ✭✭

    Hello @AndrewMobile, it seems your page and code is gone somewhere else, can you point me at it?
    Thank you!

  • mike.hmike.h USMember ✭✭
    edited March 2016

    I'd like to know that too

  • AronKansal.4852AronKansal.4852 USMember
    edited March 2016

    the Image control..

  • AndrewMobileAndrewMobile USMember ✭✭✭✭

    @StefanoBaraldi sure, replace 'nitescua' with 'andreinitescu' I changed my GitHub id (not cool I know)

  • StefanoBaraldiStefanoBaraldi ITMember ✭✭

    Thank you!

  • MartinClarkeMartinClarke GBMember

    @AndrewMobile said:
    @StefanoBaraldi sure, replace 'nitescua' with 'andreinitescu' I changed my GitHub id (not cool I know)

    Thanks @AndrewMobile, your control saved me some time; much obliged!

  • DONG-ANKANGDONG-ANKANG USMember ✭✭

    thank you for your help!
    this code is very useful!

  • JamesIsonJamesIson USMember ✭✭

    Anyone? it seems the problem Costas is having is still an issue I am getting the NaN error for width (It's called first) this is an issue on iOS

  • RuteGuerreiroRuteGuerreiro USMember ✭✭

    Thank you so much! This helped me a lot.
    I just had to change OnSizeRequest to OnMeasure because it was deprecated.

  • JyosuaJyosua USMember
    edited February 2018

    I forked and updated the code Andrew provided, here:
    gist.github.com/Jyosua/6ba677c03c69f0c0fe964e65087728a5

    I would have made that a link, but Xamarin apparently decoupled their forum accounts from their single sign on and thinks I'm a new member, so I'm not allowed to post links.

Sign In or Register to comment.