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

  • Question

  • User31017 posted

    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">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
            <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}" />
            </StackLayout>
    
            <Editor Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Notes}" />
        </Grid>
    

    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?

    Thanks,

    Sunday, October 19, 2014 11:00 AM

All replies

  • User31017 posted

    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).

    Tuesday, October 21, 2014 10:00 AM