Les dégradés et Windows Phone 7

Dans Silverlight, il est très simple de mettre un dégradé comme fond d’un contrôle. Grâce aux classes LinearGradientBrush et RadialGradientBrush, en quelques lignes de XAML on obtient un dégradé linéaire ou radial. Seulement voilà, depuis la sortie des outils de développement de Juillet (version beta), les dégradés dans les applications Windows Phone 7 apparaissent très mal. En effet on voit dans l’émulateur, l’apparition de bandes à l’intérieur du dégradé, et ce bien que le code n’ait pas changé et que le rendu soit parfait dans Blend / Visual Studio… Pourquoi ?

Pourquoi ces bandes ?

Le problème vient du fait que Silverlight fait son dégradé en utilisant plus de couleur qu’un écran 16 bpp (bits par pixel) peut en afficher. Comme rien n’oblige les téléphones Windows Phone 7 à avoir des écrans 32 bpp, je suppose que l’équipe de développement de l’émulateur a préféré mettre l’émulateur en 16 bpp pour aider les développeurs à concevoir des applications qui fonctionnent quel que soit le matériel. Ce problème n’est donc pas lié à Windows Phone 7 lui-même, et on le retrouve sur d’autres plateformes. Voyons maintenant comment contourner ce problème.

Comment les faire disparaître ?

Une solution assez communément proposée est de transposer le dégradé en image en y ajoutant un fin bruitage. Cela casse la linéarité du dégradé et permet d’avoir des résultats assez satisfaisant.

Pour cela ouvrez votre outil graphique préféré (par exemple paint.net) et ajoutez du bruit. Tout est question de dosage, pour éviter de dégrader trop l’image, tout en ayant réellement un effet. Changez ensuite votre LinearGradientBrush par un ImageBrush contenant votre image et mettez le Stretch à Fill pour que votre dégradé s’étende sur tout son contenu. Et voilà !

Qu’en dit Metro ?

Dans le style Metro, on utilise principalement des couleurs unies et du contenu (images) pour les fonds des pages et des contrôles, c’est pourquoi cette restriction devrait être assez peu impactante pour peu que vous ayez respecté les consignes de Metro à la lettre. Sinon cette manipulation vous sauvera peut être la mise.