Charles
Charles

Reputation: 509

Can I make Xamarin Image AspectFit crop rather than pad?

I am trying to put a company logo at the top of an About screen. My graphic designer says "make it 40% of the screen width. So I code Image Aspect="AspectFit" and put it in Column 1 of a Grid with ColumnDefinitions="3*,4*,3*". Voila! It is 40% of the screen width. But AspectFit "Letterboxes the image (if required) so that the entire image fits into the display area, with blank space added to the top/bottom or sides depending on whether the image is wide or tall." So I end up with a heck of a lot of padding above and below the image, depending on how wide the screen is. I have a kludge solution -- coding RowDefinitions="120" but is there a way to do this that will work correctly every time, rather than being a kludge that is more or less good enough most of the time? Is there a way to get Xamarin Forms to crop rather than pad?

VS 2019 Community on Windows 10 Pro 64. Target platforms Android, iOS and UWP.

Upvotes: 2

Views: 191

Answers (1)

Charles
Charles

Reputation: 509

And the answer is ... you apparently need to do it in code:

private void OnAboutPageLayoutChanged(object sender, EventArgs e)
{
    const double heightRatio = 200.0 / 600.0 ;        // Ratio of image height to width
    GridLogo.RowDefinitions[0].Height = ImageLogo.Width * heightRatio;
}

Upvotes: 1

Related Questions