Xamarin XAML: Placing a Grid over an Image (responsive to screen size)

Question

I'm a complete newbie to XAML and Xamarin forms.

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):

Expected Result

I was trying to alter Xamarin's GridDemoPage for this. I have a 3*3 Grid. This is what I've been able to do so far:

Current Situation :(

And here's my code:

<?xml version="1.0" encoding="UTF-8"?>
<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">

    <RelativeLayout VerticalOptions="Center" HorizontalOptions="Center">

        <Grid VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" WidthRequest="330" HeightRequest="330" Padding="0,0,0,0">
            <Button x:Name="Btn1" Text=""
                   Grid.Row="0" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Aqua"/>
            <Button x:Name="Btn2" Text=""
                   Grid.Row="0" Grid.Column="1" Clicked="OnClickCommand" BackgroundColor="White"/>
            <Button x:Name="Btn3" Text=""
                   Grid.Row="0" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Red"/>
            <Button x:Name="Btn4" Text=""
                   Grid.Row="1" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Blue"/>
            <Button x:Name="CenterButton" Text=""
                   Grid.Row="1" Grid.Column="1" Clicked="OnClickSend" BackgroundColor="Black"/>
            <Button x:Name="Btn5" Text=""
                   Grid.Row="1" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Green"/>
            <Button x:Name="Btn6" Text=""
                   Grid.Row="2" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Yellow"/>
            <Button x:Name="Btn7" Text=""
                   Grid.Row="2" Grid.Column="1" Clicked="OnClickCommand" BackgroundColor="Maroon"/>
            <Button x:Name="Btn8" Text=""
                   Grid.Row="2" Grid.Column="2" Clicked="OnClickCommand" BackgroundColor="Lime"/>
        </Grid>
        <Image x:Name="RemoteCenterImage" Source="r_720_inactive.png"/>
    </RelativeLayout>
</ContentPage>

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.

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.

Is my approach of using a Grid to accomplish this alright? Or is there a better way to do this?
How can I change the XAML to make the UI responsive?
How should I position/place the buttons within the Grid in a responsive fashion?

Sten Petrov Sten Petrov · Accepted Answer · 2015-01-19T15:29:32

Try this:

<AbsoluteLayout>
  <Image x:Name="backgroundImage" Source="yourBackround.png" AbsoluteLayout.LayoutBounds="0,0,1,1"   AbsoluteLayout.LayoutFlags="All" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill"/>
  <Grid>
    <Button Grid.Row="0" Grid.Column="0" Clicked="OnClickCommand" BackgroundColor="Aqua"/>
    ....
<!-- Grid automatically creates rows and columns with "*" size when you put a child with Grid.Row and/or Grid.Column -->
  </Grid>
</AbsoluteLayout>

Keep in mind that you may need to fix the size or W/H ratio of the AbsoluteLayout to keep the image and grid in sync, possibly by handling its SizeChanged event, or parent element constraints, or binding either or both W/H properties

Xamarin XAML: Placing a Grid over an Image (responsive to screen size)

1 Answers