Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Using Blur to make Dialogs Pop in Silverlight 3

Pete Brown - 23 March 2009

When an application needs to display a dialog, there needs to be something to make the user immediately focus on that dialog, even when there are lots of other elements on the screen

Most AJAX applications dim the screen behind a dialog by using a semi-transparent overlay. That certainly works well, but another effect to consider is a blur effect.

Here’s the dim effect


And here’s what a blur effect could look like, with the dark overlay retained. To remove the overlay, you’ll need to retemplate the control.


With more fields on-screen, the effect is certainly more compelling:


The code to create the blur is pretty simple. In this case, I put it right in the Application_UnhandledException function that displays the error dialog. You may wish to add it to a standard dialog base class or a helper library.

e.Handled = true;
ChildWindow ErrorWin = new ErrorWindow(e.ExceptionObject);
ErrorWin = new ErrorWindow(e.ExceptionObject);

ErrorWin.Closed += (s, args) => 
    { Application.Current.RootVisual.Effect = null; };

BlurEffect blur = new BlurEffect();
blur.Radius = 10;

Application.Current.RootVisual.Effect = blur;


Note that I use a lambda expression in-line to avoid creating an event handler for the closing event. Technically you’d probably want to add some code to also remove the event handler.

Simply, the code above adds a blur effect to the application’s RootVisual just before the dialog is displayed. When the dialog closes, it removes the effect.

Another interesting approach would be for the Closed handler to do a quick animation of the blur radius from 10 to 0 and then turn off the effect when the storyboard completes. The result would be a nice re-focusing of the content in the application. I’d also recommend re-templating the child window to remove the overlay if you plan to do anything creative with the blur.

posted by Pete Brown on Monday, March 23, 2009
filed under:    

4 comments for “Using Blur to make Dialogs Pop in Silverlight 3”

  1. Marksays:
    Nice effect, compelling and looks good too. Nice use of a 2D depth cue to produce that pop-out effect and it also prevents the background text from competing for the user's attention, cool. It should probably still be used with some discretion because there are often times when the user will benefit from the context provided by that background information while they read the dialog.
  2. Ali Takisays:
    Thanks a lot, i added it as an extinsion method (ShowBlure) and im using it, great job thanks

    public static void ShowBlur(this ChildWindow Popup)
    Popup.Closed += (s, args) =>
    { Application.Current.RootVisual.Effect = null; };

    BlurEffect blur = new BlurEffect();
    blur.Radius = 5;

    Application.Current.RootVisual.Effect = blur;
  3. Ashok Nsays:
    Hi All,
    How can we apply blur efect for child window? THrough above code we can apply blur only for main parent. If another child opens in parent. in that child window we got error. so in that scenerio how can we apply this blur effect for parent and 1 child window which are under error child window. Please send me if you have any solution.

    -Ashok N.

Comment on this Post

Remember me

1 trackback for “Using Blur to make Dialogs Pop in Silverlight 3”

  1. DotNetShoutoutsays:
    Thank you for submitting this cool story - Trackback from DotNetShoutout