Add DebugGridHelper

[jsuarezruiz]

I had this PR pending for a while! Is a new helper based on MetroGridHelper https://jeffwilcox.blog/2011/10/metrogridhelper/ I thought that adding a couple more properties to the helper like the Grid Color, Margin, etc. It would be more interesting.

[sthewissen]

~Very cool! Should we consider adding some form of property to either enable colors or the grid or both? I believe with this addition you'd always get both right?~

Ah no, scrap that. I'm just being stupid. Obviously you'd call it using debug:DebugGridHelper.IsDebug="true".

[sthewissen]

I'm wondering since this is focused on how Metro does its alignment how we could apply this to other design systems as well. E.g, the app I'm currently working on uses a unit of 4 as the grid multiple. However, if I were to make the unit size 4 it would generate little boxes with the same padding in the current solution.

I could change the solution a bit to support setting the margins in between:

static readonly int DebugGridItemSpacingX = 4;
static readonly int DebugGridItemSpacingY = 4;

for (int x = 0; x < max; x += DebugGridItemSpacingX)
{
    for (int y = 0; y < max; y += DebugGridItemSpacingY)
    {
        var rect = new BoxView
        {
            WidthRequest = DebugGridItemSize,
            HeightRequest = DebugGridItemSize,
            VerticalOptions = LayoutOptions.Start,
            HorizontalOptions = LayoutOptions.Start,
            Margin = new Thickness(x, y, 0, 0),
            Color = DebugGridColor
        };

        gridContent.Children.Add(rect);
    }
}

However, on this test device that would create a grid of 800 (height) / 4 (size) = 200x200 = 40.000 BoxView objects 😂 Obviously that's not very performant.

[sthewissen]

@jsuarezruiz Any comment on the above? ☺️ Would still love to see if we can make something like it happen. Perhaps @depechie also has some ideas here 🤔

[jsuarezruiz]

Mnn, we can add more BindableProperties to manage the BoxViewobjects size etc and leave a higher value by default. With small BoxViewsize it will affect the performance very negatively, but considering that it will be used only during development for specific tests, it may not be a big problem. Another option is perhaps to draw a Canvas and the boxes with SkiaSharp.

[sthewissen]

Yeah, I tried but it affects performance in such a way that it's unusable. I have considered SkiaSharp too, but I'm also still not convinced taking a dependency on SkiaSharp is worth it for a package primarily used for simple debugging. When you go to production you probably won't want too much overhead to clean up after. If we end up going the Skia route I would hope we could somehow help users with that?

[Depechie]

Never did any memory profiling on the different controls... so have no reference. Something like Label with BackGroundColor would that be better than BoxView? Anyway drawing a lot of controls will always be bad I guess :/

[sthewissen]

This is being worked on further in https://github.com/sthewissen/Xamarin.Forms.DebugRainbows/tree/debug-grid