Image top crop

Hi everyone,

I want to use an image with a very big height as the background of all my application pages.

I want to display this image respecting its aspect ratio, filling the width of the screen and aligned to the bottom of the screen.

As a result, the image will be clipped at the top of the screen.

I already have implemented this kind of feature on a Xamarin Android application but now, I have to use the Xamarin.Forms.

You can see an other description of this behavior here (and the implementation on Android) :

Does anyone can help me ?

Thanks in advance !



  • MichaelBluesteinMichaelBluestein USInsider, University, Developer Group Leader ✭✭✭

    You can make custom renderers to expose native code from iOS, Android or Windows Phone to do the cropping in Xamarin.Forms.

    More information on creating renderers is available here:

    To crop in iOS, there are a couple ways that come to mind.

    One approach would be to use a CGImage and call its WithImageInRect function with the rectangle you want to crop the image to:

    var croppedCGImage = originalCGImage.WithImageInRect (rectToCropTo);

    Another way to do this is to use Core Image, namely CIImage.ImageByCroppingToRect:

    var croppedImaged = CIImage.FromCGImage (originalCGImage).ImageByCroppingToRect (rectToCropTo);

  • MichaelBluesteinMichaelBluestein USInsider, University, Developer Group Leader ✭✭✭
  • Hi Michael,

    Thanks for your answer. I will try a custom renderer to reuse my Xamarin Android code.

    Do you think there is no configuration of Xamarin.Forms Image properties that can reproduce this behavior (HorizontalOptions, VerticalOptions, Aspect, etc...) ?

    For iOS, I think I will not have the problem beacause all screen size are well known, not like Android.

    For Windows Phone I don't cause I've never work with this platform, I will see later.

  • ArthurBoulinguezArthurBoulinguez FRMember
    edited June 2014

    To reuse my "top crop image" Android implementation, I need to know the width and the height of the screen in the custom renderer. Do you know how to get these values ?

    this.Width // returns 0 this.Height // returns 0

Sign In or Register to comment.