WP7 background blur effect

Question

I need to know what is the best way to blur the background of a Windows Phone 7 application in order to focus the user's attention on the “always on top” popup.

My idea:

• Take a screenshot in memory in the background (turning it into frozen or something else).
• Add an image that overlaps the background grid but below the (with z index) popup.

However, I doubt that I can overlap the application panel.

At this point, if you have a solution, please let us know.

Answer 1

A few pointers for you ...

Unfortunately, Silverlight BlurEffect and other Bitmap effects did not get into Window Phone 7 , so you have to implement the blur yourself. This is actually quite simple, just use a Gaussian convolution filter .

To achieve this effect, you can capture the visual effects of your application in WriteableBitmap, manipulate the image to create a blur, and then overlay this image on top of your application using PopUp. I did something similar in a blog post that I wrote about animating animations:

http://www.scottlogic.co.uk/blog/colin/2011/04/metro-in-motion-3-flying-titles/

Find your root image as follows:

var rootElement = Application.Current.RootVisual as FrameworkElement; 

Add a copy of this user interface to the popup as follows:

  _backgroundMask = new Rectangle() { Fill = new SolidColorBrush(Colors.Black), Opacity = 0.0, Width = rootElement.ActualWidth, Height = rootElement.ActualHeight }; _popupCanvas.Children.Add(_backgroundMask); _targetElementClone = new Image() { Source = new WriteableBitmap(element, null) }; _popupCanvas.Children.Add(_targetElementClone); 

And show it:

 _popup.IsOpen = true; 

I will leave you to figure out how to blur the background!

Aside, you cannot overlay or capture the visualization of the application bar. Hide it before performing this conversion.

Finally, blurring the background is not really a Metro. Do you really want to do this?

Answer 2

Instead of blurring, just use the translucent layer at the top of the page.

You must hide the application bar before trying to create such an effect, since you cannot place anything on top of it.