title: Xamarin Forms - Get Image to Fill width of containing Grid Column?
body: <p>Having an issue with Xamarin Forms trying to ensure an image matches the width of its containing column. (Think of a simple product listing with a picture and description).</p>
  
  <p>XAML code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               x:Class="formsApp.MainPage"&gt;
    &lt;ContentPage.Padding&gt;
      &lt;OnPlatform x:TypeArguments="Thickness"
                  iOS="20, 40, 20, 20"
                  Android="20, 20, 20, 20"
                  WinPhone="20, 20, 20, 20" /&gt;
    &lt;/ContentPage.Padding&gt;
    &lt;ContentPage.Content&gt;
      &lt;ScrollView&gt;
        &lt;StackLayout VerticalOptions="FillAndExpand"
                     HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     Spacing="15" &gt;
          &lt;Grid x:Name="testGrid"  VerticalOptions="Center"&gt;
          &lt;/Grid&gt;
        &lt;/StackLayout&gt;
      &lt;/ScrollView&gt;
    &lt;/ContentPage.Content&gt;
  &lt;/ContentPage&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>C# code behind is:</p>
  
  <pre><code>public MainPage()
      {
          InitializeComponent();
  
          testGrid.BackgroundColor = Color.Gray;
          testGrid.Padding = new Thickness(10D);
          testGrid.RowDefinitions = new RowDefinitionCollection();
          testGrid.ColumnDefinitions = new ColumnDefinitionCollection();
  
          testGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
          testGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(3, GridUnitType.Star) });
  
          for (int MyCount = 0; MyCount &lt; 20; MyCount++)
          {
              testGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
          }
  
          for (int i = 0; i &lt; testGrid.RowDefinitions.Count(); i++)
          {
              StackLayout st = new StackLayout() { Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.Center, IsClippedToBounds = true };
  
              st.Children.Add(new Image
              {
                  Source = ImageSource.FromUri(new Uri("https://lh3.googleusercontent.com/nYhPnY2I-e9rpqnid9u9aAODz4C04OycEGxqHG5vxFnA35OGmLMrrUmhM9eaHKJ7liB-=w300")),
                  Aspect = Aspect.AspectFit,
                  HorizontalOptions = LayoutOptions.EndAndExpand
              });
  
              testGrid.Children.Add(st, 0, i);
  
              testGrid.Children.Add(new Label
                  {
                      Text = "Row" + i + " description.... fdsfsdf sdf sdfsd fsdf sdf sdf sdfsd fsd fsdf sdf sd fsd fsdf "
              }, 1, i);
  
          }
  
      }
  </code></pre>
  
  <p>I have applied various options such as wrapping the image in a Stack layout (with options on stack layout) and also adding AspectFit and EndAndExpand to the image but it is never 100% correct.<a href="https://i.stack.imgur.com/heDKV.png" rel="nofollow noreferrer">Resultant view from a 5" KitKat Android Emulator</a></p>
  
  <p>Any advice?</p>
  
  <p>Thanks</p>