对窗口背景图像的模糊效果 [英] Blur effect on window background image

问题描述

我有一个以图像为背景的窗口.在该窗口上，我还有按钮和其他控件.

I have a window with image as background. On that window I also have buttons and other controls.

这是该窗口的样式:

<Style x:Key="MyWindow" TargetType="{x:Type Window}">
        <Setter Property="Background">
            <Setter.Value>
                <ImageBrush ImageSource="Images\myImage.png" />
            </Setter.Value>
        </Setter>
        <Setter Property="Effect">
            <Setter.Value>
                <BlurEffect Radius="20" />
            </Setter.Value>
        </Setter>
    </Style>

问题在于，模糊效果不仅应用于背景图像，而且应用于整个窗口.因此，我的按钮也模糊了，这不是我想要的.我只希望图像背景模糊而不是按钮模糊.我该怎么办?

The problem is that the blur effect is applied to the whole window and not just the background image. So, my buttons are also blurred, which is not what I want. I want just the image background to be blurred, and not the buttons. How can I do that?

推荐答案

不是将ImageBrush用作窗口的背景，而是将Image控件作为第一个(最低)元素添加到窗口的顶级容器中，然后在此处设置效果:

Instead of using an ImageBrush for the Background of your window, add an Image control as first (lowest) element to the top-level container of your window, and set the Effect there:

<Window ...>
    <Grid>
        <Image Source="Images\myImage.png" Stretch="Fill">
            <Image.Effect>
                <BlurEffect Radius="20"/>
            </Image.Effect>
        </Image>

        <!-- other UI elements -->

    </Grid>
</Window>

如果您确实需要背景画笔，则可以使用VisualBrush代替ImageBrush，如下所示:

If you really need a Background Brush, you might use a VisualBrush instead of an ImageBrush like this:

<Style TargetType="Window">
    <Setter Property="Background">
        <Setter.Value>
            <VisualBrush>
                <VisualBrush.Visual>
                    <Image Source="Images\myImage.png">
                        <Image.Effect>
                            <BlurEffect Radius="20"/>
                        </Image.Effect>
                    </Image>
                </VisualBrush.Visual>
            </VisualBrush>
        </Setter.Value>
    </Setter>
    ...
</Style>

为了裁剪模糊的背景画笔的边框，您可以像这样调整Viewbox(默认情况下以相对单位给出):

In order to crop the border of the blurred background brush, you could adjust the Viewbox (which by default is given in relative units) like so:

<VisualBrush Viewbox="0.05,0.05,0.9,0.9">

当然，精确值取决于图像的绝对大小.您还可以通过设置ViewboxUnits="Absolute":

Of course the precise values depend on the absolute size of the image. You might also specifiy the Viewbox in absolute units by setting ViewboxUnits="Absolute":

<VisualBrush Viewbox="0,0,1024,1280" ViewboxUnits="Absolute">

这篇关于对窗口背景图像的模糊效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！