How to use an uploaded image in Xamarin Forms

Question

I want my users to upload their own custom image for the banner of my Xamarin Forms application. My thought was to have them upload the highest resolution / size image (xxxhdpi size from Android) and then scale it down in order to (hopefully) retain the quality of the image. Is there a way for me to find how much I should scale the image based on the device's screen? It does not have to be perfect. I would be happy with simply being able to determine what size image the app is selecting for the app images (i.e. @2x, xxhdpi etc.). For example, on iOS, if the app was using the @3x images, I would scale my image size down by 25%. This is making the assumption that the size of the image uploaded is for the xxxhdpi size for Android. If the app were running on an xxxhdpi screen in Android, no scaling would be done. Any idea how to do this?

UPDATE!! OK so I can use the DeviceDisplay.MainDisplayInfo.Density to determine what type of screen I am running on. My challenge now is how to resize my image control. Here is my basic thought:

I am going to have all users upload an image that is 400 units tall (the width can pretty much be what they want.) I will use the density to calculate how much I want to down scale the image using a percent i.e. XXX on Android would be 100% xx on Android and @3 on iOS would be 75%, X on Android and @2 on iOS would be 50% and the base images for iOS (@1) and Android (base srawable folder size) will be 25%. The challenge now is where can I perform this scaling on the image control? I actually have the image control in a ContentView that I share across several applications so there is no OnAppearing to override. Is there an event on the image control that I could hook into in order to resize the control. It could also be an event for the ContentView. I have tried calling a custom method in the ContentView but when I call it the height and Width of the image control as 1. I am also open to doing the resizing in memory (the image is stored in a byte array) but I want the solution to be cross platform (iOS, Androind, Windows and MacOS) Any ideas how to do this would be appreciated.

Answer 1

OK so here is what I ended up doing. I ask my users to upload their biggest sized image into the app (for me that is an image with a height of 400 and a width that will fit on the screen they plan to use.)

Then I used the Xamarin.Essentials code above to get the display density for the device screen. I also created a Boolean instance variable to know if the image had already been resized. Then I added the following code into the SizeChanged event of the image and placed the following code in there:

   private void imgBanner_SizeChanged(object sender, EventArgs e)
    {
        double ld_ScaleFactor = 0;
        try
        {
            if (imgBanner.Height <= 1)
            {
                ib_ImageResized = false;
            }
            else if (ib_ImageResized == false)
            {
                ib_ImageResized = true;

                if (id_ScreenScale < 2)
                {
                    ld_ScaleFactor = .25;
                }
                else if (id_ScreenScale < 3)
                {
                    ld_ScaleFactor = .5;
                }
                else if (id_ScreenScale < 4)
                {
                    ld_ScaleFactor = .75;
                }
                else
                {
                    ld_ScaleFactor = 1;
                }

                if  (ld_ScaleFactor < 1)
                {
                    ld_ScaleFactor += .25;
                }

                imgBanner.HeightRequest = imgBanner.Height * ld_ScaleFactor;
                imgBanner.WidthRequest = imgBanner.Width * ld_ScaleFactor;
            }
        }
        catch (Exception ex)
        {
            ErrorHandler.ProcessException(ex);
        }
    }

This seems to have done the trick for what I was trying to accomplish.