Awesome

🌴 Looking for a .NET MAUI version? 🌴

We have you covered! Just check out this new version!

Xamarin.Forms.DebugRainbows

The package you didn't even know you needed!

Why DebugRainbows?

Have you ever had a piece of XAML code that didn't produce the layout you expected? Did you change background colors on certain elements to get an idea of where they are positioned? Admit it, you have and pretty much all of us have at some point. Either way, this is the package for you! It adds some nice colorful debug modes to your ContentPages or specific visual elements that lets you immediately see where all of your elements are located!

API Reference

Property	What it does
`GridLineColor`	Defines a color for the grid lines or blocks (depending on `Inverse`).
`GridLineOpacity`	The opacity of the grid lines in the overlay.
`GridLineWidth`	The width of the grid lines or between each block (depending on `Inverse`).
`GridOrigin`	Where the first line is drawn. Either `TopLeft` or `Center`.
`GridPadding`	Pads the entire overlay. Takes a `Thickness` object.
`HorizontalSpacing`	Width between grid lines or the width of the blocks (depending on `Inverse`).
`Inverse`	Either draws grid lines (`false`) or block view (`true`).
`MajorGridLineColor`	When using major grid lines you can color them differently.
`MajorGridLineInterval`	Defines the interval of when a major grid line should be drawn.
`MajorGridLineOpacity`	The opacity of the major grid lines in the overlay.
`MajorGridLineWidth`	The width of the major grid lines or space between block (depending on `Inverse`).
`MakeGridRainbows`	Throws some instant joy into your overlays.
`ShowColors`	Automatically gives every visual element a random background color.
`ShowGrid`	Draws a customizable grid overlay used to help you align elements.
`VerticalItemSize`	Height between grid lines or the height of the blocks (depending on `Inverse`).

How to use it?

The project is up on NuGet at the following URL:

https://www.nuget.org/packages/Xamarin.Forms.DebugRainbows

Install this package into your shared project and your platform specific projects. After that you're good to go! Simply add the namespace declaration and set the ShowColors or ShowGrid attached property to true!

XAML UI

Apply to an individual Xamarin.Forms.ContentPage

<ContentPage rainbows:DebugRainbow.ShowColors="true"
   xmlns="http://xamarin.com/schemas/2014/forms" 
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
   xmlns:rainbows="clr-namespace:Xamarin.Forms.DebugRainbows;assembly=Xamarin.Forms.DebugRainbows" 
   x:Class="MyNamespace.MainPage">
             
  ...
             
</ContentPage>

Apply to every Xamarin.Forms.ContentPage

In App.xaml, we can add a Style to our ResourceDictionary:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MyNamespace.App"
             xmlns:rainbows="clr-namespace:Xamarin.Forms.DebugRainbows;assembly=Xamarin.Forms.DebugRainbows" >
    <Application.Resources>
        <ResourceDictionary>
            <Style TargetType="ContentPage" ApplyToDerivedTypes="True">
               <Setter Property="rainbows:DebugRainbow.ShowColors" Value="True" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Coded UI

Apply to an individual Xamarin.Forms.ContentPage

public MyContentPage : ContentPage
{
    Xamarin.Forms.DebugRainbows.DebugRainbow.SetShowColors(this, true);
}

Apply to every Xamarin.Forms.ContentPage

public class App : Xamarin.Forms.Application
{
    public App()
    {
    
#if DEBUG
        EnableDebugRainbows(true);
#endif
        
        //...
    });
    
    void EnableDebugRainbows(bool shouldUseDebugRainbows)
    {
        Resources.Add(new Style(typeof(ContentPage))
        {
            ApplyToDerivedTypes = true,
            Setters = {
                new Setter
                {
                    Property = Xamarin.Forms.DebugRainbows.DebugRainbow.ShowColorsProperty,
                    Value = shouldUseDebugRainbows
                }
            }
        });
    }
 }