Pour décorer le fond d’un menu Shell, d’une page de saisie, etc, plutôt que rien ou qu’une photo qui ne va pas parfois un gradient bien choisi peut changer le look pour pas cher…
Magic Gradient
Disons le tout de suite il est parfaitement possible de faire des gradients sous Xamarin.Forms avec ce qui est fourni.Mais il faut ajouter un petit plus dont je vous ai souvent parlé, SkiaSharp. C’est ce que vous propose de faire la doc Microsoft ici https://docs.microsoft.com/fr-fr/xamarin/xamarin-forms/user-interface/graphics/skiasharp/effects/shaders/linear-gradient.
L’astuce est toujours la même, le XAML de Xamarin.Forms ne contient aucune primitive de dessin et encore moins les facilités vectorielles du “vrai” XAML. Par pallier ce manque une librairie s’est imposée, c’est SkiaSharp. De base ce n’est aussi parfait que du XAML vectoriel, mais au final on peut réaliser des choses assez proches, voire interpréter du SVG ce qui peut être très pratique.
Donc l’exemple de MS utilise SkiaSharp. Mais c’est “brut de pomme”.
Je vous propose, dans le cadre des gradients, d’utiliser plutôt un contrôle dédié, Magic Gradient, donc le nom est auto-explicatif.
Présentation
Magic Gradients est un NuGet qui offre la possibilité d'ajouter de beaux dégradés dans les applications Xamarin.Forms. Ce package NuGet prend en charge toutes les plates-formes Xamarin courantes, telles que Android , iOS et UWP . Il est donc construit sur SkiaSharp pour dessiner un dégradé multicolore ou multicouche simple dans une Skia Surface ( SKSurface). Il est simple à utiliser, vous n'avez rien besoin d'initialiser sur toutes les plateformes. Comme il y a toutes les chances que vous ayez déjà intégré SkiaSharp dans votre App pour d’autres besoins graphiques, le surcoût est vraiment minimum.
La configuration et l'utilisation de Magic Gradients dans votre application ne prend que quelques minutes. Voici un aperçu rapide de ce que vous pouvez faire avec la bibliothèque en l'utilisant comme calque ou arrière-plan séparé :
Installation
Dans un premier temps, prenez l'une de vos applications ou créez-en une avec Shell Template (c’est la façon de faire désormais). L’étape suivante consiste à installer le paquet NuGet. Pour ce faire, vous allez chercher Magic Gradients
Ou bien avec CLI du gestionnaire de packages tapez : Install-Package MagicGradients
Vous pouvez également utiliser l'interface CLI .Net: dotnet add package MagicGradients
Également en option, vous pouvez simplement modifier votre fichier csproj et ajouter <PackageReference Include="MagiGradients" Version="1.0.0" />
Bien entendu l’installation via le gestionnaire de paquets de Visual Studio reste la méthode la plus pratique…
A noter : le paquet n’a besoin d’être installé que dans le projet Xamarin.Forms (et pas dans les projets natifs).
Utilisation
Magic Gradients fournit un contrôle GradientView qui n'est qu'une surface SkiaSharp à l' intérieur. À l'intérieur de GradientView vous devez définir le GradientSourceconteneur par défaut. A l' intérieur , vous pouvez placer des gradients simples LinearGradient, RadialGradient ou plusieurs gradients avec une GradientCollection comme élément supérieur. Il accepte également CssGradientSource avec du code CSS en ligne ou avec liaison à CSS à partir d'un fichier via StyleClass ou StyleId.
Créons un dégradé simple de Jaune à Rouge :
Pour tous les exemples, nous importons l'espace de noms suivant :
xmlns : magic = "clr-namespace: MagicGradients; assembly = MagicGradients"
Ensuite nous pouvons utiliser le contrôle Gradient :
<magic:GradientView VerticalOptions = "FillAndExpand" >
<magic:GradientView.GradientSource>
<magic:LinearGradient Angle = "90" >
<magic:GradientStop Color = "Red" Offset = "0" />
<magic:GradientStop Color = " Jaune " Offset = " 1 " />
</magic:LinearGradient>
</magic:GradientView.GradientSource>
</ magic:GradientView>
Le résultat donnera cela :
On peut compliquer en intégrant deux dégradés différents :
<StackLayout Spacing = "0" >
<magic:GradientView VerticalOptions = "FillAndExpand" >
<magic:GradientView.GradientSource>
<magic:RadialGradient Center = "0.5,0.5" RadiusX = "200" RadiusY = "200" >
<magic:GradientStop Color = "Red" Offset = "0" />
<magic:GradientStop Color = "Yellow" Offset = "0.5" />
<magic:GradientStop Color = "Green" Offset = "1" />
</magic:RadialGradient>
</magic:GradientView.GradientSource>
</ magic:GradientView>
<magic:GradientView VerticalOptions = "FillAndExpand" >
<magic:GradientView.GradientSource>
<magic:RadialGradient Center = " 600,600 " RadiusX = " 600 " RadiusY = " 600 " Flags = " None " >
<magic:GradientStop Color = " Red " Offset = " 0 " />
<magic:GradientStop Color = "Yellow" Offset = "0.5" />
<magic:GradientStop Color = "Green" Offset = "1" />
</ magic:RadialGradient>
</magic:GradientView.GradientSource>
</magic:GradientView>
</StackLayout>
Inline CSS
La construction XAML d’un gradient sera claire et lisible mais elle sera verbeuse. On peut préférer un mode d’écriture plus court en exploitant du CSS en ligne.
Par exemple :
<magic:GradientView VerticalOptions = "FillAndExpand" >
<magic:GradientView.GradientSource>
<magic:CssGradientSource> <x: String>
<! [CDATA [
linear-gradient(242deg, rgba (195, 195, 195, 0,02) 0%, rgba (195, 195, 195, 0,02) 16,667%, rgba (91, 91, 91, 0,02) 16,667%, rgba (91, 91 , 91, 0,02) 33,334%, rgba (230, 230, 230, 0,02) 33,334%, rgba (230, 230, 230, 0,02) 50,001%, rgba (18, 18, 18, 0,02) 50,001%, rgba (18 , 18, 18, 0,02) 66,668%, rgba (163, 163, 163, 0,02) 66,668%, rgba (163, 163, 163, 0,02) 83,335%, rgba (140, 140, 140, 0,02) 83,335%, rgba (140, 140, 140, 0,02) 100,002%), gradient linéaire (152deg, rgba (151, 151, 151, 0,02) 0%, rgba (151, 151, 151, 0,02) 16,667%, rgba (11, 11 , 11, 0,02) 16,667%, rgba (11, 11, 11, 0,02) 33,334%, rgba (162, 162, 162, 0,02) 33,334%, rgba (162, 162, 162, 0,02) 50,001%, rgba (171 , 171, 171, 0,02) 50,001%, rgba (171, 171, 171, 0,02) 66,668%, rgba (119, 119, 119, 0,02) 66,668%, rgba (119, 119, 119, 0,02) 83,335%, rgba (106, 106, 106, 0,02) 83,335%, rgba (106, 106, 106, 0.02) 100,002%), gradient linéaire (11deg, rgba (245, 245, 245, 0,01) 0%, rgba (245, 245, 245, 0,01) 16,667%, rgba (23, 23, 23, 0,01) 16,667% , rgba (23, 23, 23, 0,01) 33,334%, rgba (96, 96, 96, 0,01) 33,334%, rgba (96, 96, 96, 0,01) 50,001%, rgba (140, 140, 140, 0,01) 50,001%, rgba (140, 140, 140, 0,01) 66,668%, rgba (120, 120, 120, 0,01) 66,668%, rgba (120, 120, 120, 0,01) 83,335%, rgba (48, 48, 48, 0,01) 83,335%, rgba (48, 48, 48, 0,01) 100,002%), gradient linéaire (27deg, rgba (106, 106, 106, 0,03) 0%, rgba (106, 106, 106, 0,03) 14,286% , rgba (203, 203, 203, 0,03) 14,286%, rgba (203, 203, 203, 0,03) 28,572%, rgba (54, 54, 54, 0,03) 28,572%, rgba (54, 54, 54, 0,03) 42,858%, rgba (75, 75, 75, 0,03) 42,858%, rgba (75, 75, 75, 0,03) 57,144%, rgba (216, 216, 216, 0,03) 57,144%, rgba (216, 216, 216, 0,03) 71,43%, rgba (39, 39, 39, 0,03) 71,43%, rgba (39, 39, 39, 0,03) 85,716%, rgba (246, 246,246, 0,03) 85,716%, rgba (246, 246, 246, 0,03) 100,002%), gradient linéaire (317deg, rgba (215, 215, 215, 0,01) 0%, rgba (215, 215, 215, 0,01) 16,667%, rgba (72, 72, 72, 0,01) 16,667%, rgba (72, 72, 72, 0,01) 33,334%, rgba (253, 253, 253, 0,01) 33,334%, rgba (253, 253, 253, 0,01) 50,001%, rgba (4, 4, 4, 0,01) 50,001%, rgba (4, 4, 4, 0,01) 66,668%, rgba (183, 183, 183, 0,01) 66,668%, rgba (183, 183, 183, 0,01) 83,335%, rgba (17, 17, 17, 0,01) 83,335%, rgba (17, 17, 17, 0,01) 100,002%), gradient linéaire (128deg, rgba (119, 119, 119, 0,03) 0%, rgba (119, 119, 119, 0,03) 12,5%, rgba (91, 91, 91, 0,03) 12,5%, rgba (91, 91, 91, 0,03) 25%, rgba (45, 45, 45, 0,03) 25%, rgba (45, 45, 45, 0,03) 37,5%, rgba (182, 182, 182, 0,03) 37,5%, rgba (182, 182, 182, 0,03) 50%, rgba (243, 243, 243, 0,03) 50%, rgba (243, 243, 243, 0,03) 62,5%, rgba (162, 162, 162, 0,03) 62,5%, rgba (162, 162, 162, 0,03) 75%,rgba (190, 190, 190, 0,03) 75%, rgba (190, 190, 190, 0,03) 87,5%, rgba (148, 148, 148, 0,03) 87,5%, rgba (148, 148, 148, 0,03) 100 %), gradient linéaire (90deg, rgb (185, 139, 80), rgb (176, 26, 6))
]]>
</ x:String> </magic:CssGradientSource>
</magic:GradientView.GradientSource>
</magic:GradientView>
Ce qui donnera le résultat suivant :
Bien plus !
l’idée ici était de vous présenter le travail étonnant de Bohdan Benetskyi car ce contrôle gradient pourra vous faire gagner un temps fou et vous aidera à proposer des mise en page plus agréable pour peu d’efforts.
Je ne souhaite pas réécrire toute la documentation du contrôle qui a fait l’objet d’une entrée de blog sur les blogs Xamarin. Le début de l’article ressemble beaucoup à celui de Bohdan, mais toute la fin reste à découvrir !
Lisez l’article original ici : article !
Conclusion
Souvent, partager de petites découvertes permet à plein de monde de gagner du temps et de profiter d’une astuce ou d’un contrôle dont on aurait continuer d’ignorer l’existence.
Aujourd’hui je voulais rapidement partager avec vous cette trouvaille en espérant que vous la trouverez utile !
Stay Tuned !