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.
Idea 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.
Idea 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
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' />
Requires Free Membership to View
When you register, you'll begin receiving targeted emails from my team of award-winning writers. Our goal is to provide a unique online resource for developers, architects and development managers tasked with building and maintaining enterprise applications using Visual Basic, C# and the Microsoft .NET platform.
Hannah Smalltree, Editorial Director
<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.
This was first published in December 2009