Nous voyons de plus en plus souvent, sur des maquettes ou des applications, des images qui sont floutées ("blurred"), ce qui donne un effet plutôt sympathique d'un point de vue design/expérience. C'est, par exemple, ce que l'on retrouve nativement sur certaines applications présentes sur iOS:

Cet effet graphique, connu sous le nom de "Blur", est à utiliser avec parcimonie dans vos applications et cela pour plusieurs raisons:

• Tout d'abord, c'est un effet gourmand en termes de ressources matérielles (attention donc à la durée de vie de la batterie)
• Ensuite, cela peut rendre difficile l'affichage des informations si vous disposez d'une importante quantité de données à afficher

Si vous tenez cependant à utiliser cet effet, autant le faire de manière efficace! :)

Une des techniques potentielles, mais naïve, est de se dire que l'on va appliquer un masque et jouer sur son opacité. Cependant, le résulat n'est jamais aussi bien que ce que l'on peut voir sur d'autres applications ou sur des créas graphiques. Sur iOS, une autre possibilité est d'utiliser un composant dédié, tel que FXBlurView (https://github.com/nicklockwood/FXBlurView) dont la version Xamarin est disponible ici: https://components.xamarin.com/view/fxblurview.

Son utilisation est très simple car il suffit d'utiliser la méthode d'extension CreateBlurredImage en lui passant en paramètre les paramètres nécessaires:

var imageData = NSData.FromFile(imagePath);
backDropImageBlurredView.Image = UIImage.LoadFromData(imageData).CreateBlurredImage(10, 20, UIColor.Clear);

Le problème que j'ai rencontré avec cette technique concernait la couleur de fond. En effet, chaque image étant différente, je n'arrivais pas à avoir un flou sombre sur les images claires et un flou "pas trop sombre" sur les images foncées.

J'ai donc poursuivi mes investigations et suis tombé sur les classes UIVisualEffectView et UIBlurEffect, qui sont des nouveautés d'iOS 8 (donc assez "anciennes") et qui servent justement à gérer cet effet de flou, quelle que soit l'image sous-jacente:

// Background image
backgroundImageView.Image = UIImage.LoadFromData(imageData);

View.Add(backgroundImageView);

var blurEffect = UIBlurEffect.FromStyle(UIBlurEffectStyle.Dark);
var blurEffectView = new UIVisualEffectView(blurEffect);
blurEffectView.Frame = View.Bounds;
blurEffectView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth & UIViewAutoresizing.FlexibleHeight;

View.Add(blurEffectView);

A noter qu'il est également possible, toujours dans un souci d'optimisations et de respect des choix de l'utilisateur, de détecter si celui-ci a choisi ou non d'activer les effets de flou (dans les paramètres) pour agir en conséquence. Cela se fait via un appel à la propriété IsReduceTransparencyEnabled:

if (!UIAccessibility.IsReduceTransparencyEnabled)
{
    //
}

En termes de rendu, on constate bien l'effet attendu:

Happy coding! :)