Using Blur to make Dialogs Pop in Silverlight 3
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;
ErrorWin.Show();
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.