An Image inside a Grid makes it expand to fill full height.

MikhailKadanMikhailKadan USMember
edited September 2016 in Xamarin.Forms

Please consider the following XAML:

<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyNamespace.MainPage"> <ContentPage.Padding> <OnPlatform x:TypeArguments="Thickness" iOS="0, 20, 0, 0" /> </ContentPage.Padding> <Grid VerticalOptions="Start" BackgroundColor="Red"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50*" /> <ColumnDefinition Width="50*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="150" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Text="Post #1" /> <!--Image Grid.Column="0" Grid.Row="1" Aspect="AspectFit" BackgroundColor="Lime" Source="http://www.w3schools.com/css/img_fjords.jpg" /--> <Label Grid.Column="0" Grid.Row="1" BackgroundColor="Silver" Text="1" /> <Label Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="Olive" Text="Post #1 text text text text text text text text text text text text text text xt text text text text text text text text text text text text text text text text text text text xt text text text text text text text" /> <Label Grid.Column="0" Grid.Row="2" BackgroundColor="Silver" Text="2" /> </Grid> </ContentPage>

If Label is displayed in col=0, row=1, it works perfect (see the first screen). But If you switch it to Image instead, Grid behaves strange, filling the whole page (see the second screen).

Answers

  • PedroCondePedroConde PTMember ✭✭

    Having a similar issue. Did you find a way to solve it?

  • Hi @PedroConde

    Unfortunately, I was not able to solve this using Grid.

    So first I switched to nested StackLayouts (which worked perfectly).

    Later I changed my cell's UI so the image is located not to the left of text, but between it and the title (this way you could still use Grid).

    Another option for you to try may be wrapping the Image in a Grid with 1 row and 1 column, that triggers different layouting (I had a similar case in another part of my UI and that helped).

    Hope at least something of this helps you!

  • PedroCondePedroConde PTMember ✭✭

    Thks MikhailKadan.
    Meanwhile I did already switched to stacklayout with relativelayout constraints. It's working perfectly.

  • TonySpencerTonySpencer USMember

    @JosHuybrighs.8203 said:
    I am wondering why people accept that the solution for this is switching to a RelativeLayout.
    For me there is still a serious error in the Xamarin Grid when you put an image in a cell and define the column width of that cell as a 'percentage' value (like Width="0.6*"). Per default an Image is configured to scale and therefore the cell height should scale as well. It currently however takes the height of the image and not the 'scaled down' height. That is simply wrong. More interesting, if you define the cell height as a fixed dp value (like Width="150") then everything is OK.

    Can we expect a solution for this? Or am I overlooking something?

    I have the same issue. The behavior is seemingly wrong and causes horrible issues.

  • titolerutitoleru Member ✭✭

    The problem lies in BackgroundImage property in ImageButton (if you remove that attribute, it works fine). It's clearly an important bug Xamarin guys should be taking care of for next update....

Sign In or Register to comment.