KludgeHack

Blurred Background for Dialogs

One of the most common effects used to highlight content is the blur effect. Lots of javascript libraries and games make use (some abuse) of this effect to attract and focus the user attention to a more highlighted dialog/image/something.

I saw today a post at Curious Creature about using this effects in Java for showing modal dialogs.

As a proof-of-concept I created a fast and simple WPF project with the same effect. Using a sub-Grid, you can make one grid blurry while the new dialog keeps its original state.

This is my XAML file:

<Window x:Class=“Blurred.Window1″
   xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”
   xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml”
  >
  <Grid Margin=“10″>
    <Grid>
      <TextBlock>
        Lorem ipsum dolor sit ame . . . cinia. Cras ut augue.
      </TextBlock>
      <Grid.BitmapEffect>
        <BlurBitmapEffect />
      </Grid.BitmapEffect>
    </Grid>
    <Grid Margin=“100″>
      <Rectangle Fill=“Black” RadiusX=“8″ RadiusY=“8″ />
      <TextBlock Foreground=“White” Margin=“5″>
        Lorem ipsum dolor sit ame . . . cinia. Cras ut augue.
      </TextBlock>
    </Grid>
  </Grid>
</Window>

This is just an example. By placing the contents of the window inside a sub-grid, you can place an effect on that grid while showing the dialog you want the user to focus on. You can also use a timeline effect to fade-in and fade-out the blur and dialog. That’s up to you.

Although this effect can be very beautiful, this should be avoided completely in some cases. Most of the times, the user needs to be able to see the context data. With this blurry effect, the user looses the ability to see text that can be needed.

Usability is more important than fancy designs.