How do I control how a Xamarin Forms button scales its Image property?

0
votes

I'm updating our app from Xamarin Forms 2.1.0.6524 to 2.3.4.224. There were some minor UI glitches I've been able to fix, but one is stumping me.

Part of our app displays several buttons that have an Image property set. The images are all 90x90 pixels. In Xamarin Forms 2.1.x, it seems like the image was scaled down to fit a height that is reasonable for the text, roughly 40 pixels. In 2.3.4.224, the image is displayed at its natural size of 90px which is way too big.

I'm trying to figure out why this changed, it feels like the original code was wrong and we should've done something to constrain the size of the images. I don't see any convenient way to control the size or scale of the image in the Button control. Is there away around this? Did I find a bug, or were we a victim of a bug before?

(So far it seems unique to iOS, but we have a custom renderer for this button type on Android and it does look like we do some voodoo for scaling there. When I tried an experimental new application what I found was:

  • Android displayed the image with 90px whether I used old or new XF.
  • iOS displayed with 40px if I used old XF and 90px with new XF.)
1
xamarin.forms

1 Answers

1
votes

I think the constrained size must have been a bug in the older version of Xamarin Forms. I think there are multiple ways to fix the problem:

  1. Recreate the real images to proper size
  2. Create a custom renderer for iOS as well with custom sizing options
  3. Use ImageButton from XLabs: https://github.com/XLabs/Xamarin-Forms-Labs/wiki/ImageButton
  4. Use other elements instead of Button. For example Horizontal StackLayout with Image and Label inside and make a TapGestureHandler for the StackLayout (you won't get the button animations then though)
  5. Constrain the height with HeightRequest on the Button element (clips the image, not a good solution)

My suggestion is to go with the first option if possible. Properly sized real images give the best look. Scaling images in an application will always make them look worse.