1

I would like the background of certain controls (e.g. a group box) to be a semi-transparent, blurred "glassy" color of choice, that blurs it's background (simply an underlying image in my case), similar to the iOS UI:

I know that this question has been asked quite a few times, but all questions and solutions I have found so far are either pretty old, not properly answered, only about blurring the whole window or use the now obsolote BlurBitmapEffect or other shenanigans like shaders.

Now, is there a "modern" and simple/static solution to this? It doesn't need to constantly update, UI elements don't move around and stay fixed in place at all time. Resizing is yet to be determined but will probably be turned off for simplicity's sake.

For example:

<Style TargetType="GroupBox">
        <Setter Property="Background" Value="Beige"/>
        <Setter Property="Opacity" Value="0.3"/>
</Style>

Something that would be as easy as Setting an Effect property to Blur would really come in handy here.

GenerationLost
  • 179
  • 1
  • 1
  • 15
  • Would something like the custom effect approach in [this answer](https://stackoverflow.com/a/34157501/14956277) work? – D M Mar 22 '21 at 15:58
  • Otherwise, since you mention your backdrop is a static image, maybe look at applying a [`BlurEffect`](https://learn.microsoft.com/en-us/dotnet/api/system.windows.media.effects.blureffect?view=net-5.0) directly to your background element as shown in [this answer](https://stackoverflow.com/a/51663804/14956277) and leaving the overlapping control transparent? – D M Mar 22 '21 at 16:01
  • @DM the first already looks too complex to me for such a simple visual effect. This was also one of the answers I found, that's why I mentioned shaders in my entry post. The second, I'm not sure. Wouldn't want to blur out the whole backdrop, really only where controls are on top, so the rest stays clearly visible. – GenerationLost Mar 22 '21 at 17:38
  • 1
    Bit more obscure search led to [this question](https://stackoverflow.com/questions/11524863/blur-background-with-viewbox) which looks to deal with applying a blur to only a portion of another element. – D M Mar 22 '21 at 19:10
  • It does seem a bit hacky still, but it works somewhat. Thank you for that, with this I totally have a starting point. Just implemented this solution and it seems it doesn't work on the window's background ImageBrush. I would have to stack an actual Image element with the rest of my content to make it work, but that's already better than nothing. – GenerationLost Mar 22 '21 at 21:16

0 Answers0