窗口背景图片的模糊效果

Question

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

这是我的窗口样式：

<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>

问题在于模糊效果应用于整个窗口，而不仅仅是背景图像。因此，我的按钮也被模糊了，这不是我想要的。我只想让背景图像模糊，而不是按钮。该怎么做？

- petko_stankoski

Answer 1

不要使用ImageBrush作为窗口的背景，而应该将一个Image控件作为顶层容器的第一个（最低）元素添加到窗口中，并在那里设置效果：

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

        <!-- other UI elements -->

    </Grid>
</Window>

如果你真的需要一个背景画刷，你可以使用 VisualBrush 代替 ImageBrush，像这样：

<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（默认情况下以相对单位给出）如下：

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

当然，确切的值取决于图像的绝对大小。您还可以通过设置 ViewboxUnits =“ Absolute”以绝对单位指定Viewbox：

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

- Clemens

---

这个方法是可行的，但它会在模糊图像周围添加一个大约5毫米的黑色边框，并使图像变小5毫米以便留出边框的空间。我该如何去掉这个边框？ - petko_stankoski

我不知道那个边框是从哪里来的。它肯定是在你的应用程序中的某个地方。你尝试了哪种方法？ - Clemens

第二个，使用VisualBrush。 - petko_stankoski

好的，那似乎是模糊区域外部分增加了画笔的总尺寸。我会尝试修复它。也许另一种方法更简单。 - Clemens

窗口的大小是1024x1280。它是固定的。因此，背景图像的大小也相同。 - petko_stankoski

请查看我的编辑。您可以尝试调整Viewbox的值。如果您设置为10,10,1004,1260，还可以通过裁剪外部10个像素左右来使其看起来更好。 - Clemens