Make Parent Window Blurred for Better Focus on UI, in WPF

• Download source code

This post is about UI experience for your application in WPF. In products, we come across situations where a user often mistakenly hits a modal form over a parent form. Either they realize once they click on the form or upon the warning message. Here, a visible inactive/shadowed background window can make user task easy, that describes some other dialog needs attention first. This concept is not new and we can find it in so many websites while showing images, etc. (For example, check the images in my blog and observe the background.)

Here in this post, we will replicate the scenario in Winform application using inbuilt effect of WPF, BlurEffect as shown in the image below:

Well, to achieve the functionality, the following piece of code is required.

/// <summary> 
/// Apply Blur Effect on the window 
/// </summary> 
/// <param name="win"></param> 
private void ApplyEffect(Window win) 
{ 
System.Windows.Media.Effects.BlurEffect objBlur = 
   new System.Windows.Media.Effects.BlurEffect(); 
objBlur.Radius = 4; 
win.Effect = objBlur; 
} 
/// <summary> 
/// Remove Blur Effects 
/// </summary> 
/// <param name="win"></param> 
private void ClearEffect(Window win) 
{ 
win.Effect = null; 
}

And check the code we need to call before showing any modal dialog.

private void btnShowDialog_Click(object sender, RoutedEventArgs e) 
{ 
WinModalDialog objModal = new WinModalDialog(); 
objModal.Owner = this; 
ApplyEffect(this); 

objModal.ShowDialog(); 

ClearEffect(this); 
}

So BlurEffect Class in System.Windows.Media.Effects is a bitmap effect that blurs the screen/control. Here in the above code, the instance of blur effect is assigned to the windows effect property. Bitmap effects are simple pixel processing operations that use bitmap sources and apply effects on it.