Сетка C # в верхней части изображения

Question

Я довольно новичок в Xamarin и XAML, поэтому простите меня, если мой вопрос тупой.

У меня есть изображение, которое находится внутри абсолютного содержимого макета, изображение больше, чем ширина экрана и высота(щепотка и панорамирование работает).Сейчас я пытаюсь создать сетку, расположенную сверху изображения и в конечном итоге заполнить каждую ячейку кнопкой (грубый способ получить положение X, Y).Это грубо, я признаю это, но я хотел бы сделать это, если что-нибудь, я узнаю, что не делать.

Это мой 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> 

И это мой .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);
        }
    }
}

Как мне добиться сетки 2x2, которая будет располагаться поверх изображения?Я хотел бы использовать маршрут C # при создании сетки, чтобы я мог создать цикл и передать «разрешение» сетки, 3x3, 100x100 и т. Д.

Когда я выполняю это, ничего не происходит.Даже если я закомментирую почти весь XAML, отображающий изображение, я все равно ничего не получу.Не уверен, куда идти отсюда.

Answer 1

Добавьте имя к вашему AbsoluteLayout (то есть x:Name="layout"), чтобы вы могли привязать к нему свою сетку с помощью .Children.Add

Я внес несколько ? больше изменений в вашМетод InitializeGrid для правильной настройки сетки в AbsoluteLayout

К вашему сведению: создание сеток с большим количеством элементов будет огромной проблемой производительности.

Пример:

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);
}

Выход: