Problem solve Get help with specific problems with your technologies, process and projects.

Use the WPF blur effect to focus attention in your UI

With WPF 3.5 SP1 Microsoft has rewritten the effects framework and dramatically improved their performance at the same time. Learn how to use the Blur effect to make your UI more effective.

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' /> <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 last published in December 2009

Dig Deeper on Windows Presentation Foundation

Start the conversation

Send me notifications when other members comment.

By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Please create a username to comment.

-ADS BY GOOGLE

SearchCloudComputing

SearchSoftwareQuality

TheServerSide.com

SearchCloudApplications

Close