Xamarin Forms Image fill width with proper aspect

Question

Here is xaml (an image in stacklayout). Everything is logical: I set Aspect to AspectFit and HorizontalOptions to FillAndExpand. Width of image must fill the width of stackl

Answer 1

Try using CachedImage from FFImageLoading NuGet package

MyPage.xaml

<StackLayout HorizontalOptions="FillAndExpand"
             VerticalOptions="FillAndExpand"
             Padding="0">
    <ff:CachedImage Source="{Binding GroupLogo}"
                    HorizontalOptions="Fill"
                    VerticalOptions="Fill"
                    Aspect="Fill"
                    DownsampleToViewSize="True"/>
</StackLayout>

This will results image trying to horizontally fill the container and to automatically generate the width while maintaining its aspect.

Add this line of code to MainActivity.xaml after global::Xamarin.Forms.Forms.Init(this, bundle);

CachedImageRenderer.Init(true);

Example can be found here

Answer 2

AspectFit does what it says on the tin, it will fit the whole image into the View, which may leave parts of the view empty. Straight from Xamarin's documentation:

Scale the image to fit the view. Some parts may be left empty (letter boxing).

What you're looking for is AspectFill, which will scale the image to fit:

Scale the image to fill the view. Some parts may be clipped in order to fill the view.

If you are trying to get the image view to be the height of the image, I'd suggest adding a HeightRequest to the height of the image. Image controls don't seem to automatically scale in Xamarin, in my experience, as the native controls don't appear to support that by default either.

Reference

Answer 3

This requires custom rendering for both platforms. Create a FillScreenImageRenderer that inherits from ImageRenderer.

<local:FillScreenImage Source="{ImageSource}"></local:FillScreenImage>

The code below stretch to fit the entire screen. You can tweak the view bounds to fit anything you want, like, in your case, is the parent view.

iOS:

    protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
    {
        base.OnElementChanged(e);
        UIGraphics.BeginImageContext(UIScreen.MainScreen.Bounds.Size);
        Control.Image.Draw(UIScreen.MainScreen.Bounds);
        var dest = UIGraphics.GetImageFromCurrentImageContext();
        UIGraphics.EndImageContext();
        Control.Image = dest;
    }

Android:

    protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
    {
        base.OnElementChanged(e);
        var display = ((Activity)Context).WindowManager.DefaultDisplay;
        var b = ((BitmapDrawable)Control.Drawable).Bitmap;
        Bitmap bitmapResized = Bitmap.CreateScaledBitmap(b, display.Width, display.Height, false);
        Control.SetImageDrawable(new BitmapDrawable(Resources, bitmapResized));
    }

Answer 4

Up until now, the only solution I've found is to set Aspect="AspectFill" and set HeightRequest.

You can bind HeightRequest to a property and calculate the height based on the page width.

In my case the images are always the same proportion, so I do:

HeightRequest = (int)Math.Truncate(Xamarin.Forms.Application.Current.MainPage.Width / 1.41);

Answer 5

As I've found no working example. This works perfectly for me:

<Grid VerticalOptions="FillAndExpand">
      <Image Source="{Binding MyImageSrc}" Aspect="AspectFill" />
</Grid>

Answer 6

Try inclosing image inside of a grid like:

<grid>
    <image></image>
</grid>

Sometimes when I have an image that is not resizing properly, inclosing it inside a grid solves the problem.