C# grid on top of image - xamarin

Question

I am fairly new to Xamarin and XAML, so forgive me if my question is dumb.
I have an image that sits inside of an absolute layout content, the image is larger than the screen width and height (pinch and pan works). I am now trying to create a grid that sits on top of the image and eventually populate each cell with a button (a crude way of getting X,Y position). It is crude, I'll admit it, but I would like to do it, if anything, I'll learn what not to do.
This is my XAML,
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MyProject.Code"
x:Class="MyProject.Views.myImage"
HeightRequest="771"
WidthRequest="900">
<ContentPage.Content>
<AbsoluteLayout HorizontalOptions="FillAndExpand">
<local:PinchAndPanContainer>
<Image Source="map.png"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="Fill"
Opacity="50"/>
</local:PinchAndPanContainer>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
And this is my .cs
using System;
using System.Collections.Generic;
using System.Text;
using System.Linq;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace MyProject.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class myImage: ContentPage
{
public myImage()
{
InitializeComponent();
// Creates the grid
InitializeGrid(2);
}
void InitializeGrid(int res)
{
Grid grid = new Grid();
var red = new BoxView { Color = Color.Red };
var grn = new BoxView { Color = Color.Green };
var blu = new BoxView { Color = Color.Blue };
var yel = new BoxView { Color = Color.Yellow };
grid.WidthRequest = 900;
grid.HeightRequest = 771;
grid.VerticalOptions = LayoutOptions.FillAndExpand;
grid.HorizontalOptions = LayoutOptions.FillAndExpand;
for (int MyCount = 0; MyCount < res; MyCount++)
{
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
}
grid.Children.Add(red, 0, 0);
grid.Children.Add(grn, 0, 1);
grid.Children.Add(blu, 1, 0);
grid.Children.Add(yel, 1, 1);
}
}
}
How can I achieve a 2x2 grid that will sit on top of the image? I would like to take the C# route in creating the grid so I can create a loop and pass in the "resolution" of the grid, 3x3, 100x100, etc.
When I execute this, nothing happens. Even if I comment out almost the entire XAML that displays the image, I still get nothing. Not sure where to go from here.

Answer 1

Add a name to your AbsoluteLayout (i.e. x:Name="layout") so you can parent your grid to it via .Children.Add
I made a few 😎 more changes to your InitializeGrid method to setup the grid within the AbsoluteLayout properly
FYI: Creating grids with a large number of elements will be a huge performance issue.
Example:
void InitializeGrid(int res)
{
var grid = new Grid
{
RowSpacing = 0,
ColumnSpacing = 0
};
AbsoluteLayout.SetLayoutBounds(grid, new Rectangle(1, 1, 1, 1));
AbsoluteLayout.SetLayoutFlags(grid, AbsoluteLayoutFlags.All);
for (int MyCount = 0; MyCount < res; MyCount++)
{
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
}
grid.Children.Add(new BoxView { Color = Color.Red, Opacity=0.5 }, 0, 0);
grid.Children.Add(new BoxView { Color = Color.Green, Opacity = 0.5 }, 0, 1);
grid.Children.Add(new BoxView { Color = Color.Blue, Opacity = 0.5 }, 1, 0);
grid.Children.Add(new BoxView { Color = Color.Yellow, Opacity = 0.5 }, 1, 1);
layout.Children.Add(grid);
}
Output: