WPF has had bitmap effects since the first release. With WPF 3.5 SP1 Microsoft has rewritten the effects framework and dramatically improved their performance at the same time.
If you want to start using the effects API without creating your own effects classes, you can use the built-in DropShadow or Blur effects. In this tip, I’ll show how to use the Blur effect to make your UI more effective.
Technique One: A common use of the blur is to simulate motion. For example you can apply a blur to the items in a listbox whenever the user scrolls the list. If done correctly this can make the scrolling items appear to move at lightning speed.
Technique Two: You can use a blur to focus attention to a section of the UI. For example, when you show a Popup or Dialog in WPF apply a blur to the UI in the background. This will draw more attention to the dialog as the rest of the UI is blurry and the background appears to fade into the distance. Note that this technique works best when the main UI is maximized.
Example of Technique Two
Here is the XAML for the sample window.
<Window x:Class="FocusAttention.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="500" Background='LightBlue'> <Grid> <Grid.RowDefinitions> <RowDefinition Height='Auto' /> <RowDefinition Height='80' /> <RowDefinition Height='Auto' /> </Grid.RowDefinitions> <TextBlock FontFamily='Consolas' Foreground='White' Text='Use Blur to Focus Attention' FontSize='24' Margin='20' /> <StackPanel Orientation='Horizontal' Grid.Row='1' Margin='20,0'> <TextBlock Text='Loan Amount' /> <TextBox VerticalAlignment='Top' Margin='20,0' MinWidth='100' /> </StackPanel> <StackPanel Orientation='Horizontal' Grid.Row='2' Margin='20,0'> <Button Content='OK' Click='Button_Click' /> <Button Content='Cancel' /> </StackPanel> </Grid> </Window>
Here is the code that changes the Window Background brush and applies the effect.
var blur = new BlurEffect(); var current = this.Background; blur.Radius = 5; this.Background = new SolidColorBrush(Colors.DarkGray); this.Effect = blur; MessageBox.Show("hello"); this.Effect = null; this.Background = current;
Figure 1: Before the effect is applied.
Figure 2: After the effect is applied.
[Original article on TechTarget]
[...] Use the WPF (and Silverlight) Blur effect to focus attention (Walt Ritscher) [...]
I like this technique – I use a blur plus a “grayscale” effect when I pop up a dialog in my app logEnvy (http://logEnvy.com). You can even write a nice extension method on “Window” that will apply the shader effect to the root element of the parent window, launch the dialog, gather the result and then revert the shader effect before passing the result from ShowDialog() back to the caller.
Very cool blog and cool trick.
Instead of the SolidBrushColor in darkgray for the background I’d suggest to use this:
var blur = new BlurEffect();
blur.Radius = 3;
SolidColorBrush mask= new SolidColorBrush(Colors.White);
mask.Opacity = 0.5;
this.OpacityMask = mask;
MessageBox.Show(“hello”);
this.Effect = null;
this.OpacityMask= null;
I prefer this because if you have coloured images in the window, they will stay fully coloured even in background, while with OpacityMask they will look grayed out.
Ciao from Italy
-E-
Great tip thanks.
This blur effect is neat, but is is possible to blur whatever is behind a given rectangle? I think it would be neat to show a menu whose background is based on a blurred version of whatever is behind it, much like the Aero glass effect. I would find this useful even if I could only blur stuff within the same window (that is, if the menu had to stay within the client area of the main window.)