title: How to use an Image on multiple rows in a Grid properly in Xamarin Forms
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/gvaPc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gvaPc.png" alt="enter image description here"></a></p>
  
  <p>(I've had to cover the company images with paint, but trust me that they're about that size).</p>
  
  <p>Here's what I actually want (again, please excuse the paint job)</p>
  
  <p><a href="https://i.stack.imgur.com/Vsjwn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vsjwn.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <pre><code>&lt;Frame CornerRadius="10"  
      Margin="10, 5"
      IsClippedToBounds="True"   
      BackgroundColor="White"&gt;
  
    &lt;Grid BackgroundColor="White" &gt;
      &lt;Grid.RowDefinitions&gt;
        &lt;RowDefinition Height="Auto" /&gt;
        &lt;RowDefinition Height="Auto" /&gt;
        &lt;RowDefinition Height="Auto" /&gt;
        &lt;RowDefinition Height="*"  /&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;Grid.ColumnDefinitions&gt;
        &lt;ColumnDefinition Width="*" /&gt;
        &lt;ColumnDefinition Width="2*" /&gt;
        &lt;ColumnDefinition Width="*" /&gt;
        &lt;ColumnDefinition Width="*" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" 
                   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
        &lt;Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="{Binding ImageSource}"/&gt;
      &lt;/StackLayout&gt;
  
      &lt;Label Grid.Row="0" Grid.Column="1"
           Text="{Binding Favourite.FavKindName}"
           FontSize="{DynamicResource InfoLargerTextFontSize}"/&gt;
  
      &lt;Image Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Source="Contact.png"
             VerticalOptions="CenterAndExpand" &gt;
        &lt;Image.GestureRecognizers&gt;
          &lt;TapGestureRecognizer /&gt;
        &lt;/Image.GestureRecognizers&gt;
      &lt;/Image&gt;
  
    &lt;/Grid&gt;
  &lt;/Frame&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I've spent hours trying to figure this out. What am I doing wrong?</p>