post/win10/2017/10/02/wpf-transparent-blur-in-windows-10

[utterances-bot]

在 Windows 10 上为 WPF 窗口添加模糊特效（就像开始菜单和操作中心那样） - walterlv

其实我是希望能够找到为 Win32 桌面程序实现 Fluent Design System 效果的，不过一直没找到。倒是发现了一个可以让 Win32 桌面程序做出类似 Windows 10 开始菜单和操作中心那种模糊效果的方法。 写这篇文章并不意味着我推荐大家这么去做，只是希望将方法总结出来，作为一个

https://blog.walterlv.com/post/win10/2017/10/02/wpf-transparent-blur-in-windows-10.html

[CodingOctocat]

你好，我有个问题想请教一下，我使用 WPF，需要一张 Blur 效果的圆角图片，并且这个圆角只有左上、右上是圆角，我用 Border.Background+ImageBrush 的方式，但是发现 Blur 效果会溢出，如果设置 ClipToBounds="True"，那么圆角区域仍然溢出。这要如何解决？

<Border CornerRadius="4,4,0,0" ClipToBounds="True">
    <Border.Background>
        <ImageBrush ImageSource="/Resources/Images/XXX.png"
                    Stretch="UniformToFill" />
    </Border.Background>
    <Border.Effect>
        <BlurEffect Radius="45" />
    </Border.Effect>
</Border>

[walterlv]

你好，我有个问题想请教一下，我使用 WPF，需要一张 Blur 效果的圆角图片，并且这个圆角只有左上、右上是圆角，我用 Border.Background+ImageBrush 的方式，但是发现 Blur 效果会溢出，如果设置 ClipToBounds="True"，那么圆角区域仍然溢出。这要如何解决？

<Border CornerRadius="4,4,0,0" ClipToBounds="True">
    <Border.Background>
        <ImageBrush ImageSource="/Resources/Images/XXX.png"
                    Stretch="UniformToFill" />
    </Border.Background>
    <Border.Effect>
        <BlurEffect Radius="45" />
    </Border.Effect>
</Border>

也许可以试试 Clip 属性来裁剪。可以参考我的另一篇博客：https://blog.walterlv.com/post/clip-wpf-uielement-to-ellipse.html

[CodingOctocat]

Clip 也试过，也会溢出，看来只能用 ImageSharp 模糊图片。

[walterlv]

Clip 也试过，也会溢出，看来只能用 ImageSharp 模糊图片。

那就是层级不太对。要外层 Clip 内层模糊，这样外层的 Clip 才能把内层模糊溢出的部分裁掉。不能是同一个元素又 Clip 又模糊。

[SlimeNull]

非常坏消息, 这个 API 对于 WPF 程序, 在 Win10 和 Win11 上行为严重不一致