Enfin, une ombre plane, mais ce n'est uniquement que décoratif ! Mais justement comment créer des ombres sous MAUI au fait ?
Le territoire des ombres
L’esprit de Rahan, avec qui je partage 4 lettres sur 5, rode-t-il sur cet article ? Peut-être… Mais loin des terres abritant les âmes des anciens je vais plus prosaïquement vous parler d’ombre et de lumière, car l’une n’existe pas sans l’autre en philosophie. Ici je serai encore plus terre à terre en vous parlant d’API qui savent créer des ombres. Cela reste un peu magique quand même !
L'ajout d'ombres dans les applications rend la conception parfois plus élégante et donne de la profondeur à des contrôles spécifiques. Dans Xamarin.Forms nous pouvions le faire en utilisant certaines ressources telles qu'un moteur de rendu personnalisé, ce qui était un peu lourd. Mais aujourd’hui avec .NET MAUI les ombres sont intégrées nativement et consomment moins de ressources pour atteindre cet objectif ! Alors pourquoi s’en priver ? Je rappellerais toutefois que bien que l’effet soit très intéressant lorsqu’il est bien maîtrisé, une UI truffée d’ombres est indigeste. Donc soyez, comme avec tout effet visuel, parcimonieux et efficaces !
La naissance des ombres
Depuis la Preview 9 de .NET Maui, nous avons pu découvrir l’espace de noms Microsoft.Maui.Graphics une API de dessin d'interface utilisateur cohérente basée sur des moteurs graphiques natifs, ce qui nous permet d'ajouter plus facilement des bordures , des ombres, entre autres fonctionnalités bien utiles pour embellir une interface visuelle qui nécessitaient auparavant une plus grande utilisation des ressources, plus de code, et une meilleure connaissance de chaque OS supporté. Si vous comprenez les ombres vous comprendrez aisément comment accéder aux autre facilités de cet espace de noms.
Il faut souligner :
Des ombres peuvent également être ajoutées dans les styles et ainsi les ajouter à tous les composants dont vous avez besoin, cela nous permet également de donner de la profondeur aux contrôles, d'avoir de meilleures performances et d'économiser du code en même temps !
Shadow est un BindableProperty, cela signifie que nous pouvons mettre à jour les ombres avec des bindings.
Implémentation
Prenons notre petit robot qui est ajouté dans l’App MAUI par défaut, comme cela le travail de base est déjà fait ! Et ajoutons-lui une ombre :
<Image Source="dotnet_bot.png"
WidthRequest="250"
HeightRequest="310">
<Image.Shadow>
<Shadow Brush="Black"
Offset="20,20"
Radius="40"
Opacity="0.8" />
</Image.Shadow>
</Image>
Le principe est simple, A l’intérieur de la balise de l’objet concerné, ici une Image, nous ouvrons la balise de sa propriété Shadow pour y saisir les valeurs des différents paramètres (propriétés de la propriété Shadow en fait).
Une couleur de brosse, un offset pour décaler l’ombre en X,Y puis un radius pour le floutage et enfin une opacity.
N’est-il pas plus mignon comme ça, ressortant bien sur le fond blanc ? ! Il semble sortir de la page pour venir vous saluer directement !
Conclusion
Si l’abus des effets est toujours à déconseiller pour conserver une allure sobre et lisible aux UI, l’ajout d’ombres à certains endroits peut jouer un rôle important, soit simplement cosmétique (un titrage par exemple) ou au contraire fonctionnel (faire ressortir un champ plus important, une zone à saisir…).
Si cela était un peu galère à réaliser en Xamarin.Forms voici un exemple parfait des petites choses ajoutées par MAUI qui simplifient grandement la vie et dont on ne parle pas partout. J’espère avoir rendu justice aux ombres. En revanche évitez leur territoire le plus longtemps possible vous dirait Rahan, et il aurait raison.
Stay Tuned !