WPF: Blur wpf content behind a usercontrol

Question

I have a project which requires that consists of two user controls, A and B.

• User Control A (UC-A) appears in the background, the most distant component of my window.
• User Control B (UC-B) appears in the foreground, overlaying User Control A. UC-B is partially transparent.

As is common with many UI designs currently (as of Aug. '18), I want it that UC-B causes the all elements behind it to blur (and only the elements behind it), as per the mocked up image here:

Please note, this mockup is not designed to imply that the picture of the sea shore is the Windows desktop, it was simply the first image I came across on my PC. The sea shore picture is representative of UC-A, and the panel labelled "My Panel" is representative of UC-B.

I know that it is very easy to apply a blur effect to an element and all of its children, but how can achieve the effect below, whereby the background is only blurred where the panel exists?

Please keep in mind that these are separate User Controls.

Windows already has functionality to do something similar on a Window level, but I can't see how to do it on a WPF UserControl level.

I have come across this answer, but this doesn't work for me as I am using different user controls. This answer was the closest one to my problem that I could find.

Answer 1

It seems you can do this with vanilla WPF with a bit of work, but far easier, this great library exists which handles exactly this scenario!