How to use an Image on multiple rows in a Grid properly in Xamarin Forms

Question

I am trying to create a custom, material-style, card cell in my Xamarin Forms app. I have the appearance pretty much down, but I'm having problems with the image in it. I want it to touch the top and bottom edges, the left hand edge, and be a square sort of shape, while maintaining the aspect ratio. But right now, all I get is this small image that won't play ball:

(I've had to cover the company images with paint, but trust me that they're about that size).

Here's what I actually want (again, please excuse the paint job)

I'm using an image in a grid view, in the 1st column and spanning all 4 rows. I've tried all of the LayoutOptions, which I used to understand but now I'm second guessing myself. I've also tried putting the image in a StackLayout as I thought you can expand children of a Stacklayout, but still no dice. Here is my simplified Xaml right now:

<Frame CornerRadius="10"  
    Margin="10, 5"
    IsClippedToBounds="True"   
    BackgroundColor="White">

  <Grid BackgroundColor="White" >
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*"  />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="2*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" 
                 HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
      <Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="{Binding ImageSource}"/>
    </StackLayout>

    <Label Grid.Row="0" Grid.Column="1"
         Text="{Binding Favourite.FavKindName}"
         FontSize="{DynamicResource InfoLargerTextFontSize}"/>

    <Image Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Source="Contact.png"
           VerticalOptions="CenterAndExpand" >
      <Image.GestureRecognizers>
        <TapGestureRecognizer />
      </Image.GestureRecognizers>
    </Image>

  </Grid>
</Frame>

What's more, you can probably tell I'm pretty clueless about the phone icon on the right. I want that to occupy the centre and be of a decent button size for the card cell.

I've spent hours trying to figure this out. What am I doing wrong?

Bruno Caceiro Bruno Caceiro · Accepted Answer · 2018-07-03T18:02:20

Frame has a default Padding of 20. That's why you have those margins inside the frame.

<Frame Padding="0" // Here , set padding to 0, so you can fill all Frame space
    CornerRadius="10"  
    Margin="10, 5"
    IsClippedToBounds="True"   
    BackgroundColor="White">

How to use an Image on multiple rows in a Grid properly in Xamarin Forms

1 Answers