title: Xamarin XAML: Placing a Grid over an Image (responsive to screen size)
body: <p>I'm a complete newbie to XAML and Xamarin forms.</p>
  
  <p>I was looking for a way to design a UI where transparent buttons are placed on a background image, which will function as a remote (The buttons will be placed on the icons in the screenshot below):</p>
  
  <p><img src="https://i.stack.imgur.com/8IEco.png" alt="Expected Result"></p>
  
  <p>I was trying to alter <a href="https://github.com/xamarin/xamarin-forms-samples/blob/master/XAMLSamples/xamlsamples/xamlsamples/GridDemoPage.xaml" rel="nofollow noreferrer">Xamarin's GridDemoPage</a> for this. I have a 3*3 Grid. This is what I've been able to do so far:</p>
  
  <p><img src="https://i.stack.imgur.com/rojBO.png" alt="Current Situation :("></p>
  
  <p>And here's my code:</p>
  
  <pre><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="iRemote.RemotePage"
              Title="REMOTE"
              BackgroundImage="light.png"
              BackgroundColor="Transparent"&gt;
  
      &lt;RelativeLayout VerticalOptions="Center" HorizontalOptions="Center"&gt;
  
          &lt;Grid VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" WidthRequest="330" HeightRequest="330" Padding="0,0,0,0"&gt;
              &lt;Button x:Name="Btn1" Text=""
                     Grid.Row="0" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Aqua"/&gt;
              &lt;Button x:Name="Btn2" Text=""
                     Grid.Row="0" Grid.Column="1" Clicked="OnClickCommand" BackgroundColor="White"/&gt;
              &lt;Button x:Name="Btn3" Text=""
                     Grid.Row="0" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Red"/&gt;
              &lt;Button x:Name="Btn4" Text=""
                     Grid.Row="1" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Blue"/&gt;
              &lt;Button x:Name="CenterButton" Text=""
                     Grid.Row="1" Grid.Column="1" Clicked="OnClickSend" BackgroundColor="Black"/&gt;
              &lt;Button x:Name="Btn5" Text=""
                     Grid.Row="1" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Green"/&gt;
              &lt;Button x:Name="Btn6" Text=""
                     Grid.Row="2" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Yellow"/&gt;
              &lt;Button x:Name="Btn7" Text=""
                     Grid.Row="2" Grid.Column="1" Clicked="OnClickCommand" BackgroundColor="Maroon"/&gt;
              &lt;Button x:Name="Btn8" Text=""
                     Grid.Row="2" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Lime"/&gt;
          &lt;/Grid&gt;
          &lt;Image x:Name="RemoteCenterImage" Source="r_720_inactive.png"/&gt;
      &lt;/RelativeLayout&gt;
  &lt;/ContentPage&gt;
  </code></pre>
  
  <p>As is quite evident, I haven't gotten very far.
  I was thinking of enclosing the buttons in an absoluteLayout and placing/resizing them to fit on the icons. </p>
  
  <p>But, I'm faced with multiple problem. I have hard-coded the Grid's height and width, so this code is not adaptive wrt screen-size. </p>
  
  <ol>
  <li><p>Is my approach of using a Grid to accomplish this alright? Or is there a better way to do this?</p></li>
  <li><p>How can I change the XAML to make the UI responsive?</p></li>
  <li><p>How should I position/place the buttons within the Grid in a responsive fashion?</p></li>
  </ol>