[WP] Blur Glass Effect (iOS Background like)

jun 04, 2014 9:28 pm by Julien

En regardant la conférence d'Apple le soir dernier, je me suis posé la question de comment implémenter l'effet du fond flouté derrière un Panel sur WP.

L'effet est assez sympa selon le background et au final pas si compliqué à implémenter !

Ca donne ca sur iOS :

le fond se floute pour voir apparaître un Panel (ici pour déverrouiller l'écran)

Il y'a plusieurs façon de faire et je suis tout ouïe a vos propositions :D

Je précise que le fond doit être dynamique sinon je m'embeterai pas  !

Dans le cas de la lockscreen d'iOS tout le flond est flouté, il s'agit du cas le plus facile car il s'agit d'un bitmap sur lequel on applique un filtre mais comme on aimerait avoir un truc tip top moumoute, il faudrait pouvoir aussi gerer ce cas :

Ici le fond est partiellement flouté !

Le principe est simple :

Il nous faut 2 couches, la première couche va contenir notre image sur laquelle on aura appliqué un flou, celle du dessus contiendra une Grid dans laquelle on positionnera un overlay avec une opacité et notre image non flouté.

Il suffira de jouer sur la taille des lignes/colonnes pour faire apparaitre notre image floutée !

Le résultat :

Pour voir le code : https://github.com/jlopresti/blurglasseffectwp

J'en ai fait un petit control rapidos hier soir. Il prend en charge l'intensité du flou, la direction, la taille ainsi que la couleur de l'overlay
Concernant le floutage, je m'appuie sur la librairie WriteableBitmapExtensions, donc un merci à l'auteur :)

Je pense qu'on aurait pu le faire avec le SDK Nokia en ne crééant qu'une seule image avec le flou appliqué partiellement dans l'image mais bon pour chaque problème il y'a moulte solutions :D

Bizou les loulou

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading