title: Scrollable grid in Xamarin
body: <p>I have to implement a <strong>scrollable grid</strong> of images in Xamarin Forms, the grid is <code>n x 2</code>, so two images by side. Since I have no idea how to combine a <code>ScrollView</code> with a <code>Grid</code>, I tried this (all my controls are inside a grid, but this is not relevant):</p>
  
  <pre><code>&lt;ScrollView x:Name="scroller"
              Orientation="Vertical"
              BackgroundColor="Fuchsia"
              Grid.Row="0" Grid.Column="1"
              Grid.RowSpan="10" Grid.ColumnSpan="5"&gt;
      &lt;StackLayout x:Name="stacker"&gt;
          &lt;StackLayout HorizontalOptions="Fill" Orientation="Horizontal"&gt;
              &lt;Image Source="test.png" HorizontalOptions="Start"/&gt;
              &lt;Image Source="test.png" HorizontalOptions="End"/&gt;
          &lt;/StackLayout&gt;
          &lt;!-- put several of these here --&gt;
      &lt;/StackLayout&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p>But the results are far from being acceptable:</p>
  
  <p><a href="https://i.stack.imgur.com/zXGZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zXGZs.png" alt="stack"></a></p>
  
  <p>I have tried several variations, but it seems that <code>StackLayout</code> won't obey the boundaries of its parent. </p>
  
  <p>Just for fun I've tried a <code>Grid</code> without any success since it adds <strong>a lot of space</strong> between the grids (and I don't know why):</p>
  
  <pre><code>&lt;ScrollView x:Name="scroller"
              Orientation="Vertical"
              BackgroundColor="Fuchsia"
              Grid.Row="0" Grid.Column="1"
              Grid.RowSpan="10" Grid.ColumnSpan="5"&gt;
      &lt;StackLayout x:Name="stacker"&gt;                    
          &lt;Grid&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition Height="*"/&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition Width="*"/&gt;
                  &lt;ColumnDefinition Width="*"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Image Source="test.png" Grid.Row="0" Grid.Column="0"/&gt;
              &lt;Image Source="test.png" Grid.Row="0" Grid.Column="1"/&gt;
          &lt;/Grid&gt;
          &lt;!-- put several of these here --&gt; 
      &lt;/StackLayout&gt;
  &lt;/ScrollView&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pLYyt.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pLYyt.jpg" alt="grid"></a></p>
  
  <p>How can I achieve a simple scrollable grid in Xamarin Forms? This is my hand-drawn objective:</p>
  
  <p><a href="https://i.stack.imgur.com/0Rui9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Rui9.jpg" alt="objective"></a></p>
  
  <p>Any hints are welcome!</p>