Découvrir le package Debugrainbows Nuget dans .net Maui

Découvrez comment le package Debugrainbows NuGet peut vous aider à déboguer les perturbations visuelles dans votre application .net Maui pour vous aider à vous rendre à Pixel-parfait.

Admettons-le. À un moment donné de notre carrière, nous avons rencontré quelque chose dans notre interface utilisateur qui n’est pas tout à fait correct, et notre premier instinct pour le «déboguer visuellement» est de gifler un fond rouge vif (ou toute autre couleur accrocheuse). Haha! Je serai le premier à admettre – je l’ai fait plus de fois que je ne peux en compter! 😆

Mais pourquoi faisons-nous cela? Généralement, parce que nous essayons de localiser un élément d’interface utilisateur qui ne ressemble pas à ce que nous attendons. Peut-être qu’il est caché ou a un espacement étrange que nous ne pouvons pas expliquer… ou ce n’est tout simplement pas bon pour une autre raison mystérieuse.

La bonne nouvelle est que nous avons maintenant le Package debugrainbows nugetun outil incroyable pour ces cas. Il nous aide à identifier clairement tous les éléments visuels de l’interface utilisateur à l’aide de couleurs, sans modifier les propriétés visuelles existantes de ces éléments. Plongeons et voyons ce qu’il a à offrir! 🚀

Pour faciliter la compréhension de cette explication, je la diviserai dans les sous-thèmes suivants:

🔹 Quel est exactement le package Debugrainbows Nuget?
🔹 Prendre la mise en œuvre de Debugrainbows
🔹 Plateformes prises en charge

Quel est exactement le package Debugrainbows Nuget?

Déboguer les arcs-en-ciel est une bibliothèque open source créée par Steven Thewissen Conçu pour identifier tous les éléments visuels de votre application et les mettre en surbrillance avec des couleurs d’arrière-plan assignées au hasard. De plus, il vous permet d’ajouter des grilles à votre interface, vous aidant à affiner votre interface utilisateur et à voir que chaque pixel est précisément là où vous en avez besoin.

Mais… à quoi ressemble-t-il réellement sur mon écran? 🤔

Ci-dessous, je vais vous montrer un écran sans le Debugrainbows bibliothèque et une autre avec elle ajoutée, afin que vous puissiez voir une comparaison claire avant et après.

Débutation de la mise en œuvre de Debugrainbows

Pour réaliser un écran comme celui que nous avons vu plus tôt, vous devrez suivre quelques étapes d’implémentation.

Étape 1️⃣: Ajouter le Plugin.maui.debugrainbows Package NuGet à votre projet.

Étape 2️⃣: Aller à votre Mauprogram.cs déposer.

Dans ce fichier, vous devez vous inscrire Debugrainbows avec Maussade en ajoutant .UsedebugrainBows (), qui appliquera automatiquement les arrière-plans arc-en-ciel par défaut. Une fois ajouté, votre code devrait ressembler à ceci:

using Microsoft.Extensions.Logging; 
using Plugin.Maui.DebugRainbows; 

namespace RainbowSample 
{ 
    public static class MauiProgram   
    { 
	    public static MauiApp CreateMauiApp() 
	    {
	    
	    var builder = MauiApp.CreateBuilder(); 
		    builder 
		    .UseMauiApp<App>() 
		    .UseDebugRainbows() // Line added 
		    // Add the lines explained later in the session where the Grid is explained. 
		    .ConfigureFonts(fonts => 
		    { 
			    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); 
			    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold"); 
		    });
		     
		    #if DEBUG 
			    builder.Logging.AddDebug(); 
		    #endif
		     
		    return builder.Build(); 
	    } 
    } 
}

Votre écran devrait ressembler à ceci:

🗒️ À ce stade, chaque élément visuel de votre écran est automatiquement mis en évidence avec un arrière-plan différent, vous permettant de repérer facilement si elle prend un espace inattendu ou s’il y a d’autres informations que vous devez aborder.

Comment ajouter la grille à l’écran?

En plus de pouvoir identifier chaque élément comme nous l’avons vu plus tôt, vous pouvez également ajouter une grille sur l’écran. Ce grille agit comme une règle numérique que vous pouvez configurer, et il sera très utile pour repérer des zones qui pourraient ne pas avoir le rembourrage / marge correct, les problèmes d’alignement et d’autres critères que vous devez résoudre.

Vous pouvez ajouter la grille en utilisant le Debugrainbowoptions classe. Plongeons-nous dans ses propriétés:

• Showrainbows: Spécifie si des arrière-plans de couleur arc-en-ciel seront appliqués. Il accepte un bool valeur.
• Showgrid: Détermine si les lignes de grille doivent être affichées. Il accepte un bool valeur.
• Horizontalitem et VerticalItemSize: Ces propriétés vous permettent de spécifier le nombre d’unités d’écran entre les lignes de grille horizontales et verticales, respectivement. En d’autres termes, ils aident à contrôler l’espace entre les lignes, permettant un ajustement plus précis de la distance entre eux.
• MajorgridlineInterval: Définit l’intervalle auquel une ligne de grille majeure est tracée par rapport aux lignes de grille mineures. Par exemple, si vous définissez la valeur sur 4chaque quatrième ligne sera une ligne de grille majeure, tandis que les autres seront des lignes mineures. Les principales lignes peuvent être facilement identifiées car elles sont plus épaisses que les lignes mineures.
• Lignées majeures et Minorgridlines: Définit le style des lignes de grille majeures et mineures, respectivement. Vous pouvez personnaliser des propriétés comme Couleur, opacité et Largeur pour chacun. Ces paramètres sont configurés via le Gridlineoptions classe, vous permettant de personnaliser l’apparence des lignes de grille majeures et mineures.
• Gridorigin: Définit le point d’origine à partir duquel la grille est initialement tirée. Vous pouvez choisir entre les valeurs suivantes:
• Topleft: La grille commence dans le coin supérieur gauche de l’écran.
• Centre: Une ligne de grille majeure sera placée au centre de l’écran, et des lignes de grille supplémentaires seront tracées par rapport à cette ligne centrale.

Une fois que vous êtes familier avec ces propriétés, revenez à l’étape 2 et localisez le bloc de code qui dit « // Ajoutez les lignes expliquées plus loin dans la session où la grille est expliquée. » Là, vous pouvez simplement ajouter la configuration nécessaire pour votre grille, comme indiqué dans l’exemple suivant:

.UseDebugRainbows() 
.UseDebugRainbows(new DebugRainbowsOptions
{ 
    ShowRainbows = true, 
    ShowGrid = true, 
    HorizontalItemSize = 20, 
    VerticalItemSize = 20, 
    MajorGridLineInterval = 10, 
    MajorGridLines = new GridLineOptions { Color = Color.FromRgb(255, 0, 0), Opacity = 1, Width = 4 },
    MinorGridLines = new GridLineOptions { Color = Color.FromRgb(255, 0, 0), Opacity = 1, Width = 1 },
    GridOrigin = DebugGridOrigin.TopLeft, 
})

Et vous aurez un résultat comme celui qui suit:

Plates-formes prises en charge

Enfin, voici les versions minimales prises en charge pour que chaque plate-forme fonctionne avec cet incroyable package NuGet.

Références

Cet article était basé sur la documentation officielle: