Bug 55294 - Grid size incorrect when using with Image
Summary: Grid size incorrect when using with Image
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.3.4
Hardware: Macintosh Mac OS
: --- normal
Target Milestone: ---
Assignee: Bugzilla
: 57472 ()
Depends on:
Reported: 2017-04-17 16:35 UTC by ticktackmob
Modified: 2017-08-28 16:28 UTC (History)
7 users (show)

Tags: grid rowheight image ac
Is this bug a regression?: No
Last known good build:

reproduction (209.05 KB, application/zip)
2017-04-17 16:35 UTC, ticktackmob
android screenshot (45.38 KB, image/jpeg)
2017-04-17 16:44 UTC, ticktackmob
ios screenshot (35.04 KB, image/jpeg)
2017-04-17 16:46 UTC, ticktackmob
Scaled Image height in grid is wrong (100.38 KB, image/png)
2017-07-11 18:06 UTC, Yuri

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report for Bug 55294 on Developer Community or GitHub if you have new information to add and do not yet see a matching new report.

If the latest results still closely match this report, you can use the original description:

  • Export the original title and description: Developer Community HTML or GitHub Markdown
  • Copy the title and description into the new report. Adjust them to be up-to-date if needed.
  • Add your new information.

In special cases on GitHub you might also want the comments: GitHub Markdown with public comments

Related Links:

Description ticktackmob 2017-04-17 16:35:03 UTC
Created attachment 21579 [details]

When Grid.VerticalOption is not fill to parent, and Grid has an Image view, Grid.Height is incorrect. 

Grid should use scaled image size as row height, but it use original image height.

for example like this

<Grid HorizontalOptions="FillAndExpand" VerticalOptions="Center" BackgroundColor="Maroon" RowSpacing="0" >
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    <Image Source="logo.jpg" Grid.Row="0" />
    <Label Grid.Row="1" Text="test message" BackgroundColor="Blue" />
Comment 1 ticktackmob 2017-04-17 16:44:49 UTC
Created attachment 21580 [details]
android screenshot
Comment 2 ticktackmob 2017-04-17 16:46:40 UTC
Created attachment 21581 [details]
ios screenshot
Comment 3 Jimmy [MSFT] 2017-04-19 22:13:58 UTC
I ran the attached report and I am seeing the issue described. I am confirming the report so the team can investigate further.

### Observations
This might to be related to the Image.Aspect property. By default the property is set to 'AspectFit' which means the Image will be scaled to fit the view while maintaining its aspect ratio. In the case of the repro project, since the image is wider than the view, its width is being scaled and the visible Grid area appears to be the letter-boxing, however the Label in the next row seems to be overlapping it. If the row has a star height, then the row still maintains the image's original height but the Label is now properly laid out below the row.

However this issue also happens when using 'AspectFill' which should clip the image instead of letterbox it, so this issue could be a result of the Grid row not adjusting to the image's final height when it is set to 'auto'.

This issue does _not_ happen if you set the Image to use 'Fill' Aspect (but the image may be distorted because the aspect ratio will not be kept) or when the row is given an absolute height.

### Version Tests
2.3.5-pre1  BAD   BAD
Comment 4 Jimmy [MSFT] 2017-06-14 21:29:07 UTC
*** Bug 57472 has been marked as a duplicate of this bug. ***
Comment 5 Yuri 2017-07-11 18:06:15 UTC
Created attachment 23479 [details]
Scaled Image height in grid is wrong

I see the same behaviour in 1 row 3 colums grid. Picture is attached. below is xaml. My test picture is 300x250

<Grid   BackgroundColor="Green" ColumnSpacing="0" RowSpacing="0" Padding="0" Margin="0" VerticalOptions="Center" >
            <RowDefinition  />

            <ColumnDefinition  />
            <ColumnDefinition  />
            <ColumnDefinition />

        <Image Grid.Column="0" Grid.Row="0" BackgroundColor="Red" Source="test.jpg"   x:Name="LeftImage"
        <Image Grid.Column="1" Grid.Row="0" BackgroundColor="Green" Source="test.jpg"   x:Name="CenterImage" 
        <Image Grid.Column="2" Grid.Row="0" BackgroundColor="Blue" Source="test.jpg"   x:Name="RightImage" 
Comment 6 Paul Brenner 2017-07-12 13:12:56 UTC
Is there a workaround to this issue?
Comment 7 Bas 2017-08-28 16:28:16 UTC
After sitting ducks for days on this issue, I found this temporary fix:

imageView.SizeChanged += (o, e) => { gridView.HeightRequest = imageView.Height; };

Enjoy :) I hope this issue gets fixed though