Blur the background of the WPF container

Question

Ultimately, what I want to achieve is a replication to some extend, of an Aero glass functionality of a WPF content control.

If I apply the BlurEffect to a StackPanel that contains a TextBlock, I will have the TextBlock's text blurred.

Consider an examples:

No blur

no blur

and with <BlurEffect Radius="5" KernelType="Gaussian"/>

with blur

But is there a WPF way to blur the background behind the panel, and not it's contents?

The background of the StackPanel is a desktop, and the window that hosts it is set to AllowTransparency="True" to allow the custom-shaped look.

Notice that the background isn't blurred in your second image, just the text. I'm not sure how easy it will be to get the effect you want. This quesiton says something about implementing custom shaders... http://stackoverflow.com/questions/1304347/alternative-of-blur-effect-on-drawingvisual Maybe that would help. — Merlyn Morgan-Graham, Oct 19 '11 at 08:15
Also check out this p/Invoke stuff to use the native glass API: http://dotnet.dzone.com/articles/aero-glass-wpf-window — Merlyn Morgan-Graham, Oct 19 '11 at 08:23

score 16 · Answer 1 · answered Oct 19 '11 at 06:05

16

no, it is not possible. The Effect is applied to the element and all its children but you can easily place the TextBlock outside the container, rather than inside it.

Normally you would use a grid like so:

<Grid>
  <Border>
     <Border.Effect>
      <BlurEffect Radius="5" KernelType="Gaussian"/>
     </Border.Effect/>
  </Border>
  <TextBlock .../>
</Grid>

In your example that will make no difference though. What, exactly, are you trying to blur?

answered Oct 19 '11 at 06:05

Patrick Klug

14,056
13
71
118

You'd have to put the image in the part that got blurred. Notice that the background in that image isn't blurry, even though the text is... – Merlyn Morgan-Graham Oct 19 '11 at 08:12

score 3 · Answer 2 · answered Aug 31 '16 at 18:58

You can use the SetWindowCompositionAttribute on a Systems.Window, but you are then forced to set the WindowStyle to "None" and implement your own native Window funtionality and handles. Also inheriting from a custom control is quite complicated. Long story short, there's BlurryControls.

You can find it via NuGet by browsing for "BlurryControls" or check out the code yourself on GitHub. Eitherway, I hope this is helpful. It uses .NET 4.5.2 and only works for Windows10, since there is no solution to this problem on Windows8, and in earlier versions (Windows7 and Vista) you can achieve this by accessing DwmEnableBlurBehindWindow.

On GitHub you will also find a sample application called BlurryWindowInvoker.

score 3 · Accepted Answer · answered Oct 19 '11 at 05:41

3

What the background of the StackPanel? an ImageBrush? If so why cant you apply BlurEffect to that?

If that is not possible then try this..

1] Use an image and draw it completely over Grid as I see you dont want a TileEffect. Add BlurEffect to this Image. Make sure you fill image the uniformly.

2] Then add StackPanel with transparent background as next child in the Grid i.e. dont reverse the order of image and stackpanel.

3] Then add TextBlock in StackPanel.

OR

If you insist on using a Brush to be set as the backgrounnd of the panel then use VisualBrush that draws a blurred image as background of the stackpanel, instead of ImageBrush.

Let me know if any of these tips help.

answered Oct 19 '11 at 05:41

WPF-it

19,625
8
55
71

2

He's trying to blur the windows desktop background not some element in WPF. – Oggy Oct 19 '11 at 08:34
Thats what I am trying to help him with. as far as I know, brushes cannot be blurred. Hence I gave him options to blur the image and then draw it as a background of the stackpanel. Same hint is already given on MSDN... http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/12fbdc6d-0850-4379-b357-bc8a0abc03f3 – WPF-it Oct 19 '11 at 08:54
He doesn't have the image in his application. – Oggy Oct 19 '11 at 10:10

score 1 · Answer 4 · edited Jan 04 '19 at 11:34

1

You could apply this to a Grid.

<Grid.Background>
   <VisualBrush>
       <VisualBrush.Visual>
          <Image Source="RESOURCES/BACKGROUNDS/BACKGROUND_01.jpg">
             <Image.BitmapEffect>
                <BlurBitmapEffect KernelType="Gaussian" Radius="20" />
             </Image.BitmapEffect>
          </Image>
       </VisualBrush.Visual>
    </VisualBrush>
 </Grid.Background>

edited Jan 04 '19 at 11:34

Ivan Kaloyanov

1,748
6
18
24

answered Jan 04 '19 at 09:15

Abdel Moumen Abdel Raouf

79
3
10

1

why not use UIElement.Effect Property? `` – Kux Aug 17 '21 at 17:48
It's also accepted, but in my case [3-4 years ago] i used mine. and it's worked. – Abdel Moumen Abdel Raouf Nov 15 '21 at 11:14

Blur the background of the WPF container

4 Answers4

Linked

Related