Is there an easy way to implement a blur backdrop effect in WPF?

[lfmissonb]

In web development, simply setting backdrop to blur in CSS and giving background an appropriate alpha value can achieve a blurred background. So, is there a simple way to implement the blur backdrop effect in WPF? Does WPF have any plans to add this feature in the future?

[Symbai]

Win10/11 has APIs for that. You can use these APIs yourself or, because you said you want an easy way, use a library for that: https://github.com/sourcechord/FluentWPF then after adding it to the resource dictionary, "all" you have to do is:

<fw:AcrylicWindow x:Class="WpfApp1.MainWindow"
        xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"
        Title="MainWindow" Height="300" Width="300">
    <Grid Background="#70FFFFFF"/>
</fw:AcrylicWindow>

[lfmissonb]

Thank you for your response.
Yes, Windows has APIs for that, but the APIs are only for Window.
And, I have tried the AcrylicBrush of FluentWPF, but the brush needs to bind a background control. It seems not to be applicable in the case of multiple controls.
like this situation:

<Canvas>
    <Grid ...>...</Grid>
    <Grid ...>...</Grid>
    <Grid ...>...</Grid>
</Canvas>

I want to apply blur backdrop for all three Grid, how can I do for that

[Symbai]

The best you can do is adding a blur effect then:

<Grid.Effect>
                <BlurEffect Radius="8"/>
</Grid.Effect>

But you can't get a blur effect on Grid only which goes through your window like on FluentWPF for example. That's impossible. Edit: Maybe the AcrylicPanel from FluentWPF is what you're looking for?

[cbaysinger]

You might try putting a border inside of each grid you want to blur and then add BlurEffect to the border.