Premiers pas avec les pinceaux dans .NET MAUI

.NET MAUI a ajouté un ensemble de pinceaux qui vous permettront de colorer une zone d'une manière que vous définissez. Jetons un coup d'œil.

Bonjour ! 🙋‍♀️ J'espère que vous allez très bien. Comme nous le savons déjà, .NET MAUI a lancé une série d'aperçus qui nous donnent des informations sur les merveilleuses fonctionnalités, commandes et améliorations dont nous disposerons dans .NET MAUI.

Imaginez que vous peignez votre chambre et que vous besoin d'une éponge pour peindre un mur avec un "style éponge", mais pour la même pièce, vous devez également peindre les autres murs avec un rouleau pour une couleur unie. C'est formidable que vous ayez tout cela sous la main et que vous puissiez terminer le design dans votre pièce.

Pour .NET MAUI, nous avons des pinceaux pour appliquer un concept similaire à nos applications. C'est pourquoi aujourd'hui, nous allons apprendre ce sujet simple mais super important pour continuer à développer avec toute la puissance dont nous disposons. Apprenons-en plus sur les pinceaux !

Projet unique

Avant de commencer, je voudrais souligner un point :

• Il est important que vous connaissiez le projet unique .NET MAUI, qui est le type de projet que nous travaillera sur .NET MAUI. Si vous voulez en savoir plus, vous pouvez lire mon article à ce sujet ici.

Qu'est-ce qu'un pinceau ?

Brush est une classe abstraite qui vous permet de peindre une certaine zone. Cette classe comporte un ensemble de classes dérivées qui représentent différentes manières de peindre une zone spécifique.

Quels types de pinceaux sont disponibles ?

Vous pouvez choisir le style qui convient à votre application parmi ces options de type :

• RadialGradientBrush
• SolidColorBrush
• LinearGradientBrush

Apprenons-en plus sur chacun d'eux !

RadialGradientBrush

<RadialGradientBrush Center="0,5" Radius ="1"> <!-- le code expliqué à l'étape suivante, va ici → </RadialGradientBrush>

🔹 Étape 2 : Sélectionnez un contrôle dont la propriété est disponible pour appliquer le dégradé. Dans ce cas, nous l'appliquerons au Background d'un Frame.

<Frame.Background>
  <!-- le code expliqué à l'étape suivante, va ici →
</Frame.Background>

Ensuite, commencez à ajouter les fonctionnalités visuelles que votre dégradé aura !

<GradientStop Offset= "0.1" Couleur="Bleu Clair" />
 < GradientStop   Offset  =  " 0,6 "     =  " Lightpink  " />
 < OffsetTop   =  " 0,5 "    Couleur  =  " AliceBlue  " />

Pour mieux comprendre, définissons les propriétés de ces lignes :

Et c'est fait. C'est tout! Voici la structure d'échantillon finale ! ] <Arrêt Dégradé Décalage="xx" Couleur=27"07" ]" />
<Arrêt dégradé Décalage="xx"[27[1965]=0Couleur 19659028]"Couleur" />
</Brosse dégradé radial>
</Control.Background>

SolidColorBrush

La classe SolidColorBrush nous permet de peindre une zone avec une couleur unie. Nous avons trois façons de le faire. Voyons chacun d'eux :

1. Utiliser une couleur prédéfinie : Nous avons deux options pour le faire.

2. Utilisation d'un Brush prédéfini : La classe Brush définit un ensemble d'objets couramment utilisés (Colors) de type SolidColorBrush.

   <Frame Background="{x:Static Brush.Aqua}"[19659101]Utilisation de la notation hexadécimale : Enfin, avec les exemples ci-dessus, vous pouvez également utiliser une valeur hexadécimale. Par exemple : #FF9988

LinearGradientBrush

La classe LinearGradientBrush est chargée de peindre une zone spécifique avec un dégradé linéaire. Cela combine deux ou plusieurs couleurs le long d'une ligne connue sous le nom d'axe de dégradé. Comme dans la classe RadialGradientBrush, nous utilisons également la cible GradientStop.

Pour réaliser l'implémentation de LinearGradientBrush, vous devez suivre cette structure :

🔹 Étape 1 : Définissez le StartPoint et le EndPoint dans le LinearGradientBrush. Ces propriétés sont responsables de l'établissement des coordonnées bidimensionnelles du gradient linéaire. Ils ne sont pas obligatoires (si vous ne les ajoutez pas, il prendra les valeurs par défaut). Voyons comment cela fonctionne :

• StartPoint est chargé d'indiquer les coordonnées bidimensionnelles de départ du dégradé linéaire. La valeur par défaut de cette propriété est (0,0).

• EndPoint est chargé d'indiquer les coordonnées bidimensionnelles finales du dégradé linéaire. La valeur par défaut de cette propriété est (1,1).

Voyons le code de l'implémentation :

<LinearGradientBrush StartPoint=""0,2 EndPoint="1,0 ”>
  <!-- le code expliqué à l'étape suivante, va ici →
</LinearGradientBrush>

Le LinearGradientBrush nous offre différentes façons de refléter le dégradé. Toute la magie pour obtenir les différents types de dégradés linéaires (verticaux, horizontaux ou diagonaux) est donnée par les propriétés StartPoint et EndPoint du pinceau. Ces propriétés sont relatives à la zone qui est peinte. (0,0) représente le coin supérieur gauche de la zone à peindre et (1,1) représente le coin inférieur droit de la zone à peindre.

documentation officielle.

Exemple dans Code :

<Frame BorderColor[19659069=[19027]0 ]"Rose" OptionsVerticales="Remplir">
  [34]<410[90][34] Frame.Background>
   <LinearGradientBrush EndPoint="0,1"[1946
[28] <DégradéArrêt Couleur="Rose" Décalage="510"510"510" " />
   <Arrêt dégradé Couleur[19659027]="Bleu" Décalage="1.0" />[1965903] /Brosse dégradé linéaire>
  </Cadre.Arrière-plan>
</Cadre>

Caractéristiques des pinceaux

Maintenant, nous avons appris plus en détail chacun des types de pinceaux ! Enfin, je voudrais souligner les caractéristiques suivantes de chacun d'eux :

• La classe Brush possède également une méthode IsNullOrEmptyqui renvoie une valeur booléenne indiquant si le pinceau est défini ou non. Le plus important est qu'il s'applique à tous les types de pinceaux !

• Les instances de ces types de pinceaux peuvent être attribuées aux propriétés Stroke et Fill d'une forme, à la propriété Stroke d'une bordure, à la propriété Brush d'une ombre et à la propriété Background d'un VisualElement.

Merci d'avoir lu ! 💚💕

Références :