Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS, MAUI

Les ajouts graphiques de Xamarin.Forms 4.8/5.0

Même si la V5 est déjà sortie il reste encore pas mal de choses importantes dans la 4.8 à regarder de près, gradients, brosses, Flyout backdrop…

Un monde qui bouge !

Le monde Xamarin.Forms ne fait pas exception : il bouge tout le temps ! Une preuve de ces évolutions permanentes est sous nos yeux depuis le 7 août dernier lorsque Xamarin.Forms a été mis à jour à nouveau. Maintenant, nous avons la version 4.8 et même la 5.0, qui fournissent encore plus de fonctionnalité avant le grand saut vers MAUI. De ce foisonnement beaucoup de choses n’ont pas encore eu le temps d’être discutées comme la collection de fonctionnalités permettant aux développeurs de créer des applications plus interactives et attrayantes. Rapprochant le XAML des Xamarin.Forms encore plus du “vrai” XAML (ma référence absolue étant WPF).

Dans cet article, je vais me concentrer sur deux fonctionnalités disponibles depuis la version Xamarin.Forms 4.8:

  • Dégradés et pinceaux
  • Couleur de la toile de fond du menu déroulant

Dégradés et pinceaux

Afin de peindre une zone dans notre application nous devons utiliser un pinceau. Les brosses sont de différents types pour produire différentes sorties.

Les types de brosses disponibles sont pour l’instant :

  • Couleurs solides
  • Dégradés linéaires
  • Dégradés radiaux

Couleurs solides

Le pinceau de couleur unie permet de peindre une zone avec une couleur unie, comme son nom l'indique... Voici un exemple de code XAML :

image

ce qui donnera le magnifique affichage suivant

image

Gradient linéaire

Le pinceau dégradé linéaire permet de combiner deux ou plusieurs couleurs dans un dégradé, ce qui commence à être beaucoup plus intéressant du point de vue visuel. Voir le dégradé linéaire vert à jaune dans la capture d'écran suivante :

image

Pour utiliser le dégradé linéaire il faut utiliser les propriétés StartPoint et EndPoint. Si on désire implémenter le dégradé de la capture d'écran précédente, on le codera comme suit :

image

Dégradé radial

Le dernier type de pinceau désormais disponible dans Xamarin.Forms est le dégradé radial qui nous permet de mélanger deux ou plusieurs couleurs dans un dégradé de forme circulaire. Comme le dégradé précédent, celui-ci nous oblige à déterminer deux propriétés: Center pour spécifier l'emplacement du centre du dégradé, et Radius pour déterminer la taille du rayon du dégradé.

L'exemple de code suivant crée un dégradé radial avec du vert au milieu, devenant jaune sur les bords (c’est laid mais la transition est très voyante justement, ce qui est parfait pour un exemple !) :

image

image


Couleur de fond du menu déroulant

De nombreuses applications disposent d'un menu déroulant accessible via une icône de hamburger. Dans les versions précédentes de Xamarin.Forms, nous n'avions pas la possibilité de modifier l'apparence du menu lors de son ouverture et de sa fermeture.

Grâce à Xamarin.Forms depuis la version 4.8 nous pouvons facilement personnaliser l'apparence du menu dans notre application avec la fonctionnalité de couleur de fond de menu déroulant.

Le GIF suivant montre la fonction de couleur de fond déroulant en action :

Flyout-Backdrop-Color

Si vous vous demandez s’il est possible de combiner la fonction de couleur de fond déroulant avec les pinceaux et les dégradés discutés précédemment, la réponse est oui ! Il suffit de définir un pinceau et d'attribuer ses valeurs à la propriété Shell.FlyoutBackdrop . Voici un exemple:

image


Conclusion

Ces quelques nouveautés de la V 4.8 sont passés un peu à la trappe, peut-être parce que nous attendons tous MAUI désormais et que nous n’allons pas nous lancer dans des essais novateurs sous Xamarin.Forms. Il nous faut maintenir l’existant et réserver nos efforts pour le saut vers MAUI… Peut-être, mais ce qui est appris aujourd’hui ne sera plus à apprendre demain car n’oublions pas que MAUI c’est avant tout les Xamarin.Forms !

Brosses, formes, dégradés, arrière-plans, courbes, de plus en plus de primitives graphiques du “vrai” XAML passent dans Xamarin.Forms pour le préparer à sa nouvelle mue. Plus le temps passe et plus enfin ce XAML vient rejoindre ces frères. Et demain certainement disposerons-nous certainement d’un jeu de contrôles totalement identiques visuellement sur toutes les plateformes grâce à ces primitives graphiques. Nous aurons fait alors un grand pas en avant vers de véritables applications cross-platformes désignée en fonction de la société qui en passe commande et pour promouvoir cette dernière et non les plateformes de développement des uns et des autres qui, de plus, changent au gré du temps.

Ce que nous venons de voir est donc petit techniquement parlant, d’un impact limité dans les Xamarin.Forms telles que nous les connaissons aujourd’hui, mais cela cache un futur plus libre, plus proche de nos besoins et de ceux de nos clients…

Stay Tuned !

blog comments powered by Disqus