Grid cell (with image content) height is set to that of not scaled image

I have a page with client details - including a profile image.

I use a simple grid layout to but I have a problem where the height of the grid cell with the profile image is set to that of the original height of the image and not the scaled height as I would have expected. Please see attached screen shot.

Here's the xaml:

    <Grid Padding="10">
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="3*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />

        <Image Grid.Row="0" Grid.Column="0" Source="{Binding ProfileImage}" BackgroundColor="#f00" Aspect="AspectFit" />

        <StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical">
            <Label Text="{Binding Name}" Font="Large, Bold" />
            <Label Text="{Binding DateOfBirth, StringFormat='{0:D}'}" />
            <Label Text="{Binding Gender}" />
            <Label Text="{Binding MobilePhoneNumber, StringFormat='Mobile: {0}'}" />
            <Label Text="{Binding EmailAddress, StringFormat='Email: {0}'}" />
            <Label Text="Address" Font="Bold" />
            <Label Text="{Binding Address}" />

        <Editor Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Notes}" />

The size of the cat image is 500x574 pixels and is scaled correctly according to width specified for the column.
Using a smaller image will reduce the red area (top/bottom of image).

Again: bug in Xamarin.Forms or is this expected behaviour?




  • mfamfamfamfa USMember
    edited October 2014

    I found a work-around: wrap the image in a StackLayout element.

    EDIT: Actually - it causes other problems. The stacklayout's height is now that of the original image (not scaled) and that causes e.g. a problem when wrapping everything in a scrollview (to make it scroll up when the software keyboard is visible).

Sign In or Register to comment.